Render with Creature Using the CreaturePack JS Runtime

[Dsarmis]

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

 

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);
	

 

p-cr.zip

[ivan.popelyshev]

Do you mean 2d context?

@kestrelm

Do you even have 2d context support in any of Creature runtimes?

[Dsarmis]

If i am not mistaken, Pixi.js is responsible for rendering in 2d context. I have tried here

http://www.dsarmis.gr/games/cr/PixiJs-cp.html?useCanvas=1

useCanvas=1 uses canvas while useCanvas=0 uses webgl (if i am not mistaken since i am new on html5 and canvas)

(Thanks for the response)

[ivan.popelyshev]

Beware of black lines between triangles - as you see in that canvas2d example, its very difficult to draw meshes in 2d context without artifacts. Are you sure that you want to use Creature that has only meshes, and not Spine, that has simple rects too?

[Dsarmis]

I am still RnD and Creature is the first tryed because the artist all ready uses it. 
Spine is next to test. 

[ivan.popelyshev]

23 minutes ago, Dsarmis said:

I am still RnD and Creature is the first tryed because the artist all ready uses it. 
Spine is next to test. 

Spine has canvas fallback, its good if your model is made only with rectangles. Meshes have the problem I mentioned

[kestrelm]

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,  you need to manually call the stepTime() method and the UpdateData() method. Both of these exist on the Pixi renderer since the Phaser renderer inherit from the Pixi renderer. StepTime() steps the animation forwards in time by some delta and UpdateData() sends the data back to the renderer for WebGL rendering.

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.

 

Btw, you will need WebGL for Creature render since Creature is 100% mesh based.

Cheers

[Dsarmis]

Thanks @kestrelm,

I did notice them but wasn't sure about it. I will try to fix it on monday and post the results. 
 

[Dsarmis]

Hey @kestrelm, could you please help me a bit more? 
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. 

    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"

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. 

 

p-cr.zip

[kestrelm]

Hello,

Sorry actually I think there is some confusion, I just re-read your post. So take a look at how the wasm version is doing rendering:

              // Add CreaturePack objects
                var creatureContainer = new PIXI.DisplayObjectContainer();
    			creatureContainer.position.x = window.innerWidth/2;
    			creatureContainer.position.y = window.innerHeight/2;
    			creatureContainer.scale.set(15.0);
    			stage.addChild(creatureContainer);
    			
                var raptor_renderer = new CreaturePackRenderer(pack_manager ,"Raptor", texture);
                raptor_renderer.packManager.setPlayerActiveAnimation(raptor_renderer.playerId, "clip1");
    			creatureContainer.addChild(raptor_renderer);
    			creatureContainer.scale.x = creatureContainer.scale.x;
                    
                function animate() {
            		requestAnimationFrame( animate );
                    
                    raptor_renderer.packManager.stepPlayer(raptor_renderer.playerId, 1.0);
                    raptor_renderer.refresh();
            		// render the stage   
            		renderer.render(stage);
    		    }
    		
    		    animate();                
    		});		

My apologies, but I don't think you need to call UpdateData().  You call the packManager's stepPlayer() ( to step the animation forwards ) and then you invoke a refresh() call on your renderer. Again, please take a look at the wasm version for reference.

Update: Actually I think I know what the problem is. The wasm version has been updated to conform with the new PixiJS API, the original JS version is still on the old Pixi version. Do you mind giving the wasm version a go first? You can see it running very smoothly in the link provided on the Github page.

 

Thanks

[kestrelm]

Hello,

Ok good news, I just updated the repo: There is now a new CreaturePack PixiJS renderer for the newer version of PixiJS.

Please take a look at the new file and example here:

https://github.com/kestrelm/Creature_WebGL/commit/6f3d0ac02bb143737c4a5319bd556d32ccccb8a6

In the future for Creature related questions, please post on the creature kestrelmoon forums. It is difficult for me to track these questions if they are outside the Creature forums.

 

Cheers

[Dsarmis]

Hey @kestrelm

Thanks very much for both posts. I will try them today!

[kestrelm]

Hello, 

Please reply onto my creature kestrelmoon forums for any further issues:

http://www.kestrelmoon.com/creatureforum/index.php

 

Thanks!