Jump to content

Sprites animation & gen paint


Ad4m
 Share

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.

Link to comment
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);

 

Link to comment
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;
}			
}

 

Link to comment
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

Link to comment
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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...