Sign in to follow this  
Ad4m

Sprites animation & gen paint

Recommended Posts

Hi everyone. I'm just startig to learn phaser and so gamedev programming. I've seen some tutorials about basic stuff in phaser and now I think I should make - or try to - an "easy" arcade game like Paratrooper.
I was thinking to use silly graphics created like below.

var frame0 = [ .... ];
var frame1 = [ .... ];
var frame2 = [ .... ];

this.game.create.texture('idle', frame0, 4, 4, 0);		
this.game.create.texture('walk1', frame1, 4, 4, 0);		
this.game.create.texture('walk2', frame2, 4, 4, 0);

this.player = this.game.add.sprite(this.game.width/2, this.game.height/2, 'idle');

So ... my question here is how do do animations using the textures created like that, because this way i'll have 3 different images/sprites, not like in spritesheets or atlases. So far I haven't found a way to do that or i don't know if to do that can be possible.

Share this post


Link to post
Share on other sites

Not using spritesheets and just using textures you would have to:

  • create frame data from the textures
  • create animations from that frame data
  • attach that animation to the sprite

Not sure exactly how to do that but it would be something like:

function createFrameData(frameName){
  let data = new FrameData();
  for (frame of frameName){
    data.addFrame(frame);
  }
  return data;
}

function createAnimation(animationName, playerName, frameName) {
  let frames = createFrameData(frameName);
  return new Animation(this.game, playerName, animationName, frames);
}

var frame0 = [ .... ];
var frame1 = [ .... ];
var frame2 = [ .... ];

this.game.create.texture('player', frame0, 4, 4, 0);    
this.player = this.game.add.sprite(this.game.width/2, this.game.height/2, 'player');

createAnimation('idle', this.player, frame0);
createAnimation('walk1', this.player, frame1);
createAnimation('walk2', this.player, frame2);

this.player.animations.play('idle', 30, true);

 

Share this post


Link to post
Share on other sites

I see your point squilibob, but when i added the two functions and called them ir rises an error ReferenceError: FrameData is not defined.

Besides this i'm not sure about one thing the third parammeter received by

createAnimation(animationName, playerName, frameName)

and then passed to

createFrameData(frameName)

isnt a frame but an array of characters.

The code below is what i have so far for testing purposes. There it's shown the four textures and you can move one located in the middle of the screen.

var game = new Phaser.Game(400, 300, Phaser.AUTO, '', { init : init, create : create, update : update});
// Frames 
var frame0 = [	// idle
'.....33333......','....3333333.....','.....7D7D7......','....6777776.....',
'.....77477......','......222.......','....2222222.....','....7222227.....',
'....7222227.....','....7222227.....','....7001007.....','....7DDDDD7.....',
'....76D.D67.....','.....DD.DD......','.....DD.DD......','.....55.55......'];
var frame1 = [	// walk1
'.....3333.......','.....333333.....','....6667D7......','....6767777.....',
'.....7777.......','.....222........','....2222........','....72222.......',
'...677222.......','..76.2722.......','.....0070.......','.....DD.D.......',
'....DDD.DD......','..5DDDD.DDD.5...','...5DDD.DDD5....','....55...55.....'	];		
var frame2 = [	// walk2
'.....3333.......','.....333333.....','....6667D7......','....6767777.....',
'.....7777.......','......222.......','.....22222......','.....722227.....',
'.....722227.....','.....722227.....','.....70000......','.....7DDDD......',
'......DDDD......','......DDDD......','......5..5......','......55.55.....'];
var frame3 = [	//walk3
'.....3333.......','.....333333.....','....6667D7......','....6767777.....',
'.....7777.......','.....222........','....222277......','...77222277.....',
'...7.2222.77....','..7..2222.......','.....0000.......','.....DDDD.......',
'....DDD.DD......','..5DDDD.DDD.5...','...5DDD.DDD5....','....55...55.....'];
// -----------------------------
		
// Declaration
var player = null;
var cursor = null;
// Phaser functions
function init()	{game.scale.pageAlignHorizontally = true; }
function create(){
game.physics.startSystem(Phaser.Physics.ARCADE);
cursor = game.input.keyboard.createCursorKeys();
// Show three textures on the screen 4 demonstration purpose
var style = { font: "14px Arial", fill: "#ff0044", align: "center" };
var text = game.add.text(10, 10, "Textures created:", style);			
text_idle = game.create.texture('idle', frame0, 4, 4, 0);		
text_walk1 = game.create.texture('walk1', frame1, 4, 4, 0);		
text_walk2 = game.create.texture('walk2', frame2, 4, 4, 0);
text_walk3 = game.create.texture('walk3', frame3, 4, 4, 0);
game.add.sprite( 10,  30, 'idle'  );
game.add.sprite( 60,  30, 'walk1' );
game.add.sprite( 110, 30, 'walk2' );
game.add.sprite( 160, 30, 'walk3' );
//-------------------------
// Here goes the how to do animation		
player = game.add.sprite(game.world.centerX, game.world.centerY, 'idle');
player.anchor.setTo(0.5);
//-------------------------
game.physics.arcade.enable(player);
player.body.collideWorldBounds = true;
}
function update() {movePlayer();}	
//----------------
// Other functions
function movePlayer() 
{
if (cursor.right.isDown) {
player.body.velocity.x = 180;
// Animation
}			
else if (cursor.left.isDown) {
player.body.velocity.x = -180;
// Animation mirrored
}			
else {			
player.body.velocity.x = 0;
}			
}

 

Share this post


Link to post
Share on other sites

Browsing the site I found this thread http://www.html5gamedevs.com/topic/8258-create-animation-dynamically/, the author was looking for something similar, read it if you want, anyway one of the replies was so f.. helpful it almost has everything, i just need to do a few changes to my purpose.

Basically what i did was create a spritesheet dynamically using the textures made by game.create.texture(), and then use it to create the animation.

What we need to do is
1- Create the textures from the frames made using gen-paint.
2- Create the BitmapData Object (4 more info about it read the API docs) which will hold the spritesheet
3- Draw the sprites in the BitmapData object and add it to the cache
4- Create the player, animations, ......

See the file attached containing the whole example

walking_guy.js

Share this post


Link to post
Share on other sites

Hi, for those who want to create graphics faster and easyly using that simple tool called Gen-Paint, check out below this function i made that allows to create and add a spritesheet dynamically to our game cache using the arrays of pixel data generated in Gen-Paint. Just copy the function in your project, the function will be called using the line generated in the modified version of gen-paint attached (An example is also attached).

function createSpriteSheet(gameObj, frames, spritesheet_name){
	var id_base = "texture_base_id_";	
	var objs = {n:frames.arrFrames.length,width:null,height:null};	
	for (var x = 0; x < objs.n; x++){
		frames.arrFrames[x] = gameObj.create.texture(id_base+x,frames.arrFrames[x],frames.fWidth,frames.fHeight,0);
	}	
	objs.width = frames.arrFrames[0].width;
	objs.height = frames.arrFrames[0].height;	
	var bitmap = gameObj.add.bitmapData(frames.fWidth * objs.n * objs.width,frames.fWidth * objs.height);	
	var x = 0;
	for (var i = 0; i < objs.n ; i++){
		bitmap.draw(id_base+i, x, 0);
		x += objs.width;		
	}	
	game.cache.addSpriteSheet(spritesheet_name, '', bitmap.canvas, objs.width, objs.width);	
}

 

gen_paint_1.js

example.html

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.