Blitting & Culling

(xLite) #1

I am wanting to use FlashPunk to render my isometric grid of stuff. The stage will be a minimum of 1280x720 so I want to make sure this thing runs fast, using Starling or whatever to render sucks if you don’t have all your items in a single spritesheet (QuadBatch) which is useless for my as I like to keep the avatars and their clothes separate. So I ended up finding out about “blitting”.

Is it true that FlashPunk uses “blitting” and if so, does it also make use of “culling”? These grids I intend to make might get pretty big so it’d be great to know that only the visible stuff is being rendered. Also, am I asking a question that’s already been asked a million times and maybe you have a class specially designed for isometric grids etc? I’m not sure, I’m completely new to FlashPunk.

I don’t care about UI etc, I’m just rendering that using the normal Flash Display List. It’s the grid though that really loves to slow things down so I want to make sure it’s as fast as I can possibly make it. The layering/sorting etc just sucks at 1280x720 using normal Flash Sprite objects so I’m hoping FlashPunk has the answer for me.

Long story short, I just need something that can render a grid of isometric tiles based on their “y” value, then their “x” value and if both of them are the same a special “type” int value that I use to layer objects that occupy the same time tile (so that the tile hover is render first, then the avatar etc etc if they are on the same tile – tile_hover’s type is 0, avatar’s type is 1, I hope that makes sense). Finally if there’s a handy trick to determine whether the mouse has clicked an item on the grid then that’d be nice.

Hope I’ve explained this in enough detail, if not feel free to ask. Thank you!

(Abel Toy) #2

FlashPunk has blitting, but not culling. Also, it does not have anything specially designed for isometric grids. You’d have to code all the isometric logic by yourself, or find a specific isometric engine.

I’d recommend writing your own isometric renderer without using FlashPunk, to be honest, as you’d be able to nicely and efficiently implement it without an engine against you (while FlashPunk is designed to be very flexible, it’s also definitely not isometric-oriented).

You can use Bitmap and BitmapData for blitting. No idea about culling algorithms, or isometric algorithms either. So, yeah, definitely make your own isometric engine or use an AS3 isometric engine.

(Ultima2876) #3

If you’re talking about mobile here (which it certainly sounds like), then any blitting engine will be a no-go (at least any mildly complex scene on anything less than a $500 phone). You’ll need to find some way to get your stuff rendering efficiently using the GPU, there’s simply no way around it.

You don’t have to keep everything in one draw call using Stage3D, that’s just the ‘perfect case’ - you can get away with 20-40 or even more in some types of games (at 30fps on a low end device). I’d revisit Starling, personally - it sounds to me like you haven’t exhausted that option yet!

Also note that rendering your UI using the regular display list will be cutting your performance by about 20-30%. Don’t mix Stage3D and display list on mobile devices!

It brings up a good point though - why doesn’t FlashPunk have culling? It’s not difficult to implement - it’d probably take around an hour to get it fully working, tested, fast and robust… Heck, I’d do it myself if I knew how the git stuff worked :stuck_out_tongue:

(xLite) #4

Sorry I wasn’t talking about mobile, this is purely for desktop. And yes, I’ve exhausted all options with Starling, even going so far as to converse with its actual developer and come up with the most ideal solutions. It took months to try everything and nothing worked the way I needed it to. The only possible way to get a large grid rendered using more than 1 texture atlas is just far too slow, even though it’s running on desktop. It would only ever be feasible if everyone using it had a dedicated graphics card which unfortunately not most do, the software alternative is also documented to be slower than just regular bitmap blitting.

As for mixing the regular display list, like I said, this is for the desktop. UI only. So it doesn’t really impact much compared to the simplicity and feature-rich benefits it offers.

(xLite) #5

I don’t mind coding the isometric logic myself, I just needed to know if FlashPunk offers bitmap blitting and if it’s fast enough to render hundreds of objects per frame. As I mentioned my UI and everything else will be utilising Flash’s regular display list, including the background of the grid. It’s just the avatars and the furniture that needs to be rendered as fast as possible as it features a lot of objects, of which are constantly changing depth. I also need to know if there’s any efficient sorting mechanisms for ordering the z-index of the object etc.

(Zachary Lewis) #6

http://try.github.io.

Alternatively, they have a great desktop application for Mac and PC.

(Ultima2876) #7

Oh, I see! In that case, FlashPunk will probably be a great engine to use, and mixing the display list in won’t be a problem at all (it’s only a problem with stage3D on mobile).

Do bear in mind that if you’re targeting users who can’t run stage3d, you’re also talking very low levels of CPU power. Hundreds of objects on-screen will probably be a problem no matter what engine you use. Did you try the ‘baseline constrained’ profile in stage3d to enable hardware rendering support on earlier (intel GMA) integrated GPUs?

You’d probably be surprised these days at how many computers you can target with hardware acceleration using the ‘baseline constrained’ profile. Unless you’re targeting computers that are more than 5 or 6 years old you’ll probably be hard pressed to find anything that doesn’t support it (apart from netbooks which won’t run your target resolution anyway - most of them are 1024x600 or less).

