hustlerinc

With the code I attached? Still does it for me in incognito aswell.

If you intend to use the same code for all devices you really have to go much smaller than what you currently have. If the performance is bad on a laptop imagine what it will be on a low-end smartphone. Start small and optimize for the worst performing device (in your case low-end smartphones) and scale up, but the exact dimensions you choose depends on the game and how demanding the rendering is (e.g. how many objects are drawn? are there several layers? etc...). The only way to know really is to test it and see, but you should always aim for the smallest size possible. While the difference between 600x400 and 900x600 might not sound like much, think of it this way: In the first example you're drawing 240.000 pixels, and in the second 540.000 (with your current dimensions 3.200.000). And if you change the size of the sprites on top of the increased pixel count the exponential growth of the resources used gets out of hand very fast. Just to give you a number try 800x640 but depending on the game it's possible even that might be a little big for smartphones. If the graphics scale badly on high resolutions you could always load different sizes depending on the browser window size but that requires more work.

Unfortunately there is no magic number that will work for all scenarios. Decide on a decent aspect ratio (1.5:1 seems common) then make your game and assets as small as you can get away with and scale up as needed (instead of the other way around). What size you go with in the end depends on what type of devices you are targeting and how much cross device compatibility you need.

Sure, heres a .rar with all the files I use: https://www.dropbox.com/s/s78blrk8yj641y2/top-down.rar?dl=0 It's not much, just 100 lines of code so whatever I've done wrong should be easy to find.

Unfortunately it didn't work. I played with the cameraLerp value from 1 to 0.005 but even if it got a little better that low it wasn't really playable and either way sooner or later the camera has to adjust to the sprite speed and the chopping intensifies. I did notice that it gets better if I double the velocity (with and without camera.follow() ), but it's still noticeable and I don't want the sprite to move that fast. If I can't find a solution the easiest fix might be to just change the physics system. Would Ninja physics decrease the performance on mobile devices alot for simple physics?

