[SOLVED] PlayCanvas with React - I'm just getting a blank screen

Umer_Younas · September 22, 2021, 9:47am

i m new to playcanvas.i m recreating space shooter game in javascript.
first i created in playcanvas editor from scratch it works very well but when i tried to acheive same thing
through javascript and all i get is blank screen.

here is my code.

import React, { useRef, useEffect } from "react";

import BgImage from "../images/mars.jpeg";

import * as pc from "playcanvas";

const Game = () => {

  const canvas = useRef(null);

  useEffect(() => {

    const app = new pc.Application(canvas.current, {});

    app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);

    app.setCanvasResolution(pc.RESOLUTION_AUTO);

    window.addEventListener("resize", () => app.resizeCanvas());

    app.start();

    ///Main Camera

    const camera = new pc.Entity("main camera");

    camera.enabled = true;

    camera.addComponent("camera", {

      projection: "orthographic",

      clearColorBuffer: true,

      clearDepthBuffer: true,

      clearColor: new pc.Color(0, 0, 0),

      frustumCulling: true,

      orthoHeight: 10,

      nearClip: 0.1,

      farClip: 1000,

      priority: 0,

      rect: new pc.Vec4(0, 0, 1, 1),

    });

    app.root.addChild(camera);

    camera.setLocalPosition(0, 10, 5);

    camera.setLocalRotation(-90, -180, 0);

    camera.setLocalScale(1, 1, 1);

    ///Main Camera ends

    //bg material

    const bgMaterial = new pc.StandardMaterial();

    bgMaterial.depthTest = true;

    bgMaterial.depthWrite = true;

    bgMaterial.cull = pc.CULLFACE_BACK;

    bgMaterial.shadingModel = pc.SPECULAR_BLINN;

    const asset = new pc.Asset("bg-img", "texture", {

      url: BgImage, //using react its an image

    });

    asset.preload = true;

    app.assets.load(asset);

    asset.on("load", (asset) => {

      bgMaterial.diffuseMap = asset.resource;

      bgMaterial.update();

    });

    //bg material ends

    //background

    const background = new pc.Entity("background");

    background.addComponent("model", {

      type: "plane",

      material: bgMaterial,

    });

    background.setLocalPosition(0, -10, 0);

    background.setLocalRotation(0, 0, 0);

    background.setLocalScale(15, 1, 30);

    app.root.addChild(background);

    //background 1

    const background1 = new pc.Entity("background");

    background1.addComponent("model", {

      type: "plane",

      material: bgMaterial,

    });

    background1.setLocalPosition(0, 0, 1);

    background1.setLocalRotation(0, 0, 0);

    background1.setLocalScale(1, 1, 1);

    app.root.addChild(background1);

    //particle system

    const particles = new pc.Entity("");

    particles.addComponent("particlesystem", {

      numParticles: 200,

      lifetime: 100,

      rate: 0.8,

      loop: true,

      preWarm: true,

      intensity: 1,

      blend: pc.BLEND_ADDITIVE,

      emitterExtents: new pc.Vec3(10, 1, 1),

    });

    app.root.addChild(particles);

  }, []);

  return (

    <div>

      <canvas ref={canvas}></canvas>

    </div>

  );

};

export default Game;
////code ends

link to my game i created in playcanvas editor.
i want to acheive same thing with above code.
https://playcanvas.com/editor/scene/1235119

Umer_Younas · September 22, 2021, 11:44am

hi everyone, any help is much appreciated.

Leonidas · September 22, 2021, 12:03pm

Hi @Umer_Younas,

It’s a bit difficult to debug React based project only by looking at code provided.

Are you able to share a repository to take a look?

Umer_Younas · September 22, 2021, 12:18pm

hi @Leonidas at the end i also provided a link to playcanvas editor project.
can u take a look at editor project and spot the difference between these two.
i m just creating github repo i will share in a bit.

Leonidas · September 22, 2021, 12:22pm

Your editor project works as expected. If your setting a black screen must likely your app initialization somewhere fails.

Check if you are getting any errors in the console. Also make sure your code is executing as expected, step through it using the browser debug tools.

Umer_Younas · September 22, 2021, 12:25pm

github repo link.
i double check no error on console.it just don’t show anything on screen.

Leonidas · September 22, 2021, 12:26pm

Thanks, I’ll take a look in an hour or two, if any other forum member doesn’t step in.

Umer_Younas · September 22, 2021, 12:31pm

thanks @Leonidas
really appreciate the help

yaustar · September 22, 2021, 1:44pm

Found the issue:

    camera.setLocalRotation(-90, -180, 0);

setLocalRotation is expecting a pc.Quat or 4 numbers that represent the components of a pc.Quat.

https://developer.playcanvas.com/en/api/pc.Entity.html#setLocalRotation

Looks like you wanted setLocalEulerAngles instead.

Doing so gives you:

Umer_Younas · September 23, 2021, 4:28am

@yaustar still black screen it does’nt make ant difference

