How to create anime style beams/rays


(Kasene Clark) #1

Im trying to figure out how to create anime style beams and projectiles often seen in Japanese bullet hell shooters .

Heres an example of what im talking about.

Image of bullet hell shooter dondonpachi

I know this might just be the result of excellent anime artists drawing awesome looking sprites. But i feel like this type of look could be somewhat replicated with code. Does anyone have any ideas?


(Bora Kasap) #2

yeah, not so hard.

think this is the beam you want to add into your game

“OOOOOOOOOOOOD”

then you need 2 .png files 1st png: “O” 2nd png “D”

and now you can combine this two png files by your beam length when your game is running. You can combine them by using Canvas class of Flashpunk

also you assign it to graphic object to change it’s rotation after the combination


(Darrin) #3

I’m curious as well. It looks like that beam has a few parts.

a) the center is a long beam. graphic 70x800.

b) the explosion at the end. Spritemap 120x100.

c) the explosion at the beginning Sprite map 120x100.

d) All the little sprites on the side. Spritemap 60x20

a, b, c can be combined via a GraphicList on one sprite. The end and beginning explosion can be set as a sprite map.

d can be added separately and individually.

What I don’t get is drawing the center beam. Lets say that beam graphic is 800 pixels long and 70 wide. How do I clip it so that it draws to the first thing it hits but not past the source? How would you use hit box?

So in my art sample.

  1. is the full laser. 800 wide in the pic

  2. would be the laser traveling nearly instantly from the tip of player toward the left and missing.

  3. this would be the laser clipped and hit ship.

So how would you even check the hit box making sure you are going from left to right? and how would you clip it?

Thanks


(Bora Kasap) #4

Ok, lets check collideLine() function which is in the orginal world class.

collideLine(type:String, fromX:int, fromY:int, toX:int, toY:int, precision:uint = 1, p:Point = null):Entity

you can handle it, you can use “p:Point = null” stuff, i did this in my game.

p:Point (default = null) — If non-null, will have its x and y values set to the point of collision.

so you can create a hitPoint variable within your beam class

private var hitPoint:Point = new Point();

then you can use this variable in the parameters section of collideLine() function.

So, now, your point re-tested & re-valued in each frame you used collideLine function.


(Kasene Clark) #5

I feel like you could do some fancy particle stuff to achieve a sort of “liquid energy beam” effect


(Zachary Lewis) #6

I feel like TiledImage would be a prime candidate for this type of behavior. Without having to create a custom Graphic, you can just create a new TiledImage whenever the width of the laser changes.