PhaserJS 2.4 released with integrated Creature support!

Discuss issues pertaining to the various game/web runtimes of Creature here.
neovive
Posts: 13
Joined: Thu Jul 23, 2015 2:53 am

PhaserJS 2.4 released with integrated Creature support!

Post by neovive » Thu Jul 23, 2015 3:37 pm

PhaserJS 2.4 was just officially released with support for Creature Animations. From the announcement (http://phaser.io/news/2015/07/phaser24-released):

"Added support for the Creature Automated Animation Tool. You can now create a Phaser.Creature object which uses json data and a texture atlas for the animations. Creature is a powerful animation tool, similar to Spriter or Spine. It is currently limited to WebGL games only, but the new libs should prove a solid starting point for anyone wanting to incorporate Creature animations into their games."

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

Re: PhaserJS 2.4 released with integrated Creature support!

Post by chong » Fri Jul 24, 2015 4:09 am

Fantastic news! Thanks for the support and I will be sure to check it out :)

Cheers!

abutkus
Posts: 18
Joined: Mon Apr 17, 2017 7:22 pm

Re: PhaserJS 2.4 released with integrated Creature support!

Post by abutkus » Mon Apr 17, 2017 7:25 pm

Hi,

I've brought creature basic so i can start playing about with better animations in phaser, and it looks like the following properties which i have on standard sprites are missing on a creature object.

creature.anchor.setTo(1.0)
creature.width = 20;
creature.height = 20;

it looks like all examples are shown using creature.scale.set(20.0); - which as far as im aware, not the correct way of setting a sprite initial height/width??

is there something i'm missing?

Thanks

Andy

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

Re: PhaserJS 2.4 released with integrated Creature support!

Post by chong » Mon Apr 17, 2017 7:49 pm

Hello,

So the Creature objects are not sprites, they are actually meshes. Their actual scaling is currently set via the scale property which applies a scaling transform to the triangles of the mesh to be rendered. There is no actual sprite that exists in the Creature runtime since you are not dealing with sprites here but rather mesh scaling.

If you look at the actual implementation of the renderer here:
https://github.com/kestrelm/Creature_We ... enderer.js

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

You will see that it is all mesh based.

Cheers

abutkus
Posts: 18
Joined: Mon Apr 17, 2017 7:22 pm

Re: PhaserJS 2.4 released with integrated Creature support!

Post by abutkus » Mon Apr 17, 2017 8:02 pm

Hi,

thanks for the quick reply.

So is there a way that i can apply an exact height (e.g. 200 pixels) to the scale of a creature object? is there some calculation i can do to determine this? when i plug 25.0 into the scale.set(20.0) what does this actually equate to in terms of pixels?

its strange because the documentation here: http://phaser.io/docs/2.6.1/Phaser.Creature.html

says that i can give a height/width and the scale will be calculated based on the inputted height/width

'The height of the displayObjectContainer, setting this will actually modify the scale to achieve the value set'

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

Re: PhaserJS 2.4 released with integrated Creature support!

Post by chong » Mon Apr 17, 2017 9:07 pm

Hello,

Currently not right now. The meshes and their points are set in character space, so what you are asking for is an exact way to get sizing measurements in pixel space.

I will need to investigate Phaser's API to see how their pixel space measurements are made in order to give you a function to accomplish or retrieve pixel space scaling measurements.

Do you prefer some kind of getter function that will return you a scaling value that will transform from pixel space into character space? ( Effectively, you give it some pixel sizing value and it returns you an actual scaling value to plug into the character's scale property )

abutkus
Posts: 18
Joined: Mon Apr 17, 2017 7:22 pm

Re: PhaserJS 2.4 released with integrated Creature support!

Post by abutkus » Mon Apr 17, 2017 10:58 pm

That would be great to be honest :)

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

Re: PhaserJS 2.4 released with integrated Creature support!

Post by chong » Mon Apr 17, 2017 11:24 pm

Hello,

I have coded up a short code snippet for you:

Code: Select all

CreatureRenderer.prototype.GetPixelScaling = function(desired_x, desired_y)
{
	// compute pixel scaling relative to mesh scaling
	var target_creature = this.creature_manager.target_creature;		
	target_creature.ComputeBoundaryMinMax();

    var mesh_size_x = target_creature.boundary_max[0] - target_creature.boundary_min[0];
    var mesh_size_y = target_creature.boundary_max[1] - target_creature.boundary_min[1];

    var scale_x = 1.0 / mesh_size_x * desired_x;
    var scale_y = 1.0 / mesh_size_y * desired_y;

    return [scale_x, scale_y];
};
You can put this in:
https://github.com/kestrelm/Creature_We ... enderer.js

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

( depending on which reference PixiJS renderer you are using with PhaserJS )

This function will attempt to compute the scaling based on the desired pixel sizes ( in the x and y dimension ) you provide.
The Phaser renderer object
https://github.com/kestrelm/Creature_We ... enderer.js

As you can see inherits from the PixiJS renderer. Thus, you should be able to invoke the function from there and give it a go.

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

Re: PhaserJS 2.4 released with integrated Creature support!

Post by chong » Tue Apr 18, 2017 4:08 am

Hello,

You can sync with the Creature WebGL github runtimes:
https://github.com/kestrelm/Creature_WebGL

Those functions have been checked into the repository :)

Usage:

Code: Select all

			creaturePhasorObject = new Phaser.CreatureDraw(game.world, game.world.centerX, game.world.centerY,	new_manager, texture);
			
			// Make sure you run the animation by a 0 step to initialise the points										
			new_manager.RunAtTime(0);
			
			// Now compute pixel scaling
			var pixelScale = creaturePhasorObject.GetPixelScaling(600, 650); 
			
			// Set pixel scaling
			creaturePhasorObject.scale.set(pixelScale[0], pixelScale[1]);
Remember that because Creature does free form mesh deformation, the scaling factors might change at every frame based on how the character deforms. Thus, you can call the GetPixelScaling at each frame to get the exact scaling factors if you want.

Cheers

abutkus
Posts: 18
Joined: Mon Apr 17, 2017 7:22 pm

Re: PhaserJS 2.4 released with integrated Creature support!

Post by abutkus » Tue Apr 18, 2017 7:20 am

Wow thank you, will try it out when I get home

Thanks

Andy

Post Reply