pixi.js Using the CreaturePack JS Runtime

Discuss issues pertaining to the various game/web runtimes of Creature here.
Post Reply
Dsarmis
Posts: 2
Joined: Fri Sep 22, 2017 9:49 am

pixi.js Using the CreaturePack JS Runtime

Post by Dsarmis » Fri Sep 22, 2017 9:58 am

Hello everyone. I am new to both pixi and creature. I am trying just to add a character with animation but i need it as optimized as it can be and to play on canvas. That is why i am trying to use the creaturePack instead of the json, and to use the js runtime instead of webassembly.
I have been able to load the data but not render them. I am missing something about CreaturePixiJSRenderer.js. Any help would be appreciated
I am posting the code and i will upload it in a repo in about an hour.

Edit
Could not share the repo so if anyone wants to take a look, the code is here
http://www.dsarmis.gr/games/pixi-cr/p-cr.zip

(PS. A server is needed in order to run)
Edit

Code: Select all

var loader = PIXI.loader;
	var texture = null;
	var creature_pack = null;
	var creature_rend;
	
	var stage = new PIXI.Container();
	var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.view);
	renderer.backgroundColor = 0xffffaa;
	
	
	loader.add({name:"anim_data", url:"p3_setup_character_data.creature_pack", xhrType:"arraybuffer"});
	texture = PIXI.Texture.fromImage("p3_setup_character_img.png");

	loader.load((loader,resources)=>{
		console.log(resources.anim_data); // Data exists

		creature_pack = new CreaturePackLoader(resources.anim_data.data);
		console.log(creature_pack); // Data exists
		
		creature_rend = new CreaturePackRenderer(creature_pack, texture);
		console.log(creature_rend);  // Data exists
		
		
		creature_rend.pack_renderer.setActiveAnimation("default");													
		creature_rend.scale.set(100.0);
		creature_rend.timeDelta = 1;
		creature_rend.pack_renderer.syncRenderData();
		  
		stage.addChild(creature_rend);
	});
	renderer.render(stage);

chong
Posts: 693
Joined: Thu Feb 19, 2015 2:21 am

Re: pixi.js Using the CreaturePack JS Runtime

Post by chong » Fri Sep 22, 2017 4:26 pm

Hello,

I think the reason you are not seeing your characters is because there is a difference between the Phaser and Pixi framework itself.
Take a look at the Phaser implementation:

https://github.com/kestrelm/Creature_We ... enderer.js

You notice there is an update() method that calls:
this.pack_renderer.stepTime(this.timeDelta);
this.UpdateData();

Now in Pixi, there isn't because Pixi does not have an update() call in their framework. This means you need to manually call the stepTime() method and the UpdateData() method. Both of these exist on the Pixi renderer since the Phaser renderer inherits from the Pixi renderer.

These calls should be called in the render loop itself ( at each frame update ) so when you start rendering in Pixi, make sure you have a per frame callback to update your characters like what is described above.

Cheers

Dsarmis
Posts: 2
Joined: Fri Sep 22, 2017 9:49 am

Re: pixi.js Using the CreaturePack JS Runtime

Post by Dsarmis » Mon Oct 02, 2017 9:12 am

After a lot of searching i am confused as $#!%$.
It will be a big post but i think it will be simple enough to point out some directions

Here is the code to create the Creature stuff in stage.

Code: Select all

	var loader = PIXI.loader;
	var texture = null;
	var creature_pack = null;
	var creature_rend;
	var testImg;

	var stage = new PIXI.Container();
	var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
	
	const ticker = new PIXI.ticker.Ticker();
	document.body.appendChild(renderer.view);
	renderer.backgroundColor = 0xffffaa;
	
	
	loader.add({name:"anim_data", url:"p3_setup_character_data.creature_pack", xhrType:"arraybuffer"})
			.add({name:"anim_texture", url:"p3_setup_character_img.png"})
			.load(createObjects);

	function createObjects(){

		testImg = new PIXI.Sprite(loader.resources.anim_texture.texture);
		testImg.y=350;
		testImg.x=150;
		
		creature_pack = new CreaturePackLoader(loader.resources.anim_data.data);
		creature_rend = new CreaturePackRenderer(creature_pack, loader.resources.anim_texture.texture);

		creature_rend.UpdateData(); 
		//creature_rend.pack_renderer.setActiveAnimation("default");													

		
		stage.addChild(testImg);
		stage.addChild(creature_rend);

		ticker.stop();
		ticker.add((deltaTime) => {
				
			testImg.rotation += 0.01 * deltaTime;
			renderer.render(stage);		

		});
		ticker.start();
		
	}
I get an error when i add the chreature at stage line (stage.addChild(creature_rend))

The error derives from CreaturePixiPackJSRenderer.js at line74 "Uncaught TypeError: Cannot read property 'stop' of undefined"

Code: Select all

function CreaturePackRenderer(pack_data_in, texture_in)
{
    console.log(texture_in); // <-- this texture exists
......
}

CreaturePackRenderer.prototype._renderWebGL = function(renderSession)
{
    // if the sprite is not visible or the alpha is 0 then no need to render this element
    if(!this.visible || this.alpha <= 0)return;
    // render triangles..
    console.log(renderSession);  // <-- exists 
    console.log(renderSession.spriteBatch); //  <-- undefined 
    renderSession.spriteBatch.stop(); // <-- error 
.....
}


I searched a bit and found out that this might be a texture issue. So i added the testImg at my main code with the same texture and if i remove the line that generates the error(stage.addChild(creature_rend)) then i can see the image.
So the texture is not responsible.

Both

var creature_pack = new CreaturePackLoader(loader.resources.anim_data.data);
var creature_rend = new CreaturePackRenderer(creature_pack, loader.resources.anim_texture.texture);
return data.
Is there any way to test the data if they are created correctly?
I mean that even if i send invalid data as texture in CreaturePackRenderer, there is no error generated to point out that the data are wrong.
Any directions what am i doing wrong or any directions to look for?

Any help would be appreciated.

Post Reply