SuperMarco

Members
  • Content Count

    27
  • Joined

  • Last visited

  1. I'm sorry for triple post, but I have made an other prototype but I need some help with a small bug. You can have a look at it here : http://94.23.21.129/zeds/proto2/ My problem is that when I press 2 button key and put my cursor at the opposite direction of where my sprite goes, it doesn't do any animations. E.G : - Press W and A (it will goes up left) with the cursor at the bottom right = no animations. - Press the same key and put the cursor at the top left = animations playing. Is there is anything to do when we presse two direction key at the same time ? Here is my sprite movement code : var dir = ["W", "N", "E", "S"]; charMovement: function(d) { //TODO Separate leg to upperbody for mouvement var d = this.mouseDirection(); var s = this.sprite; var speed = 1; if (this.key_w.isDown) { s.y -= speed; if (d == dir[1]) { // N s.animations.play('up'); } else if (d == dir[3]) { // S s.animations.play('rev_down'); } else if (d == dir[0]) { // W s.animations.play('left'); } else if (d == dir[2]) { // E s.animations.play('right'); } } else if (this.key_s.isDown) { s.y += speed; if (d == dir[1]) { // N this.sprite.animations.play('rev_up'); } else if (d == dir[3]) { // S this.sprite.animations.play('down'); } else if (d == dir[0]) { // W s.animations.play('left'); } else if (d == dir[2]) { // E s.animations.play('right'); } } if (this.key_a.isDown) { s.x -= speed; if (d == dir[0]) { // W s.animations.play('left'); } else if (d == dir[2]) { // E s.animations.play('rev_right'); } else if (d == dir[1]) { // N s.animations.play('up'); } else if (d == dir[3]) { // S s.animations.play('down'); } } else if (this.key_d.isDown) { s.x += speed; if (d == dir[0]) { // W s.animations.play('rev_left'); } else if (d == dir[2]) { // E s.animations.play('right'); } else if (d == dir[1]) { // N s.animations.play('up'); } else if (d == dir[3]) { // S s.animations.play('down'); } } },
  2. Actually, I will change the way of the how my character is moving. I just saw the brillant game nuclear throne, and I must say that the character movement inspired me a lot and its what I wanted to do (almost). So finally, the char will have 4 directions state, (left, right, up and down), with 4 or 5 sprite animations for each direction, but I will mirror 2 so, finally, I will have less sprite and this might solve my movement animations problem. I will do an other prototype and I come back here
  3. To be perfectly honest about the intention of the game, I will - if that's possible - to make it multiplayer too, but this is an other problem. I will continue to develop it then, but I think I need some help for the movement, because, I'm not sure how to handle when two keys are pressed. So far I did the four cardinal point like this : if (key_w.isDown) { sprite.y -= 2;} else if (key_s.isDown) { sprite.y += 2;} [...]But to handle the event when the player is pressing W and D, so the player will go up right, should I put the conditional inside the 'if (key_w.isDown)" of inside the key_d one. I mean, so far I really don't like my code how to handle this, and if I may, this is what its looks like : update: function() { if (this.key_w.isUp && this.key_a.isUp && this.key_s.isUp && this.key_d.isUp) { this.mouseFollow(); } else { this.charMovement(); } }, charMovement: function(d) { var d = this.mouseDirection(); var s = this.sprite.animations; if (this.key_w.isDown) { // GO UP this.sprite.y -= 2; if (d == dir[2]) { // N this.sprite.animations.play('up'); } else if (d == dir[6]) { // S this.sprite.animations.play('rev_down'); } else if (d == dir[7]) { // SW this.sprite.animations.play('rev_downLeft'); } else if (d == dir[5]) { // SE this.sprite.animations.play('rev_downRight'); } else if (d == dir[3]) { // NE this.sprite.animations.play('upRight'); } else if (d == dir[1]) { // NW this.sprite.animations.play('upLeft'); } } else if (this.key_s.isDown) { // GO DOWN this.sprite.y += 2; if (d == dir[2]) { // N this.sprite.animations.play('rev_up'); } else if (d == dir[6]) { // S this.sprite.animations.play('down'); } else if (d == dir[7]) { // SW this.sprite.animations.play('downLeft'); } else if (d == dir[5]) { // SE this.sprite.animations.play('downRight'); } else if (d == dir[3]) { // NE this.sprite.animations.play('rev_upRight'); } else if (d == dir[1]) { // NW this.sprite.animations.play('rev_upLeft'); } } if (this.key_a.isDown) { // GO LEFT this.sprite.x -= 2; if (d == dir[0]) { // W this.sprite.animations.play('left'); } else if (d == dir[4]) { // E this.sprite.animations.play('rev_right'); } else if (d == dir[2]) { // N this.sprite.animations.play('rev_upRight'); } else if (d == dir[6]) { // S this.sprite.animations.play('rev_downRight'); } else if (d == dir[1]) { this.sprite.animations.play('upLeft'); } else if (d == dir[3]) { this.sprite.animations.play('rev_upRight'); } else if (d == dir[5]) { this.sprite.animations.play('rev_downRight'); } else if (d == dir[7]) { this.sprite.animations.play('downLeft'); } } else if (this.key_d.isDown) { // GO RIGHT this.sprite.x += 2; if (d == dir[4]) { // E this.sprite.animations.play('right'); } else if (d == dir[0]) { // W this.sprite.animations.play('rev_left'); } else if (d == dir[2]) { // N this.sprite.animations.play('rev_upLeft'); } else if (d == dir[6]) { // S this.sprite.animations.play('rev_downLeft'); } else if (d == dir[1]) { this.sprite.animations.play('rev_upLeft'); } else if (d == dir[3]) { this.sprite.animations.play('upRight'); } else if (d == dir[5]) { this.sprite.animations.play('downRight'); } else if (d == dir[7]) { this.sprite.animations.play('rev_downLeft'); } } }, mouseFollow: function() { var d = this.mouseDirection(); var s = this.sprite; switch(d) { case dir[0]: this.sprite.frame = 44; break; case dir[1]: this.sprite.frame = 8; break; case dir[2]: this.sprite.frame = 17; break; case dir[3]: this.sprite.frame = 25; break; case dir[4]: this.sprite.frame = 35; break; case dir[5]: this.sprite.frame = 63; break; case dir[6]: this.sprite.frame = 62; break; case dir[7]: this.sprite.frame = 45; break; } }, mouseDirection: function() { var s = this.sprite; var m = this.game.input.mousePointer; var angle = Math.atan2(m.y - s.y, m.x - s.x) * (180/Math.PI); // TODO: Switch instead of IF if (angle < -111.5 && angle > -156.5) { return dir[1]; } else if (angle < -66.5 && angle > -111.5) { return dir[2]; } else if (angle < -22.5 && angle > -66.5){ return dir[3]; } else if (angle > -22.5 && angle < 22.5) { return dir[4]; } else if ( angle > 22.5 && angle < 66.5) { return dir[5]; } else if ( angle > 66.5 && angle < 111.5) { return dir[6]; } else if ( angle > 111.5 && angle < 156.5) { return dir[7]; } else if (angle < -156.5 || angle > 156.5) { return dir[0]; } }If you have any idea how I can simplify this code, I would be more than happy, because for now, I don't know how I can manage the diagonal animations... Thanks !
  4. Well, I would only have one character with that many sprite. The enemies would have less, but still at least 4 directions.
  5. Hi guys, I would like to know before I get more and more into Phaser, that is I will be able to do everything I would like to do. My goal is to create a kind of shooting game in 2D with some perspective, a little bit like the RPG game like that : (but I don't want to use a pixel world) So far I manage to develop a kind of prototype for the main character, the movement aren't great, but you will get the idea of the gameplay I would like to have : http://94.23.21.129/zeds/ ( I forgot to mention that you have to use the 'WASD' key of your keyboard for the movement ) The diagonal animations aren't done yet, I must say that it's a bit complex to do, and I'm not event sure I'm doing it the right way. Most likely the world would be seen in perspective, I think I would use the collisions of Phaser because my map would display in tile (Just for the trees, I would just need to have the bottom of the trees collide, I would like that the player can walk behind it). So yes, most likely my biggest concern is the movement of my character. So far, I'm using a sprite that I found on the web, because doing it one by myself would take a long time, and it was just to create a kind of prototype of it. I think that when I will create the new sprite, I will have 16 different direction to make the rotation of my character smoother like this : So far I have 8 and it was kind of tricky to manage when to use each animations depending of the position of the mouse. Do you think I can achieve what I want do do with Phaser ? Because it will involve guns, and shooting too. Thanks for your answser and advice !
  6. Try this : function create() { map = game.add.tilemap('mario'); map.addTilesetImage('superMario', 'tile');}[Edit] : Also I see that the name of your tilemap is a bit odd : "name":"\u5716\u584a\u5c64 1" game.add.tilemap() is taking the name of your tilemap that you give inside tiled map editor. addTilesetImage() is taking 2 argument, the first is the name of the tileset you gave when you added it to your map (in tiled) and the second is the tile you give in the preload().
  7. I had a closer look to the dot and the source code too to see what's everything were doing, and I also try to test by myself the calculus that the dot is doing and I don't get the same result as you said xerver. For example, my origin is upper left give me 0. The point down the origin (down left corner) is 18000 ish. The point corner up right is 32000. And the point bottom right is around 50000. (When my sprite is in the middle or my plan) I did the same thing as you did I guess here : var val = new Phaser.Point().copyFrom(this.sprite).dot(this.game.input.mousePointer); console.log(val);I also tried the second calculus to detect left or right, but my map is divided in 2 part in diagonal like this: The red line is moving with my sprite, so if I move my char up, the positive area become smaller, but it always start from the origin.. The value over the right line is positive, and the value below is negative. It seems that the perp line is not set properly or something ?
  8. Damned... I feel like an idiot.. it's working fine now thanks you !
  9. You were right ! I thought that I download the one from git... hmm weird. However, the value return but the point are very big, and always over 0, how is that possible ? :s
  10. I apologies, I'm using my code into classes, here is the Player one : ( I removed some line, to make it cleaner (such as input keys etc..)) Player = function(game) { this.game = game; this.sprite = null; this.group = null;};Player.prototype = { preload: function() { this.game.load.spritesheet('survivor', 'assets/survivor.png', 23, 46); }, create: function() { this.group = this.game.add.group(); this.sprite = this.group.create(300, 28, 'survivor'); this.sprite.anchor.setTo(0.5, 0.5); this.sprite.animations.add('left', [0, 1, 2, 3], 10, true); this.sprite.animations.add('down', [4, 5, 6, 7], 10, true); this.sprite.animations.add('up', [8, 9, 10, 11], 10, true); this.sprite.animations.add('right', [12, 13, 14, 15], 10, true); }, update: function() { var mouse = game.input.mousePointer; var val = (new Phaser.Point()).copyFrom(this.sprite).dot(mouse); console.log(val); }};With this code, the console is giving me this error : Uncaught TypeError: undefined is not a function Player.js:37 Player.update Player.js:37 update (index):41 b.StateManager.update phaser.min.js:6 b.Game.update phaser.min.js:8 b.RequestAnimationFrame.updateRAF phaser.min.js:11 window.requestAnimationFrame.forceSetTimeOut._onLoop phaser.min.js:11 I did something wrong probably, but I don't know where :S [Edit] I did some test, and it seems that is coming from the dot method.
  11. Of course I did , but I still got the error..
  12. Thanks lewster32 ! Unfortunately I decided to change the way to move my character, so it no longer use moveToPointer (at least for now). But this will be very useful for my ennemies in the game ! (but I will use the technic of the carnidal point ^^ I didn't manage to make it work this way, it keep telling me that "Uncaught TypeError: undefined is not a function" I don't know why... Thank you SebastianNette, I will use your way I think Just a last question (I know I'm a newbie...), to set the coordinate of the sprite at its center it's sprite.anchor.setTo(0.5, 0.5) ? Because I feel like my sprite loose in quality ..
  13. Damn ok, I did something so much complicated instead of something simple.. To get the center of my sprite, there is a method in the doc ? or I should find it by myself hard coded ? Thank you very much for your help !!
  14. SebastianNette, I manage to set up the calcul but I have one problem, the angle doesn't go over 180 degrees. I made a small example to explain : if I put my mouse at the point where the 2 arrow touch, it will be 180 degrees. but if I go on one way or the other, the angle decrease instead of increasing on one side, and decrease on the other. Is there is a trick to avoid this problem ?
  15. Oh ok then . But when you say calculate the angle between the sprite and the mouse, its also counting the origin point ? *removing the dust from old math books*