What's the best way to start with a scrolling game

[kiwi]

Hi all,

 

I'm developing an horizontal scrolling game.  At the moment I have a 1920x1080 png which I load as tileSprite and in the update function change the x axis. I'm seeing some lags at the very beginning and then some times here and there it lags(chrome on desktop). In the future I'll want to have a random background sequence created at runtime but for now I'm doing some test with a single image. I was wondering what's the best way to proceed. Should I keep using the titleSprite? Should I create a long image and move the camera? I wanted to keep the 1920x1080 ratio to have a decent quality on latest ipad and 4k monitor.

 

Thanks for your support

[jmp909]

the lag seems to be setup time from what I can tell.... pretty much everything i've looked at lags at the beginning. I would try delay your game somehow while the scene is created 

 

worth noting if you are targetting WebGL rather than Canvas, then the image for a TileSprite should be square, and factor of 2

When running under Canvas a TileSprite can use any texture size without issue. When running under WebGL the texture should ideally be a power of two in size (i.e. 4, 8, 16, 32, 64, 128, 256, 512, etch pixels width by height). If the texture isn't a power of two it will be rendered to a blank canvas that is the correct size, which means you may have 'blank' areas appearing to the right and bottom of your frame. To avoid this ensure your textures are perfect powers of two.

http://phaser.io/docs/2.4.3/Phaser.TileSprite.html

 

are you just intending to just have one 1920x1080 background image scrolling and wrapping? to me it sounds like a lot to shift about.. I'm assuming GPU's work better with smaller chunks but you'll have to ask one of the experts

[jmp909]

having said that... this uses a 1920x1200 image http://phaser.io/examples/v2/world/world-wrap .. although it's not displaying all of it at once

[kiwi]

thx for your replies. The example you linked unfortunately has a canvas 800x600. I want to have a full screen game view. The issue is that the lags it's not just at the beginning but also during the game, few frames drop. I was thinking to create a sprite group, add a random sprite, make it scroll and once it's out the camera view destroy it. Another possibility is using the tiled mp editor

[jmp909]

Personally I think you're going to struggle to make an HD full screen game in an html5 game engine. I'm new here though, it would be good to find some performance specs for devices (suggested screen size, Max sprites etc)

What is your target audience? 4K userbase is probably going to be low still anyway.

Have you seen any examples on the web similar to what you're trying to do?

J

[MichaelD]

That is a big image to move all at once, the render is going to kill the browser, after all you have to remember that this is an app running in another app (the browser) which has limitations of its own. That said, you should figure out if you can split your image into smaller images, like the ground and the background, these don't need to be linked and can be animated/rendered individually.

 

If your ground is always the same and just repeating, you can search in the TileMap Layer class, there are ways to make it run infinetely automatically.

 

All in all I would suggest brainstorming some ideas on how to reduce the render and what part of the game can be split/chopped/removed/reworked.

[kiwi]

Personally I think you're going to struggle to make an HD full screen game in an html5 game engine. I'm new here though, it would be good to find some performance specs for devices (suggested screen size, Max sprites etc)

What is your target audience? 4K userbase is probably going to be low still anyway.

Have you seen any examples on the web similar to what you're trying to do?

J

 

 

That is a big image to move all at once, the render is going to kill the browser, after all you have to remember that this is an app running in another app (the browser) which has limitations of its own. That said, you should figure out if you can split your image into smaller images, like the ground and the background, these don't need to be linked and can be animated/rendered individually.

 

If your ground is always the same and just repeating, you can search in the TileMap Layer class, there are ways to make it run infinetely automatically.

 

All in all I would suggest brainstorming some ideas on how to reduce the render and what part of the game can be split/chopped/removed/reworked.

 

thanks a lot for your suggestions. I'm already trying to change few dynamics. At the moment I have a the sky as a tileSprite with autoScroll enabled (is this the same as I update the position using  .tilePosition.x?  ) What's the difference between tileMap and tileSprite?

 

For the foreground (houses) I'm creating a group at the beginning, add as many houses I need to fill the screen and than move them singularly at the same speed giving the illusion to be one after the other. Once out the screen I can replace with a different sprite and reset the x position. But again, the problem seems the canvas size not the image size. Smaller canvas size reduce the area rendered and thus better performance (so I understand)

[jmp909]

this is of course a good example. from the Pixi devs

http://www.goodboydigital.com/runpixierun/

 

and the source code isn't obfuscated. It is Pixi though not Phaser.

 

you should note they do various detects and stress tests to check the capabilities of the system and change a few things accordingly.. so what you see on the desktop there isn't likely to be the same as what you'll see on a tablet from what I can tell