As for sorting mechanisms, a quick sort is generally good enough for hundreds of objects. It’s super fast for ‘nearly sorted’ arrays, which is what you’ll be dealing with 99% of the time, and it’s pretty fast in many other cases. FlashPunk also uses linked lists for its entities and layer ordering which is plenty fast and efficient. Your main problem with that many objects is going to be rendering overheads by a long way.

(rostok) #8

I have two projects in progress that use 2.5 projection (semi isometric). One is here http://rostok.3e.pl/thebeast/. Basic idea is having objects properly sorted on y-axis using Entity’s layer field. The forest level in above link is quite big (8000x4000 pixels) with about 1.5k entities and over 500MB ram. I am not culling anything when rendering but check entity visibility to reduce calling AI (if it is not close to screen area update it less regularly). BTW I am not sure if implementing culling would really matter as Flash’s blitting functions will surely detect that some sprite is pasted outside of render area.

What is troublesome is the layer sorting. If some entity will change it’s depth position layer must be adjusted and everything should be sorted. It is done via quickSort() in FP. This happens only when layer is changed and note that layer has setter that removes and adds entity to render list. Therefore I change layer only for visible entities. Sorting is fast enough for me, yet scenario with lots of moving entities it would be hard to find a good substitute for this in FP (linked lists maybe?). There is one good thing in this design - you can override entity’s render method and draw some extra stuff manually and it still will be sorted.

Is FP good for isometric games? I think that this is doable, especially if the game is meant for desktop. You should try to make a simple prototype and see if it passes some stress tests like big number of entities etc.

(xLite) #9

Do you have any code samples of how to properly go about sorting my isometric grid items? Should each of my grid items be an Entity with a graphic of type Image? I’d appreciate as much help with this as you’re willing to offer.

I’ve managed to create working isometric grids in both the normal display list and Starling, so you can cut out the obvious stuff as I am competent with the theory. It’s more the FlashPunk specific techniques that I am trying to familiarise myself with that are best suited to serve my isometric needs.

(Ultima2876) #10

Each item being an Entity with an Image would be fine, or you could use entities with Graphiclists packed with Images (for your avatars if they have individual clothing items of whatever). The sorting would probably be layer = -y, right? Stuff that’s closer to the top of the scene is further back?

(rostok) #11

To sort just set the layer to -y. You should also reposition graphic so that it’s center is at the bottom of the sprite. For example:

graphic.x = -sprite.width/2;
graphic.y = -sprite.height*0.75;

I’m actually not using the isometric grid coordinates just simple x,y of the game’s world. All my entities use Images or Spritemaps. I just recalled there was some isometric demo on the old FP website in a topic regarding QuadTrees or Octrees.

(xLite) #12

Yeah avatars will have the body parts and clothing seperate to animate/change things more easily. Is there anything more than the Graphicslist API reference to go on? It doesn’t really explain how to use it over at http://useflashpunk.net/docs/

Thanks

(rostok) #13

Well, I never used Graphiclists but it seems to be only a container for other graphics. If you talk about avatars I assume there will be a lot of Spritemaps that will handle animations. So you will need some way to sync them. If the number of body parts is low (say 5) I would hardcode them as separate Spritemaps (legs, torso, head, weapon). Then I would override render method. Of course everything in some generic class that others will derive from.

BTW @zachwlewis do you know if anyone managed to extract old FP website from the webarchive?

(Ultima2876) #14

Overriding the render method and stuff like that seems a little OTT for this. Graphiclists are easy and much more efficient.

_headSpritemap = new Spritemap(GFX_BLAH, 50, 50); //whatever spritemap setup
graphic = new Graphiclist(_headSpritemap, _bodySpritemap, _legsSpritemap); //set them in a graphiclist so they're all rendered

No need to override render at all :slight_smile:

If you really don’t want to keep extra vars around for all those spritemaps, you can do something like:

_graphiclist = new Graphiclist(new Spritemap(blah, blah, blah), new Spritemap(blah, blah, blah));
(_graphiclist.children[0] as Spritemap).frame = 3; //whatever
(xLite) #15

I have no idea what any of that does and the docs are useless, any links to a website that actually explains how to use FlashPunk in the way a proper documentation should?

(Ultima2876) #16

I dunno, have you got an example of the kind of documentation you’d like to see (eg for another engine or whatever)? Most of the documentation I’ve come cross in my experience of programming looks pretty close to what’s in the ‘documentation’ section of the site :slight_smile:

(Abel Toy) #17

No, the docs are not useless. They are an API reference. What you want is some kind of tutorials / guide. There are video tutorials and text tutorials around here :slight_smile:

(rostok) #18

I strongly recommend getting some examples of other people’s code. Personally never had enough patience to go through tutorials and stuff. There’s a bunch of tutorials avaiable, Zach provided Coin Duder Saga and there is http://thedoglion.wordpress.com/ where Zelda like clone (top down) is being discussed. You can always grab an AS3 Sorcerer and decompile any SWF (not sure however of the legal angle in US for this).