Some newbie questions about pixi js

[mif]

Hello, guys! I am junior-developer of mobile apps and games (:

I created one small game (2048 clone with pictures) for Android (only) on html5 (js) with css animation. Many users told me in reviews that game crashed many times. I also have some trace info:

Quote

backtrace:
    #00  pc 00000000  <unknown>
    #01  pc 00b5159f  /system/lib/libwebviewchromium.so
    #02  pc 001dbdcf  /system/lib/libwebviewchromium.so
    #03  pc 001dc01b  /system/lib/libwebviewchromium.so
    #04  pc 001da25b  /system/lib/libwebviewchromium.so
    #05  pc 0000d280  /system/lib/libc.so (__thread_entry+72)
#06 pc 0000d418 /system/lib/libc.so (pthread_create+240)

I think it happens because game container have many tiles with png or it's bug with chrome and css animation. Also game has some performance issues on old devices.

To solve this problems I want to try convert my game to pixi js engine (canvas, webgl). I already convert game logic to pixi. Some examples:

// init pixi engine
  function initPixi () {
    renderer = new PIXI.autoDetectRenderer(280, 280, {backgroundColor: 0x101822});
    document.getElementById('pixi-container').appendChild(renderer.view);
    stage = new PIXI.Container();
    requestAnimationFrame(animate);
  }

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

// create game container
setup = function() {
    // some code

    g = new PIXI.Graphics();
    g.beginFill(0x101822,1);
    g.drawRect(0,0,280,280);
    stage.addChild(g);
    for (var i = 0; i < this.size; i++) {
      for (var j = 0; j < this.size; j++) {
        g.beginFill(0x999999,1);
        g.drawRoundedRect(j * 68 + 10, i * 68 + 10, 58, 58, 3);
        g.endFill();
      };
    };
  };

// draw tile rectangle, add bg and png childs
function Tile (position, value) {
 // some code

    this.image = new PIXI.Graphics(); 
    this.image.position.x = this.x * 68 + 10;
    this.image.position.y = this.y * 68 + 10;
    this.image.beginFill(qualityColorsArray[this.value],1); 
    this.image.drawRoundedRect(0,0,58,58,3); 
    this.image.endFill(); 
    this.image.bg = PIXI.Sprite.fromImage('img/skins/skin-bg.png');
    this.image.bg.width = 58;
    this.image.bg.height = 58;
    this.image.addChild(this.image.bg); 
    this.image.png = PIXI.Sprite.fromImage('img/skins/' + collectionIid + '/' + this.skin + '.png');
    this.image.png.width = 58;
    this.image.png.height = 58;
    this.image.addChild(this.image.png); 
  }

// add tile to container
addTile = function(tile) {
  // some code
       g.addChild(tile.image);
}

// remove tile from container
removeTile = function(tile) {
  // some code
    g.removeChild(tile.image);
  };

// move tiles (animate with TweenMax) and crate merged tile
moveTile = function(direction) {
  // some code
  if (merged){
    TweenMax.to(tile.image, .2, {x: positions.next.x * 68 + 10, y: positions.next.y * 68 + 10, onComplete: removeTiles(merged.mergedFrom)});
    self.grid.insertTile(merged);
  } else {
    TweenMax.to(tile.image, .2, {x: positions.farthest.x * 68 + 10, y: positions.farthest.y * 68 + 10});
    moveTile(tile, positions.farthest);
  }
}

My questions is:

1. On Genymotion Android Emulator instead of game container with tiles I see only black square. But game works (tiles moves, score updates etc). What's wrong? How can I debug game on Android emulator (I try already Canvas and WebGL render).
2. My PNGs are bigger that tile size (350px vs 58px). Pixi render images like with bad antialiasing  (pixi) vs  (css). How can I fix this?
3. How can I add animation for new tiles? I try to add some TweenMax functions after g.addChild() function but nothing happens. I want to recreate css animation (code bottom)
4. I move merged tiles with TweenMax.to() animation and call removeTiles function after complete. I think function must play move animation and then remove tiles from container but in real world it just remove tiles and render merged tile so I don't see any animation. With Not merged tiles animation works correct.
5. Do u have any other suggestions about game performance and correct work with canvas and sprites? It will be very helpful for me, newbie in game development ^^.

   @-webkit-keyframes pop {
       0% {
           -webkit-transform: scale(0);
           -moz-transform: scale(0);
       }
   
       50% {
           -webkit-transform: scale(1.2);
           -moz-transform: scale(1.2);
       }
   
       100% {
           -webkit-transform: scale(1);
           -moz-transform: scale(1);
       }
   }

   Great thanks to community! Sorry for my bad English. I try to explain better if u don't understand something.

[ivan.popelyshev]

PIXI.autoDetectRenderer must be called without "new"

1. Give us minimal demo and steps to reproduce it

2. Png size must be from 0.5x to 2x for better scaling. You can make your atlas power-of-two (1024 or 2048), mipmapping will be set automagically (in pixiv4) or manually baseTexture.mipmap=true (in pixiv3)

3. TweenMax works with pixi just fine, tell me what are you tweening exactly?

4. dont understand, sorry

5. Yes. Use tex = renderer.generateTexture(tile.image), and then create sprite out of it : new Sprite(tex); . That way you'll be able to cache all rounded rectangle textures and use only sprites, PIXI knows how to optimize it.

Please use pixi-v4 : https://github.com/pixijs/pixi.js/blob/dev/bin/

[mif]

1. Just functions from first post with some other support functions called when device ready:

   function () {
       window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
         window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
       window.requestAnimationFrame(function() {
         manager = new GameManager(4, InputManager, HTMLActuator);
       });
       initApp();
       initPixi();
   }

   then "cordova run android". All in game works correct but instead of game container just black square.
2. What is it "atlas power-of-two "? Where must I set baseTexture.mipmap=true  ?
3. I try to do next things (scale from 0 to 1 but I need scale from 0 to 1.2 then 1):

   addTile = function(tile) {
     // some code
          g.addChild(tile.image);
          TweenMax.staggerFromTo(tile.image, 1, { scale: 0 }, { scale: 1, ease: Back.easeInOut }, 0.2);
          // or TweenMax.fromTo(tile.image, 1, { scale: 0 }, { scale: 1});
   }

   but nothing happens. tile just shown instantly without animation.

4. TweenMax.to not show tile move animation when onComplete calls function where moving tile remove from container. I need show user moving animation then remove tiles from container and then show merged tile with scale animation (3 question)
5. I will try this and pixi v4 tomorrow. Thank u!

[mif]

5. I must to do something like this?

function Tile (position, value) {
    this.image = new PIXI.Graphics(); 
    this.image.beginFill(qualityColorsArray[this.value],1); 
    this.image.drawRoundedRect(0,0,58,58,3); 
    this.image.endFill(); 
    var tex = this.image.generateTexture(this.image);
    this.image = new PIXI.Sprite(tex);
    this.image.position.x = this.x * 68 + 10;
    this.image.position.y = this.y * 68 + 10;
    this.image.bg = PIXI.Sprite.fromImage('img/skins/skin-bg.png');
    this.image.bg.width = 58;
    this.image.bg.height = 58;
    this.image.addChild(this.image.bg); 
    this.image.png = PIXI.Sprite.fromImage('img/skins/' + collectionId + '/' + this.skin + '.png');
    this.image.png.width = 58;
    this.image.png.height = 58;
    this.image.addChild(this.image.png); 
  }

May be will be better render all 2-2048 rectangles with skin-bg.png on game start and then use something like this?

function Tile (position, value) {  
    this.image = generatedRectanglesSprites[value];
    this.image.position.x = this.x * 68 + 10;
    this.image.position.y = this.y * 68 + 10;
    this.image.png = PIXI.Sprite.fromImage('img/skins/' + collectionId + '/' + this.skin + '.png');
    this.image.png.width = 58;
    this.image.png.height = 58;
    this.image.addChild(this.image.png); 
  }

 

[ivan.popelyshev]

no, you have to pre-generate textures (this.image) for every value. In function Tile() you have to create Sprite.

[mif]

function Tile (position, value) {
    this.image = new PIXI.Graphics(); 
    this.image.beginFill(qualityColorsArray[this.value], 1); 
    this.image.drawRoundedRect(0, 0, 58, 58, 3); 
    this.image.endFill(); 
    var tex = this.image.generateTexture(this.image);
    this.image = new PIXI.Sprite(tex);
    this.image.position.x = this.x * 68 + 10;
    this.image.position.y = this.y * 68 + 10;
    this.image.bg = PIXI.Sprite.fromImage('img/skins/skin-bg.png');
    this.image.bg.width = 58;
    this.image.bg.height = 58;
    this.image.addChild(this.image.bg); 
    this.image.png = PIXI.Sprite.fromImage('img/skins/' + collectionId + '/' + this.skin + '.png');
    this.image.png.width = 58;
    this.image.png.height = 58;
    this.image.addChild(this.image.png); 
}

so I just keep this? Right? That's all?

[ivan.popelyshev]

Move it somewhere else, create 11 textures up to 2048, and use them for sprites.

this.image = new PIXI.Graphics(); 
    this.image.beginFill(qualityColorsArray[this.value], 1); 
    this.image.drawRoundedRect(0, 0, 58, 58, 3); 
    this.image.endFill(); 

UPD. vk.com/popelyshev

[mif]

Hello, developers! I am about 1 question again! My users write me that on Android 4.2.2 they see black square instead of pixi game container, but all game logic works correct. I found similar question here: http://stackoverflow.com/questions/21044767/canvas-not-rendering-on-android-4-2-2 but I don't know how I can use answer from this page in pixi.

Quote

you can try this, it work for me on HTC device:

in html:

<canvas style="background-image:-webkit-canvas(mask);" />

in javascript:

 var ctx = document.getCSSCanvasContext("2d", "mask", 150, 80);
 //now you free to use canvas normally

Can this help me or need something else?