"Stamping" a circle shape into a Sprite?

Got a question? Need help? Post here!

"Stamping" a circle shape into a Sprite?

Postby Schulles » Fri Dec 27, 2013 6:38 am

Hey there! This one is a bit tricky:
I am trying to "stamp" a hole into a Sprite/Bitmap. Now I guess I could simply change the pixels accordingly, but setting a few hundred pixels to alpha=0 manually is tedious work... Any idea how I could do that? Maybe with a for loops including sin- and cos- cutting out ring after ring? Or is there something like stamping in Axel? I could simply stamp a circle sprite on it!

Thanks in advance!
Schulles
Private
 
Posts: 9
Joined: Sun Jul 07, 2013 6:12 pm

Re: "Stamping" a circle shape into a Sprite?

Postby Arkeus » Fri Dec 27, 2013 6:24 pm

I think everything you'd want to do is on the BitmapData. BitmapData has a draw() that will allow you to draw another bitmap data on top of it. Or if you have a circle sprite, you can use copyPixels, and tell it to not merge the alpha (so the 0 alpha of the circle sprite would overwrite the alpha of the one you're copyPixels'ing to).

Also you can create a circle programmatically and draw it to the bitmap data, if draw allows you to overwrite the alpha. Using something like here: http://stackoverflow.com/a/5372881 - Create the circle like he did and draw it to the bitmap data.

Or you could go the route of setting them yourself. If you want to do it simpler than fancy match, you can:

* Set cx, cy to the center of the circle and radius to the radius of the circle
* Loop over the entire bitmapdata
* For each pixel at x, y, check if the distance from (x, y) to (cx, cy) is < radius, and if so, set its alpha to 0.

You can just calculate rsquared = radius * radius, and then check if (x * x + y * y) < rsquared to see if it falls within the circle.

Or if this isn't something you're doing too often, you can take advantage of the flash classes to load it as a sprite, erase the circle, grab the bitmap data back out of it, and then pass it to an AxSprite (I think): http://stackoverflow.com/q/2195961
Image
User avatar
Arkeus
Site Admin
 
Posts: 363
Joined: Mon Mar 26, 2012 12:43 am

Re: "Stamping" a circle shape into a Sprite?

Postby Schulles » Sat Dec 28, 2013 10:41 am

Or you could go the route of setting them yourself. If you want to do it simpler than fancy match, you can:

* Set cx, cy to the center of the circle and radius to the radius of the circle
* Loop over the entire bitmapdata
* For each pixel at x, y, check if the distance from (x, y) to (cx, cy) is < radius, and if so, set its alpha to 0.


THAT was exactly what I wanted to do! I am such a retard, thanks for the hint. From this point it was really simple math with our old friend Pythagoras!

Code: Select all
         var cX:int = player.x + player.width / 2;
         var cY:int = player.y + player.height / 2;
         var r:int = 22;
         var data:BitmapData = new BitmapData(Ax.viewWidth, Ax.viewHeight, true, 0xFF11140D);
         for (var x:int = 0; x < Ax.viewWidth; x++)
         {
            for (var y:int = 0; y < Ax.viewHeight; y++)
            {
               if (Math.sqrt(Math.pow(x - cX, 2) + Math.pow(y - cY, 2)) <= r)
               {
                  var d:int = Math.sqrt(Math.pow(x - cX, 2) + Math.pow(y - cY, 2));
                  if (d > r)
                     d = r;
                  var c:uint = 0x00000000 + d * 0x09000000; //I got this value by trial-and-error.
                  data.setPixel32(x, y, c);
               }
               else if((y%2 == 0 && x % 2 == 0) || (y%2 != 0 && x % 2 != 0))
                  data.setPixel(x, y, 0xFF1B211F);
            }
         }
         darkness = new AxSprite(0, 0).load(data);
         add(darkness);


This way I was able to create a checkered background with a circle around the player no matter what screensize the mobile device has:
Image
Schulles
Private
 
Posts: 9
Joined: Sun Jul 07, 2013 6:12 pm


Return to Help

Who is online

Users browsing this forum: No registered users and 3 guests

cron