Umer_Younas · September 23, 2021, 4:29am

hi @Leonidas any luck finding the issue.

Umer_Younas · September 23, 2021, 6:07am

hi @Leonidas @yaustar i re-write the whole code can u plz take a look at this code
i remove alot of entities from both code and editor project.
here is the link to fresh github repo

here is link to playcanvas editor project
https://playcanvas.com/editor/scene/1235119

import React, { useRef, useEffect } from “react”;

import BgImage from “./images/tile_nebula_green.jpeg”;

import * as pc from “playcanvas”;

const App = () => {

const canvas = useRef(null);

useEffect(() => {

const app = new pc.Application(canvas.current, {});

app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);

app.setCanvasResolution(pc.RESOLUTION_AUTO);

window.addEventListener("resize", () => app.resizeCanvas());

///--------------Main Camera-----------------/////////

const camera = new pc.Entity("main camera");

camera.enabled = true;

camera.addComponent("camera");

camera.camera.projection = pc.PROJECTION_ORTHOGRAPHIC;

camera.camera.clearColorBuffer = true;

camera.camera.clearDepthBuffer = true;

camera.camera.clearColor = new pc.Color(0, 0, 0);

camera.camera.frustumCulling = true;

camera.camera.orthoHeight = 10;

camera.camera.nearClip = 0.1;

camera.camera.farClip = 1000;

camera.camera.priority = 0;

camera.setLocalPosition(0, 10, 5);

camera.setLocalEulerAngles(-90, -180, 0); ///admin suggest this change before i was using setLocalRotation(x,y,z)

camera.setLocalScale(1, 1, 1);

app.root.addChild(camera);

///Main Camera ends

//------------------bg material---------------//////////

const bgMaterial = new pc.StandardMaterial();

bgMaterial.depthTest = true;

bgMaterial.depthWrite = true;

bgMaterial.cull = pc.CULLFACE_BACK;

bgMaterial.shadingModel = pc.SPECULAR_BLINN;

const asset = new pc.Asset("bg-img", "texture", {

  url: BgImage, //using react its an image

});

asset.preload = true;

app.assets.load(asset);

asset.on("load", (asset) => {

  bgMaterial.diffuseMap = asset.resource;

  bgMaterial.update();

});

//bg material ends

//---------------background script----------------////////////

var Bgscroller = pc.createScript("bgscroller");

Bgscroller.attributes.add("scrollSpeed", {

  type: "number",

  default: 1,

});

Bgscroller.attributes.add("tileSizeZ", {

  type: "number",

  default: 30,

});

Bgscroller.prototype._time = 0;

Bgscroller.prototype._startPosition = new pc.Vec3(0, 0, 0);

Bgscroller.prototype.initialize = function () {

  this._startPosition = this.entity.getPosition().clone();

  console.log(this._startPosition);

};

Bgscroller.prototype.update = function (dt) {

  console.log("updates"); /////runs ok

  // const self = this;

  this._time += dt;

  function repeat(t, length) {

    if (t > 0) return t % length;

    return length + (t % length);

  }

  const newPosition = repeat(this._time * this.scrollSpeed, this.tileSizeZ);

  this.entity.setPosition(

    this._startPosition.clone().add(this.entity.forward).scale(newPosition)

  );

};

///background script ends

//---------------background------------------///////////

const background = new pc.Entity("background");

background.enabled = true;

background.addComponent("model");

background.model.type = "plane";

background.model.material = bgMaterial;

background.model.castShadows = true;

background.model.castShadowsLightmap = true;

background.model.receiveShadows = true;

background.setLocalPosition(0, -10, 0);

background.setLocalScale(15, 1, 30);

background.setLocalEulerAngles(0, 0, 0); ///admin suggest this change before i was using setLocalRotation(x,y,z)

background.addComponent("script");

background.script.create(Bgscroller);

app.root.addChild(background);

//background ends

//----------------background 1---------------///////////

const background1 = new pc.Entity("background 1");

background1.enabled = true;

background1.addComponent("model");

background1.model.type = "plane";

background1.model.material = bgMaterial;

background1.model.castShadows = true;

background1.model.castShadowsLightmap = true;

background1.model.receiveShadows = true;

background1.setLocalPosition(0, 0, 1);

background1.setLocalScale(1, 1, 1);

background1.setLocalEulerAngles(0, 0, 0); ///admin suggest this change before i was using setLocalRotation(x,y,z)

app.root.addChild(background1);

//background 1 ends

app.start();

});

return ;

};

export default App;

yaustar · September 23, 2021, 10:04am

Here is the project that I fixed from your first post:
Space Shooter Main.zip (1.2 MB)

Umer_Younas · September 23, 2021, 10:12am

i take a look at it it shows same output as ur image above but i expecting to show plane with image at top of it.with this code i want to get to same point as in playcanvas editor.
am i doing it right?
link to playcanvas editor project:::https://playcanvas.com/editor/scene/1235119

