jjcale Posted February 27, 2017 Share Posted February 27, 2017 Hi Phaser practitioners, I am trying to achieve a very exact walking animation, something like the old school Manic Miner game: With every frame (effectively with every RIGHT key press - quick), you move an exact number of pixels. For example, I have 4 frames to walk right. Frame 0 Frame 1: + 4 pixels Frame 2: + 8 pixels Frame 3: + 12 pixels I want to avoid the "Michael Jackson" slipping effect, if you understand what I mean. I can set my sprite's velocity, I can set my onUpdate function, I can specify the sprite's animation frequency... However, with every RIGHT key press, I would like to walk exactly 4 pixels and change my animation frame++. This example shows, that you move right by slipping in-between frames: http://phaser.io/examples/v2/animation/two-frame-test Attached are Manic Miner's animation frames. Any idea how to accomplish this task? Thank you! JJ Link to comment Share on other sites More sharing options...
Rydez Posted February 27, 2017 Share Posted February 27, 2017 Hi jjcale! I'm not exactly sure how you want the character to move, but it seems like you would like to take the animation out of Phaser's hands. Maybe you could try manually changing the frame. Here's some pseudo code to get my point across. number_of_right_walk_frames = 4 pixel_step_size = 4 if (right_arrow_key_is_Down) { player.x += pixel_step_size if (player.frame !== number_of_right_walk_frames - 1) { player.frame += 1 } else { player.frame = 0 } } Is this what you're looking for? Or, am I misunderstanding? Link to comment Share on other sites More sharing options...
samme Posted February 27, 2017 Share Posted February 27, 2017 // @create -> animRight = player.animations.add("right", [0, 1, 2, 3]); // etc. // @key.onUp -> player.animations.currentAnim = animRight; player.animations.next(1); Rydez 1 Link to comment Share on other sites More sharing options...
jjcale Posted February 28, 2017 Author Share Posted February 28, 2017 I was pondering over this approach -- being in full frame control. Now how would I manage collisions and overlaps? This way I could easily get off the map and/or collide with wall objects. I would be missing out arcade physics. I would have to mimic jumps, etc. Link to comment Share on other sites More sharing options...
Rydez Posted February 28, 2017 Share Posted February 28, 2017 12 hours ago, samme said: // @create -> animRight = player.animations.add("right", [0, 1, 2, 3]); // etc. // @key.onUp -> player.animations.currentAnim = animRight; player.animations.next(1); Ooo, I like that next() method. Cleaner and more Phaserish than my if-else. 4 hours ago, jjcale said: I was pondering over this approach -- being in full frame control. Now how would I manage collisions and overlaps? This way I could easily get off the map and/or collide with wall objects. I would be missing out arcade physics. I would have to mimic jumps, etc. I'm pretty sure the physics will be completely independent of the animation technique you use. i.e., you wouldn't be missing out on arcade physics. This example uses arcade physics without any animations involved: https://github.com/photonstorm/phaser-examples/blob/master/examples/arcade physics/one way collision.js. Link to comment Share on other sites More sharing options...
jjcale Posted March 1, 2017 Author Share Posted March 1, 2017 Seems interesting, I need to check how this works: Say the player is 2 pixels from the wall (no collision) and I move the player right 4 pixels (new position - touching the wall with 2 pixels). But then the collision/overlap function will fire up, but the player's position has already been updated :-(. Tricky. Link to comment Share on other sites More sharing options...
Recommended Posts