I wanted pixel perfect collision for scenery but Pixelmask doesn't seem suitable

(Linck) #1

Hi. I’m making a top view game where a character needs to walk in the scenery (I’m calling scenery the place where the character walk, where there are some houses, some trees, and one area for him to walk), and it moves with point and click (I click on a point, and the character moves to that point)

But in the scenery there is an area where the character should be able to walk, and there is an area where it should not. And I’m not making a tile based game, so I wanted pixel colision for that one area where the character should not walk.

The problem is, I want to load 1920x1080 jpeg images for the scenary, as they are much lighter than png. And if I would make a pixelmask for each scenery, I would have to always load two big Images. One JPEG for the scenery itself, and other for the pixelmask, which would be like just a red area where the character should collide and the rest transparent.

Am I thinking right? I have created this post because I want better approaches to this situation. Does anyone have a good idea?

(Jacob Albano) #2

In my experience, pixel-perfect collision is almost never the answer.

Let me clarify something: You have a single 1920x1080 image that you want to use as the world graphic for your game? Or are you saying that each piece of scenery (trees, houses, etc) is an individual image at 1920x1080?

If it’s the latter, you’re seriously overestimating what Flash is able to handle.

(Zachary Lewis) #3

You should be using a region defined by points to constrain player movement. Take a look at example below.

monkey-islabd-collision.jpg1727x933 552 KB

(Linck) #4

No, It’s like games like the top view Zeldas: you are in a section of the map, and when you walk to the edge of that section, you go to another section. These sections is what I’m calling sceneries, the scenery is just the background, and it’s 1920x108. Other interactive object like a billboard that you can click on, will be on top of this scenery and won’t be 1920x1080, they would be like 100x50 or something. But I will have a big number of sceneries and I will be able to transition between them.

(Linck) #5

Oh, something like that seems much more reasonable. But I don’t have a clue hot to do. Is there any lib that can do that? Some tutorial on how to do? Something to help me that you can recommend?

(Zachary Lewis) #6

@azrafe7 has a fork of FlashPunk with polygon and circle masks that looks pretty cool.

The easiest way to keep the player inside the polygon would be to define it in your editor with points, then perform a collision check with the polygon. If the player collides with it, he is inside the map. If the player doesn’t collide with it, he is outside the map. You’ll want the player to always collide with the region.

(Linck) #7

I know that. What I don’t know is how to implement a polygon collision. And I don’t have an editor. I would be happy if you could give me something to start.

(Jacob Albano) #8

Ah okay, that makes things a lot easier! To get similar behavior to what Zach suggested, this is what I would recommend:

  • Grab Ogmo Editor if you don’t have it already. Zach has some great tutorials on how to start using it.
  • Create an entity in Ogmo with your scene as its graphic.
  • Create two new layers in Ogmo: one for entities, and one for a grid. I’ll assume the grid is 32x32.
  • Make a new level, and add your scene entity to it. Make sure the level is the same size as your image!
  • Go into the grid layer and start placing blocks wherever you don’t want your characters to be able to walk. Basically painting over the trees and such.

I like to use Ogmo to place all my entities, but you don’t have to do that if you don’t want to. Right now we’re essentially just using it to design collision areas.

Now to load the grid into your world.

Embed the Ogmo level into your project, then create an XML object from it:


var level:XML = FP.getXML(LEVEL_EMBED);
var grid:Grid = new Grid(1920, 1080, 32, 32);
grid.loadFromString(String(level.Grid), "", "\n");

You can now add the grid to an entity, set its collision type, and add it to the world for things to bump into. :smile:

(Linck) #9

Thanks, I will take a look at this things. But you talked about creating a grid, an adding blocks… My game is not tile based. I wanted some way to do Polygon Collision like I saw on the image zachwlewis showed. So I don’t know if this tool Ogmo Editor only deals with tiles.

(Jacob Albano) #10

You don’t have to have tile-based graphics to use tile-based collision. Flashpunk doesn’t have polygon collision built in, so I described the next-best thing.

(Zachary Lewis) #11

Ogmo will allow you to place paths as well. You can use paths to define your region. Alternatively, your image editor should allow you to view the location of a pixel.

You can use this to create your own point list without the use of an external editor.

(azrafe7) #12

I agree with what @jacobalbano and @zachwlewis said. There are other approaches that would obviously give better performance than using a Pixelmask. Also 1920x1080 is quite a big area to handle memory-wise (it’s almost 8 Mb: 1920x1080x4 bytes), and it means you’ll have at least 4 times that amount of mem used at any given time (1 backdrop, 1 pixelmask and 2 screen buffers ~= 24Mb without even accounting for other game objects).

Using a Grid for your collisions (tuning down the tile size) as @jacobalbano suggested should be a good compromise. You won’t have pixel perfect collision, but neither did Zelda: it actually was tile-based!

About polygons and @zachwlewis’s suggestion: you can use something like PhysicsEditor / Ogmo path feature / Tiled polygon objects to trace the regions with the new Polygon mask class but… you’ll need another step if you go that route… it only supports convex polygons, so you’ll need a way to decompose any concave polygon you wish to use in a set of convex ones (a triangulation will do, though not optimal, but there are a bunch of algorithms that serve this purpose - I have one in Haxe over here).

Another solution might be to implement point-line/line-line collision yourself (plenty of resources on internet) and use that instead, or integrate one of the popular Physics engine around (Nape, Box2D, etc.) - probably overkill.

That said, if you intend to target desktops and/or you’re ok with the performance you get in your tests (rendering might be a bottleneck), you could actually resort to using Pixelmask (feasible, but I really don’t feel like recommending it):

[zipped code | online swf | offline swf (650.7 KB)]