Umer_Younas · September 23, 2021, 10:13am

@yaustar

yaustar · September 23, 2021, 10:14am

For this issue, there’s no light so it’s all black.

Changing the material to use an emissiveMap instead of diffuse, fixes this:

import React, { useRef, useEffect } from "react";
import BgImage from "./images/tile_nebula_green.jpeg";
import * as pc from "playcanvas";

const App = () => {
  const canvas = useRef(null);

  useEffect(() => {
    const app = new pc.Application(canvas.current, {
      mouse: new pc.Mouse(canvas.current),
      keyboard: new pc.Keyboard(canvas.current)
    });
    app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
    app.setCanvasResolution(pc.RESOLUTION_AUTO);
    window.addEventListener("resize", () => app.resizeCanvas());

    ///--------------Main Camera-----------------/////////
    const camera = new pc.Entity("main camera");
    camera.enabled = true;
    camera.addComponent("camera");
    camera.camera.projection = pc.PROJECTION_ORTHOGRAPHIC;
    camera.camera.clearColorBuffer = true;
    camera.camera.clearDepthBuffer = true;
    camera.camera.clearColor = new pc.Color(0, 0, 0);
    camera.camera.frustumCulling = true;
    camera.camera.orthoHeight = 10;
    camera.camera.nearClip = 0.1;
    camera.camera.farClip = 1000;
    camera.camera.priority = 0;
    camera.setLocalPosition(0, 10, 5);
    camera.setLocalEulerAngles(-90, -180, 0); ///admin suggest this change before i was using setLocalRotation(x,y,z)
    camera.setLocalScale(1, 1, 1);
    app.root.addChild(camera);
    ///Main Camera ends

    //------------------bg material---------------//////////
    const bgMaterial = new pc.StandardMaterial();
    bgMaterial.depthTest = true;
    bgMaterial.depthWrite = true;
    bgMaterial.cull = pc.CULLFACE_BACK;
    //bgMaterial.shadingModel = pc.SPECULAR_BLINN;
    const asset = new pc.Asset("bg-img", "texture", {
      url: BgImage, //using react its an image
    });
    asset.preload = true;
    app.assets.load(asset);
    asset.on("load", (asset) => {
      bgMaterial.emissiveMap = asset.resource;
      bgMaterial.update();
    });
    //bg material ends

    //---------------background script----------------////////////
    var Bgscroller = pc.createScript("bgscroller");

    Bgscroller.attributes.add("scrollSpeed", {
      type: "number",
      default: 1,
    });

    Bgscroller.attributes.add("tileSizeZ", {
      type: "number",
      default: 30,
    });

    Bgscroller.prototype._time = 0;
    Bgscroller.prototype._startPosition = new pc.Vec3(0, 0, 0);

    Bgscroller.prototype.initialize = function () {
      this._startPosition = this.entity.getPosition().clone();
      console.log(this._startPosition);
    };

    Bgscroller.prototype.update = function (dt) {
      //console.log("updates"); /////runs ok
      // const self = this;
      this._time += dt;
      function repeat(t, length) {
        if (t > 0) return t % length;

        return length + (t % length);
      }

      const newPosition = repeat(this._time * this.scrollSpeed, this.tileSizeZ);
      this.entity.setPosition(
        this._startPosition.clone().add(this.entity.forward).scale(newPosition)
      );
    };
    ///background script ends

    //---------------background------------------///////////
    const background = new pc.Entity("background");
    background.enabled = true;
    background.addComponent("model");
    background.model.type = "plane";
    background.model.material = bgMaterial;
    background.model.castShadows = true;
    background.model.castShadowsLightmap = true;
    background.model.receiveShadows = true;
    background.setLocalPosition(0, -10, 0);
    background.setLocalScale(15, 1, 30);
    background.setLocalEulerAngles(0, 0, 0); ///admin suggest this change before i was using setLocalRotation(x,y,z)
    background.addComponent("script");
    background.script.create("bgscroller");
    app.root.addChild(background);
    //background ends

    //----------------background 1---------------///////////
    const background1 = new pc.Entity("background 1");
    background1.enabled = true;
    background1.addComponent("model");
    background1.model.type = "plane";
    background1.model.material = bgMaterial;
    background1.model.castShadows = true;
    background1.model.castShadowsLightmap = true;
    background1.model.receiveShadows = true;
    background1.setLocalPosition(0, 0, 1);
    background1.setLocalScale(1, 1, 1);
    background1.setLocalEulerAngles(0, 0, 0); ///admin suggest this change before i was using setLocalRotation(x,y,z)
    app.root.addChild(background1);
    //background 1 ends

    app.start();

    window.pc = pc;
  });
  return <canvas ref={canvas}></canvas>;
};

export default App;

yaustar · September 23, 2021, 10:14am

As you can see, the material is using the emissive map, not diffuse:

Umer_Younas · September 23, 2021, 10:22am

@yaustar it’s working now thanks for help