CODEWITHSUNDEEP
javascriptfunctionpixi.js
Pan Pipatpunlop
Pan Pipatpunlop

Reputation: 57

Pixi.js - How to separate code to each file as function?

I'm very new with JS and Pixi.js and I want some advices, Below is my example code. I want to know How to separate code to main.js, boss.js as function? I try but it's not work stage is show but boss that i draw not show so, I want to know how to. Thank you

var stage = new PIXI.Container();
var renderer = PIXI.autoDetectRenderer();
document.body.appendChild(renderer.view);

var screenWidth = window.innerWidth;
var  screenHeight = window.innerHeight;
var circle = new PIXI.Graphics();
var  rect = new PIXI.Graphics();

var rectWidth = 160;
var  rectHeight = 200;

var boss = new PIXI.Container();

rect.lineStyle(0);
rect.beginFill(0xffdbac, 1);
rect.drawRect((screenWidth / 2) - (rectWidth / 2), (screenHeight / 2) - 60, rectWidth, rectHeight);
rect.endFill();
boss.addChild(rect);

circle.lineStyle(0);
circle.beginFill(0xffdbac, 1);
circle.drawCircle(screenWidth / 2, (screenHeight / 2) - 140, 80);
circle.endFill();
boss.addChild(circle);

stage.addChild(boss);

stage.interactive = true;

renderer.view.style.position = "absolute";
renderer.view.style.display = "block";
renderer.autoResize = true;
renderer.resize(screenWidth, screenHeight);

rect.lineStyle(0);
rect.beginFill(0xffdbac, 1);
rect.drawRect((screenWidth / 2) - (rectWidth / 2), (screenHeight / 2) - 60, 160, 200);
boss.addChild(rect);

circle.lineStyle(0);
circle.beginFill(0xffdbac, 1);
circle.drawCircle(screenWidth / 2, (screenHeight / 2) - 140, 80);
boss.addChild(circle);

stage.addChild(boss);

animate();

function animate() {

    renderer.render(stage);
    requestAnimationFrame( animate );
}

Upvotes: 0

Views: 986

Answers (1)

Hachi
Hachi

Reputation: 536

Here is an example of boss creation separated to it's own file and function: http://plnkr.co/edit/43GgC3nPvFKEpflGhwvV?p=preview

main.js

document.addEventListener("DOMContentLoaded", function(event) {
  var stage = new PIXI.Container();
  var renderer = PIXI.autoDetectRenderer();
  document.body.appendChild(renderer.view);

  var screenSize = {
    width: window.innerWidth,
    height: window.innerHeight
  }
  var rectSize = {
    width: 160,
    height: 200
  };

  var boss = createBoss(screenSize, rectSize);

  stage.addChild(boss);

  stage.interactive = true;

  renderer.view.style.position = "absolute";
  renderer.view.style.display = "block";
  renderer.autoResize = true;
  renderer.resize(screenSize.width, screenSize.height);

  boss = window.createBoss(screenSize, rectSize);

  stage.addChild(boss);

  animate();

  function animate() {
      renderer.render(stage);
      requestAnimationFrame( animate );
  }
});

boss.js

function createBoss(screenSize, rectSize) {
  var circle = new PIXI.Graphics();
  var rect = new PIXI.Graphics();
  var boss = new PIXI.Container();

  rect.lineStyle(0);
  rect.beginFill(0xffdbac, 1);
  rect.drawRect((screenSize.width / 2) - (rectSize.width / 2), (screenSize.height / 2) - 60, rectSize.width, rectSize.height);
  rect.endFill();
  boss.addChild(rect);

  circle.lineStyle(0);
  circle.beginFill(0xffdbac, 1);
  circle.drawCircle(screenSize.width / 2, (screenSize.height / 2) - 140, 80);
  circle.endFill();
  boss.addChild(circle);

  return boss;
}

Upvotes: 1

Related Questions