In the example you're using per pixel movement (which doesn't have this problem), so it's hard to say if that will solve the issue. Could you maybe paste the relevant parts of the code here and I'll try it with my code (I tried adding physics and velocity to the fiddle but I don't know how to do it the way you set it up)?

2.1.4 dev branch (Tilemaps are broken in 2.1.3 so I can't use it). But the issue is there in 2.0.7 too (don't have any older versions lying around) when I test it. I don't think it has anything to do with the dev branch.

I'm doing a 2D top-down game with arcade physics and I've run into a problem. When the camera is following a sprite moving with body.velocity the sprite starts jerking back and forth as if it's vibrating. This doesn't happen if the camera isn't following the sprite. Also if I change sprite.body.velocity.x = 48;into sprite.x += 1; the movement is smooth even when the camera is following the sprite. I've found a few results on Google where people seem to have the same issue, but no solution. Does anyone know how to fix this?

Okay, I figured it out. The problem was in the playerMove() funcion, changing the movement from exact pixels to player.body.velocity.y -= 50;solved it. Seems like a no-brainer now that I think of it.

Hi, thanks for helping me. I'm resizing the map, just didn't want to confuse with too much code in the post. Anyway I added game.physics.startSystem(Phaser.Physics.ARCADE);to my create function right before the call to map.setCollisionBetween(); and I added player.body.setSize(16, 16);after the line enabling arcade physics on the player (also in the create function). Same issue though, I can walk through the tiles I'm supposed to collide with. If it helps here are the tutorials I've read, and I've done pretty much what they do only different ways of setting up the preload, create and update functions. http://svejkgames.com/blog/post/using-tilemaps-in-phaser-framework/http://www.gamedevacademy.org/html5-phaser-tutorial-top-down-games-with-tiled/Do you have any other ideas why it doesn't work for me?

I'm having trouble with collisions between the player sprite and a tilemap layer created with Tiled Map Editor. The layer is drawn on the screen, and if I turn on debug I see the hitboxes highlighted but there's no collisions. Here's the relevant code: var game = new Phaser.Game(480, 320, Phaser.AUTO, '', { preload: preload, create: create, update: update });function preload() { game.load.spritesheet('player', 'assets/characters.png', 16, 16); game.load.image('tiles', 'assets/tiles.png'); game.load.tilemap('map', 'assets/map.json', null, Phaser.Tilemap.TILED_JSON);}function create() { map = game.add.tilemap('map'); map.addTilesetImage('tiles', 'tiles'); bgLayer = map.createLayer('bgLayer'); collisionLayer = map.createLayer('collisionLayer'); // player should collide with anything on this layer map.setCollisionBetween(0, 200, true, 'collisionLayer'); player = game.add.sprite(0, 304, 'player'); // this sprite has to collide with collisionLayer game.physics.arcade.enable(player); player.body.collideWorldBounds = true; collisionLayer.debug = true;}function update() { game.physics.arcade.collide(player, collisionLayer); playerMove();}I'm sure I'm doing something wrong, but I don't know what.

Yeah, that's the issue I'm having. Apparently nothing to do with the camera but instead the tiles not updating. The dev branch (2.1.4) is working if anyone else runs into the same issue and it can be downloaded here: https://github.com/photonstorm/phaser/tree/dev.

I just updated from 2.0.7, and I noticed my game breaking. For some reason the camera doesn't move, even though it worked fine with the older version. If I start in any corner of the world I can move my character around the screen until it reaches the camera center, where it gets stuck in all directions. And sometimes i can move again (seems random so far) but only between the camera center, and world bounds. The camera never moves. I'm using this line of code (game is my main Phaser.Game object): game.camera.follow(player);Am I using outdated code or is this a bug?

You could turn the contents of a div into a png image then load it as you would any sprite. There are frameworks that do this for you, but I haven't used any myself. Here's one: http://html2canvas.hertzen.com/ and here you can see it in action: http://jsfiddle.net/Sq7hg/2/ Based on the question in the topic this is what you want, but I would only do this if you actually need to use it as an actual sprite in your game. If it's just UI elements I would stick with a div.

Just what I was looking for. That's the second time you solve my problem in 24 hours. Thank you.

I need help stretching my game to fit the window while keeping the aspect ratio of the game. Before using Phaser I was doing something like described in this article: http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/ and I'm looking for a similar solution now. I've seen that Phaser has a few functions I could make use of in the ScaleManager to do this but I haven't managed to do even change the size. Could someone help me understands what functions I need and how to use them correctly? For simplicity lets assume the only code is "var game = new Phaser.Game(480, 320, Phaser.AUTO, '', { preload: preload, create: create, update: update });". This gives us an aspect ratio of 1.5 and it should resize as soon as possible. Could anyone help me figure this out?

Perfect, this does the trick. Thank you.

How would I do that? I just started learning Phaser today.

You mean something like just "var coin;" right? Doesn't work. And if that was the problem my collectCoin() function wouldn't work either. Also I have to create the coins in update() as it's random. The create function is just called once right?

For some reason as soon as I try to look at a property of "coin" I get the same error. It works fine for collision between player and coin where I do this: function collectCoin (player, coin) { coin.destroy();}game.physics.arcade.overlap(player, coins, collectCoin, null, this);but when I try your code I get the same undefined error. What am I missing?

I tried your code (changed group to coins) but the script dies when the first coin reaches the border and I get "Cannot read property 'x' of undefined". I updated my first post to show how the coins are added.

Hi, I just started playing around with Phaser and I need some help. I have a group named coins, and I want to delete each coin inside if it's x position is less than 0. I add the coins like this: for (i = 0; i < coinArray.length; i++) { var coin = coins.create(game.world.width + coinArray[i].x, coinArray[i].y, 'coin'); coin.body.velocity.x -= 250;}How can I do this?

No they don't since it's just a boilerplate start screen and menu right now, no real gameplay. But yeah I'll have to include the x and y for each button, I used to store them but removed it when I added the for () loop. I like phaser the code is easier to understand than many other libraries I've looked at. My gamestate is based on that. Will dig through it indepth when I get the time. Are the clicks handled in 1 function or are there a few working togheter? So I know what to look for.

Right, I didn't even consider the z-index, even the simplest game has the menu on top. I know the concept of AABB boxes, but I don't know if I'm implementing it correctly. When I do it i do it like this: if (x <= objectX && y <= objectY && x >= objectX + object.width && y >= objectY + object.height) Being a fan of clean and flexible code this makes my eyes itch, and even moving the menu is a pain since there are if else conditions too for each button (gamestates). My code isn't variables as in my example but exact pixels, because my menu is an array, and drawn with some math like this: canvas.width - ((array.length * button.width) + (array.length * 5pxMargin)) That puts the menu top right no matter the amount of buttons, but theres no use having it that flexible if I have to hardcode the positions in the clickhandler anyway. When editing 3 buttons I need to change 20(!) numbers in the click event. Sure I could push the x and y positions into another array and this would work for the menu. But if Im gonna do that I might aswell have that array handle the entire viewport, optimizing what is drawn on screen at the same time. How do you do it on photonstorm? Just AABB as you mentioned? Box2d must have this figured out (except the transparency part), how do they do it in english?

I'm trying to figure out the simplest way to detect if something on my screen was clicked. Currently the only clickable objects are menu buttons, so it was easy to implement by if (clickX >= 5 && and so on..). Sure aslong as whats clicked is static and just the menu it works fine. But this wont do once there are more clickable objects and they start moving around. So now I need a function to detect if anything clickable was within the click, and let the clicked object know that it was clicked. For flexibility my requirements are that it works no matter what was clicked, menu button, game object, tile in map editor or whatever. It should only send the "you've been clicked" message to the object. I'm leaning towards an array to keep track of clickable objects and their x,y positions. Once a click happens on the canvas it compares the clickX and clickY to these values. Is there any better way to do it? How do game engines handle this?