Draw Custom Polygons

(Adam Edney) #1

Is there a function to fill a custom polygon? e.g

polygon.addcorner.(0,0); polygon.addcorner.(50,0); polygon.addcorner.(60,10); polygon.addcorner.(0,10);

I know Flash punk has draw.rectPlus but I cannot see anything for polygons.

Any recommendation?

(Mike Evmm) #2

You could create a polygon bitmapdata and then pass it to a FlashPunk image.

(Adam Edney) #3

Thanks for the reply,

I was looking at your post Bitmapdata relative to entity? because I never used a bitmap before, But I can’t seem to render it here is my code…

		water_sprite = new Sprite();
		water_sprite.graphics.beginFill(0x13CAD9, 1);
		water_sprite.graphics.moveTo(x, y);
		water_sprite.graphics.lineTo(x + 10, y );
		water_sprite.graphics.lineTo(x +10,  y+10);
		water_sprite.graphics.lineTo(x, y+10);
		water_sprite.graphics.endFill();

		var bmd1:BitmapData = new BitmapData(50, 50,true);
		bmd1.draw(water_sprite);
		addGraphic(new Image(bmd1));

} All I can see is the white bitmap box and if I change that line to " = new BitmapData(50, 50,true,0x16FA38);" it doesn’t render anything?

Any idea why

(Martí Angelats i Ribera) #4

Try rendering the sprite in another project. Does it work? If no first get it there.

I’ve never worked with that but i feel like you forgot a line from (x, y+10) to (x, y). My guess is that the polygon is not closed so it can’t be filled (i don’t know if it colse it automatically).

Another thing is that using Stamp is better if you want the graphic as if and use no control.

addGrphic(new Stamp(bmd1));
(Mike Evmm) #5

No problem :smile:
you’re right to use new BitmapData(50, 50,true,0x16FA38);. To get a truly transparent bitmapdata, you need to init it like this new BitmapData(width,height,true,0); (this is stated in the flash docs, although kinda cryptically).
Re. why it’s not showing anything, I had that problem myself many times. When you’re creating a bitmapdata, you’re creating the image passed to the FlashPunk entity. This image will move with the entity. However, when you’re creating the image (in your case, with a size of 50x50), the x and y’s you shoulf use should be relative to the corner of the image (so x goes from 0 to 50, same for y). Not my best english, but I hope I got my point across.

TL; DR 

water_sprite.graphics.moveTo(x, y);
water_sprite.graphics.lineTo(x + 10, y );
water_sprite.graphics.lineTo(x +10,  y+10);
water_sprite.graphics.lineTo(x, y+10);

should be

water_sprite.graphics.moveTo(0,0);
water_sprite.graphics.lineTo(10, 0 );
water_sprite.graphics.lineTo(10,  10);
water_sprite.graphics.lineTo(0, 10);
(Mike Evmm) #6

It is SO HARD to post on mobile

(Adam Edney) #7

Thanks you :slight_smile:

Very helpful got it rendering now, also I accidentally deleted super.render(); from my override render ,

I one last question, is it possible to get the water_sprite back from the bitmapdata and then edit it e.g. make it longer change colour ect? then put it back in without removing the old bitmapdata then creating a new one creating, I’m using is the render my water physics.

I can’t find anything in…

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html

But most likely I’m miss understanding something.

ideally like this e.g…

  //      frame 1
                water_sprite = new Sprite();
		water_sprite.graphics.beginFill(0x13CAD9, 1);
		water_sprite.graphics.moveTo(0, 0);
		water_sprite.graphics.lineTo(10, 0 );
		water_sprite.graphics.lineTo(10,  10);
		water_sprite.graphics.lineTo(0, 10);
		water_sprite.graphics.endFill();

		bit_map_data = new BitmapData(50, 50,true,0);
		bit_map_data.draw(water_sprite);
		addGraphic(new Image(bit_map_data));

                //frame 2
                 water_sprite.clear();
                 water_sprite.graphics.beginFill(0x000000, 1);
		water_sprite.graphics.moveTo(0, 0);
		water_sprite.graphics.lineTo(20, 0 );
		water_sprite.graphics.lineTo(20,  20);
		water_sprite.graphics.lineTo(0, 20);
		water_sprite.graphics.endFill();
                bit_map_data.draw(water_sprite);

