Jump to content

Vertical shooter approach


Recommended Posts

Hello again,


I'm starting to build the core of the vertical shooter.


For testing purposes I only just added a tilesprite to the world for it's entire width and height.

Then, in update, I make it scroll.


I then hit the first problem as it is jerky as hell and inconsistent too.

The only browser where it performs well - it's really smooth - is IE (oddly).


So I was left wondering what is the best approach, should I:

  • have a giant area and pan the camera
  • have a giant area and scroll everything down.
  • have a repeatable background scrolling and throw background sprites at it
  • have both
  • other ideas?

Thanks for any input

Link to comment
Share on other sites



 look at this article: http://codeincomplete.com/posts/2014/5/3/javascript_delta/  It is not Phaser, just Javascript, but It will give you lot of interesting ideas for shooter generally.


 It is not easy to help you as you do not say what is your current solution - tilemaps? how many? If you use tilemaps then only visible part (+ some border - I think 2 tiles) is rendered. Then solutions: move camera or move tilemap seems to be equaly costly to me.

Link to comment
Share on other sites

Hey Tom,

thanks for answering.

At the moment I'm using tilemaps but it's quite jerky in chrome.

I'd prefer to create the levels from an editor but I realise that I need the "length" of them to be dynamic based on some user choices (location basically).

Also I cannot put in a nice variety of elements with tilemaps unless I create huge tiles.

Another thing that puzzles me is how do I throw random parallax background elements (for example clouds) when using tilemaps? Seems much easier with fixed tiles.

I'll try and upload an example soon enough.

Link to comment
Share on other sites

The game I'm working on is 320x240 and can parallax seven layers with no problem. I recently scaled all the assets up as an experiment (4x the images and the tilemap as a build process) and it got WAY too janky to be playable. I had to drop it down to two or three layers and, even then, the latest Chrome on a recent MacBook Pro was straining. I did no optimization at that point since I didn't like the results from an art perspective, so who knows what the problem was.


If you're looking for little details I'd use sprites directly. e.g. clouds, asteroids, birds, whatever. I bet you could use the same trick for big pieces of the background with very large sprites that scroll by momentarily instead of being repeating tile sprites.


My current game uses sprites for clouds to good effect.

Link to comment
Share on other sites

Feeling grumpy? I kid, I kid... ( ;


I understand your frustration and I don't mean to imply there's nothing wrong – parallax scrolling a largely static background in Phaser using a tilemap is the wrong solution to the problem, though. Each tile in the tilemap is a separate sprite that is physics-ized, transformed, and rendered every single frame. Stringing a few layers of them on top of each other is a punishing amount of data to send over the graphics pipeline every single frame without some optimization... which tilemaps kinda prevent you from doing. Tilesprites are the way to go here, I think.

Link to comment
Share on other sites

@drhayes: not sure this is right. I think, that tilemap has tile layer and all the tiles are rendered into it making it one big single picture (which is kind of optimization). Only visible part (with some border - I think 2 tiles - is rendered). It is redrawn when map scrolls. Problem with it is when you are rendering layer, that is mostly transparent (like few clouds in the sky). Then there is lot of transparent pixels in such layer which is eating your fillrate. It is better then use separate sprites for clouds. But for non-transparent backgroud the tilemap should be definitely better.

Link to comment
Share on other sites

@TomAtom: Hey, you're right! Thanks for the info! I think I got that idea from the parser where it pushes instances of Tile into an array... *totally* though those were subclasses of Sprite and were the things being drawn! ( =


Unfortunately, I'm not sure that's good news 'cuz then I *really* don't know where those performance eaters are coming from w/r/t scrolling tilemaps.


Looks like there's lots of browser-specific code in the optimizations around figuring out what to draw on a scroll.

Link to comment
Share on other sites

So I am at a point where I need to make my mind up about how to go about this.

Every example of shooters does the scrolling via tilesprite, but I'm unsure about this as it prevents adding customization to the map.


So my idea would be quite straightforward:


create multiple gigantic pngs with different layers, position them one on top of the other, then move them downwards.


How would that affect performance?


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...