kgibson Posted March 31, 2016 Share Posted March 31, 2016 Alright, been stuck on this for a few days and starting to think I'm overlooking a very simple solution. I have a character that I want to walk back and forth on the screen. He needs to walk to one edge, turn around, then walk to the other edge, again turn, walk, etc.; rinse and repeat. I've tried simply '+=' and '-=' on his x coord with an if statement but he wont seem to walk in the other direction. Example, writing 'steve.x += 1;' then 'steve.x -= 1;' won't work. He gets to one edge but then stops. I've also tried using tweens but he seems to become jittery as he's a spritesheet already, maybe? His physics body will stay, but the pixels themselves seem to move outOfBounds. Anyway, here's the full code for what I'm working on, any help is greatly appreciated. http://pastebin.com/V0GM7z3w Also still learning Phaser so any feedback on code flow is helpful too! Thanks! Link to comment Share on other sites More sharing options...
AzraelTycka Posted March 31, 2016 Share Posted March 31, 2016 Hello, why don't you use velocities when you use physics on your sprite anyway? sprite.body.velocity.x = 50; if (sprite.body.x < yourBounceFlagPosition) { this.sprite.body.velocity.x *= -1; } Or if it moves to yoru destination with your tween retween it in the other direction and just keep it looped. Or put invisible boxed with physics to your destinations and set bounce to 1 that way when your sprite collides (don't forget to call collide) with your invisible wall it will 'bounce' it backwards. In your code you add +2 to sprite position and then there is an if condition where you either add +1 or substract -1 do you do this all at the same time or why is there that +2? Link to comment Share on other sites More sharing options...
kgibson Posted March 31, 2016 Author Share Posted March 31, 2016 Thanks for the reply! I tried this and functionally it's much better, however the sprite still seems to stop wherever I say the point is. Debugging the sprite shows that x is say, 300, but its shifting between 299 and 300 at a fast rate, its makes me think he's being still being pulled by something. Here's the change I made: function update() { steve.body.velocity.x = 50; if (steve.body.x >= 300) { steve.scale.x = -1; steve.body.velocity.x *= -1; } } Is my logic wrong? I can't get him to turn around even at a point, let alone, the world bounds (which I don't think I have the syntax right for anyway). 1 hour ago, AzraelTycka said: In your code you add +2 to sprite position and then there is an if condition where you either add +1 or substract -1 do you do this all at the same time or why is there that +2? And yeah, sorry, that was me messing around, I made the initial x +2 because I was getting him to move faster. You can disregard that. Link to comment Share on other sites More sharing options...
AzraelTycka Posted April 1, 2016 Share Posted April 1, 2016 I can't say for certain if this is the problem your are facing but there are two things i have for this. One is you set velocity to 50 and then change it if body.x is greate or equal to 300, imagine this situation: // your sprite moves over 300 in x, let's say it sits on: steve.body.x = 305 // what happens now in your update loop? // first you set it's velocity to 50 steve.body.velocity.x = 50; // this means it's still heading in the same direction as before // now if condition comes on stage if (steve.body.x >= 300) // this conditions is fulfilled therefore you change velocity by factor -1 { steve.scale.x = -1; steve.body.velocity.x *= -1; } // steve is heading backwards when phaser physics system will move it in the next iteration // so far everything perfect but in th next iteration comes the problem or more precisely two oproblems can occur. // NEXT UPDATE LOOP // steve was moved to let's say steve.body.x = 290 // steve still has velocity.x = -50; which is desirable // BUT first thing you do is set velocity.x to 50 which changes the direction again // BUT because steve.body.x is lower than 300 the condition won't be fulfilled until steve is moved by physics again //to the right and crosses the 300 point in x direction // thus your sprite will be moving back and fort in one close place. Initially I gave you just an idea how you cna achieve what you want you jsut needed to implement it so it works for you, easy way out would be to only change factor value, so you can do for example this: create: function() { steve.factor = 1; }, update: function() { steve.body.velocity.x = steve.factor * 50; if (steve.body.x >= 300) { steve.factor = -1; } if (steve.body.x <= yourMinimumValueOnXAxis) { steve.factor = 1; } } I said there could be two problems occuring depending on how you do things and how the system works the above mentioned solution resolves both problems but to at least briefly mention what the other problem could be is that if your sprite in one step moves over 300 boundary you change it's velocity back by multiplying it by -1 but what if in the next iteration the sprite doesn't move back below 300? That would mean your condition would proc again and it would change the velocity by the factor of -1 once again because it would be still over the 300 bound. This is probably not happenening if you set the velocit backwards the same but if you set lower velocity it can happen or if you have steve bouncing on a moving platform it can happen again or if you have drag it can make it happen too. That's the reason why I used two conditions instead of one which could do steve.factor *= -1; this would change the factor from 1 to -1 and from -1 to 1 too but in cases I just described the factor woudl get changed too many times you would get false positive results. Well you can use only one condition and implement it a slightly idfferent way and you will be fine for clarity and simplicity I find this way the best so far. Was this any helpful or your problem still remains? EDIT: Btw I don't think world.bounds has any right or left property, right now I used console.log(game.world.bounds); and there was nothing of that sort, it only has x, y, width, height and type. Does your phaser version has different properties? I'm not saying it's impossible ;-). kgibson 1 Link to comment Share on other sites More sharing options...
kgibson Posted April 1, 2016 Author Share Posted April 1, 2016 Ah, that works!! He now walks back and forth between two set points! For my own sanity, let me see if I'm understanding this right. I was originally trying to control the velocity with the if statement, which updated at a very fast rate because of the update loop. Meaning that, the very second he went back below x = 300, the if statement wouldn't return true and wouldn't fire again, which pushed him forward. The if statement is what pushes him backwards. I knew there had to something with the logic but I just couldn't wrap my head around it! Thank you so much! This is fantastic! NOTE: What is .factor? Is that a JavaScript thing? I'd guess it's sort of like giving a variable to an object without really doing anything to the object itself. Thank you again! Link to comment Share on other sites More sharing options...
AzraelTycka Posted April 2, 2016 Share Posted April 2, 2016 Oh yeah, .factor is just setting a property on your object, it doesn't matter if you make it a variable which is accessible in the scope of update method or a property on the object itself. It's just simpler to keep track of it when it's connected directly to the object it has an influence on. The name could be different it doesn't matter as long as you are not overriding anything else :-). JS object: var whateverName = { someProperty: someValue }; whateveName.someOtherProperty = someOtherValue; Yeah you are right, when your sprite moved on/over 300 the condition of your if statement was true thus changing the velocity backwards but when your sprite got to lower values of x than 300 the condition was not met and the only thing that was left was the velocity in the right direction which you have above the if statement. Link to comment Share on other sites More sharing options...
Recommended Posts