If I added the bitmap to a child this works but I cannot control the layer of which it renders.

(Martí Angelats i Ribera) #8

If you want to control the layer you have to save the entity that you make with addGraphic.

var e:Entity = addGraphic(new Image(bitmapData));
e.layer = 10; //set the layer you want

//and you can modify the Image properties
(e.graphic as Image).angle = 50; //in this case rotate 50 degrees.

but remember that you don’t want fancy thing like custom alpha or rotation, is better to use Stamp (is smaller in size, so less RAM used). It works exactly the same:

var e:Entity = addGraphic(new Stamp(bitmapData));
e.layer = 10; //the layer that you want
(Adam Edney) #9

Hi Marti again,

Sorry, what I was referring to was FP.stage.addChild(new sprite) which because its a new child you cannot control the layer I believe.

// below is what i was doing and it worked but I couldn’t control the layer so this is why im looking at bitmaps e.g.

                water_sprite = new Sprite();
		water_sprite.graphics.beginFill(0x13CAD9, 1);
		water_sprite.graphics.moveTo(0, 0);
		water_sprite.graphics.lineTo(10, 0 );
		water_sprite.graphics.lineTo(10,  10);
		water_sprite.graphics.lineTo(0, 10);
		water_sprite.graphics.endFill();

		//bit_map_data = new BitmapData(50, 50,true,0);
		//bit_map_data.draw(water_sprite);
		//addGraphic(new Image(bit_map_data));
		FP.stage.addChild(water_sprite);
                
                  // frame 2

                        water_sprite.graphics.clear();
			water_sprite.graphics.beginFill(0x13CAD9, 1);
			water_sprite.graphics.moveTo(x, (sim_world.water_manager.water_nodes[index - 1].waterheight-10) - abs_1);
			water_sprite.graphics.lineTo(x + 10, (sim_world.water_manager.water_nodes[index + 1].waterheight-10) - abs_2);
			water_sprite.graphics.lineTo(x +10,  600);
			water_sprite.graphics.lineTo(x, 600);
			water_sprite.graphics.endFill();
(Martí Angelats i Ribera) #10

Oh ok; I missundertood.

There is addChildAt wich allows you to choose the index (moving the others).

in your case (there is only the FP) the code would be

FP.stage.addChildAt(water_sprite, 1); //flashpunk is 0 wich is below
(Adam Edney) #11

Yh I looked at that but you can only have it on top of everything or behind everything which is not really useful :slight_smile:

(Martí Angelats i Ribera) #12

Using it you actually choose the index.

(Adam Edney) #13

If I use a stamp then change the colour e.g. make a blue square green it will render the Green square but it will still render the old blue square. Can i go into the object graphic list and then remove it ?

(Mike Evmm) #14

Indeed you can’t. Usually i just create one white bitmap, pass it to an image, store a reference to that image, then use it as graphic. Then I apply scale/color(tint) to achieve any effect I want (which is usually easier than changing a bitmap). Plus, although I’m no mem management expert, I think this is faster.

(Adam Edney) #15

Can I remove what its rending from the bitmapdata without using .dispose()? because if I use dispose flashpunk still trying to render it then crashes

(Mike Evmm) #16

Flooding the bmd with 0 might work, i.e., bmd.fillRect(bmd.rect, 0);

(Adam Edney) #17

That works, but i need to do “water_sprite.graphic.clear()” first because water_sprite still contain the old image as well as well new one.

Thanks you @miguelmurca and @Copying :smile: you have been great :smile:

(Martí Angelats i Ribera) #19

I’ll be here if you need anything else :wink: (and probably he will as well.)