Author Topic: Pixel-Perfect Ray Casting Code  (Read 4836 times)

KWarp

  • Active Member
  • ***
  • Posts: 105
  • Karma: +0/-0
  • Game Programmer
    • View Profile
    • kwarp.com
Pixel-Perfect Ray Casting Code
« on: Mon, Jan 2, 2012 »
Hey flixel peoples,

I'm giving away some excellent ray casting code that I wrote for my Bullet Time Ninja game.

http://bullettimeninja.blogspot.com/2012/01/lasers-and-ray-casting.html
To understand recursion, you must first understand recursion.

John Hutchinson (Johntron247)

  • Commodore 256
  • Contributor
  • ****
  • Posts: 392
  • Karma: +1/-0
  • I can has lazerz?
    • View Profile
    • Level X Games
Re: Pixel-Perfect Ray Casting Code
« Reply #1 on: Mon, Jan 2, 2012 »
Nice!  The code formatting seems to be mucked up at the moment but this is a very interesting blog post. :D

Esti

  • Active Member
  • ***
  • Posts: 104
  • Karma: +0/-0
    • View Profile
Re: Pixel-Perfect Ray Casting Code
« Reply #2 on: Thu, Jan 19, 2012 »
That's a great piece of code!.

I need some help, I've been trying to implement laser beams in my game but I don't understand how do you implement this;

Quote
1   graphics.lineStyle(1, 0xFF0000, 0.75); // thickness, color, alpha
2   graphics.moveTo(x1, y1);
3   graphics.lineTo(x2, y2);

I am using the basic project template for platform games made by photonStorm. I have a Sprite that is going to shoot some lasers and I would like to implement the logic inside the update method of it. What do I need to import, can you throw me some light? :)

Thank you very much!

Check it out on Mochi!

Berzee

  • Member
  • **
  • Posts: 69
  • Karma: +0/-0
    • View Profile
Re: Pixel-Perfect Ray Casting Code
« Reply #3 on: Mon, Jan 30, 2012 »
Grand and useful! One thing, I made this minor tweak (just in case no one else has pointed it out yet)...I changed each occurrence of

getTile(cx, cy) > 0

to

getTile(cx, cy) >= collideIndex

so it'll work even if you have to change the collide index.
Looks perfect otherwise =)

What I'm quite curious about is, now that you've cast the ray, how you went about detecting that it overlapped the player. I've seen a few suggested ways to do it, but none of them particularly simple. =)

KWarp

  • Active Member
  • ***
  • Posts: 105
  • Karma: +0/-0
  • Game Programmer
    • View Profile
    • kwarp.com
Re: Pixel-Perfect Ray Casting Code
« Reply #4 on: Tue, Jan 31, 2012 »
That's a great piece of code!.

I need some help, I've been trying to implement laser beams in my game but I don't understand how do you implement this;

I am using the basic project template for platform games made by photonStorm. I have a Sprite that is going to shoot some lasers and I would like to implement the logic inside the update method of it. What do I need to import, can you throw me some light? :)

Thank you very much!

"graphics" is a property of Flash Shapes, Sprites, and MovieClips. Flixel doesn't have an easy way to use this. Usually I make a Shape object, draw some graphics, then call FlxG.camera.buffer.draw(myShape); Keep in mind that this does not take scrollfactor into account.
To understand recursion, you must first understand recursion.

wg/funstorm

  • Global Moderator
  • Key Contributor
  • *****
  • Posts: 596
  • Karma: +0/-0
    • View Profile
    • Funstorm
Re: Pixel-Perfect Ray Casting Code
« Reply #5 on: Tue, Jan 31, 2012 »
Flixel has a couple helpers built in to make drawing easier.

- FlxG.flashGfx is a global graphics object you can use so you don't have to create new instances
- FlxSprite.pixels is an FlxSprite's bitmap data
- So if you get a sprite's pixels, then draw onto it with the help of flashGfx you can then set pixels to your updated image

There's a couple functions in FlxSprite that draw onto the pixels you can look at for reference eg

Code: [Select]
public function drawLine(StartX:Number,StartY:Number,EndX:Number,EndY:Number,Color:uint,Thickness:uint=1):void
{
//Draw line
var gfx:Graphics = FlxG.flashGfx;
gfx.clear();
gfx.moveTo(StartX,StartY);
var alphaComponent:Number = Number((Color >> 24) & 0xFF) / 255;
if(alphaComponent <= 0)
alphaComponent = 1;
gfx.lineStyle(Thickness,Color,alphaComponent);
gfx.lineTo(EndX,EndY);

//Cache line to bitmap
_pixels.draw(FlxG.flashGfxSprite);
dirty = true;
}

I use this method instead of drawing directly to the camera buffer so that my drawings appear on a particular sprite which makes sorting easier because if you draw onto the camera it will appear on top of anything that has been rendered but below anything that hasn't.

test84

  • Key Contributor
  • *****
  • Posts: 1328
  • Karma: +0/-0
  • ت
    • View Profile
    • My personal site.
Re: Pixel-Perfect Ray Casting Code
« Reply #6 on: Mon, Feb 27, 2012 »
What is the simple way to draw a line between two points? FlxSprite's drawLine drawn on it's own apparently, right?

I just want to draw a line between two lines.
blog, twitter, Check out my award winning game, Rot Gut:

claudiovc

  • Member
  • **
  • Posts: 13
  • Karma: +0/-0
    • View Profile
Re: Pixel-Perfect Ray Casting Code
« Reply #7 on: Wed, Mar 14, 2012 »
Sorry I'm late, but if you just want to draw a line between two points there's several known algorithms in computer graphics for you =] . There's Bresenham's ( http://en.wikipedia.org/wiki/Bresenham's_line_algorithm ) or, if you want anti-aliasing, Wu's ( http://en.wikipedia.org/wiki/Xiaolin_Wu%27s_line_algorithm ). I think it'll be asy to implement them from the Wikipedia's pseudocode. =D