Ad4m Posted February 26, 2017 Share Posted February 26, 2017 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 More sharing options...
squilibob Posted February 27, 2017 Share Posted February 27, 2017 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 More sharing options...
Ad4m Posted February 27, 2017 Author Share Posted February 27, 2017 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 More sharing options...
Ad4m Posted February 27, 2017 Author Share Posted February 27, 2017 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 More sharing options...
Ad4m Posted February 28, 2017 Author Share Posted February 28, 2017 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 More sharing options...
Recommended Posts