Flash experiments outlet
RSS icon Email icon Home icon

  • Papervision with collision detection

    Posted on April 8th, 2009 admin 12 comments

    This movie requires Flash Player 10

    This is my version of Papervision collision detection. The project actually started out as a 2D isometric engine, in the end I decided to map the 2D grid to a 3D environment.
    The collision detection is also handled by the isometric engine, left-click on the upper-left framerate box to show or hide the 2D grid.

    Use the numpad arrows or W-S-A-D to move around and click-drag the mouse to look around.
    It might take some time to load all the textures, so be patient, I didn’t implement a loader!

    The source can be downloaded here.

    As mentioned above, this is NOT a full fledged fps engine. My initial idea was to have a pseudo 2D-3D world, where the camera would be positioned above the player (as in Diablo II for example).
    This means that collision detection is only applied on an XY-axis and not the expected XYZ-axis. (eg a player can jump through a ceiling, but cannot traverse a solid wall).

    The world is actually tile-based with performance in mind. Every keypress that moves the player will calculate if the player is allowed to move in a certain direction, if the test fails, a mini path findinding script will return the best non-colliding position closest to the requested position.

    The final version would ideally combine papervision 3D objects with static 2D objects and feature a diablo-like top down camera position. Unfortunately, I almost never finish projects I start in my spare time :-/
    I do still plan to create a very basic world editor to render a demo which is a lil’ more interesting to explore.

    Below is an excerpt of the main setup script :

    1. // The container used to render the 3D in
    2. _appContainer = appContainer;
    3. // The isometric display layer
    4. _canvas2D = new UIComponent();
    5. // The papervision display layer
    6. _canvas3D = new Basic3DSetup(500, 400);
    7. _canvas3D.addEventListener(Event.INIT, onEngine3DInit);
    8. // Create a new world grid, the grid is infinite in size,
    9. // the 2 constructor parameters define the width and height of a single grid tile
    10. // the smaller the size, the better the collision detection, yet the slower the algorithm
    11. _grid = new world.grid.Grid();
    12. _grid.create(10, 10);
    13. // Initialize the player pawn(s) container
    14. _pawnList = new Vector.<Pawn>;
    15. // Load and parse a compatible XML file to a papervision 3D world
    16. _f3dParser = new F3DParser(_grid.tileWidth, _grid.tileHeight);
    17. _f3dParser.addEventListener(F3DParserEvent.PARSER_COMPLETE, onParserComplete);
    18. _f3dParser.loadAndParse("http://www.frankula.com/lab/swf/museum.xml");
    19. // Initialize the player
    20. // passing PawnType.TERRAIN_BLOCK tells the engine that this pawn is solid and
    21. // thus collides with other solid objects.
    22. _playerPawn = new Pawn(PawnType.TERRAIN_BLOCK);
    23. _playerPawn.playerControlled = true;
    24. // Set the display object on which to render on (2D)
    25. _playerPawn.canvas = _canvas2D;
    26. _playerPawn.grid = _grid;
    27. // Define the collision area of this Pawn, in this case
    28. // the player is represented as a 50×50 px circle on the grid.
    29. // the actual player model may be smaller or larger, the cirlce is only
    30. // used for collision detection
    31. _playerPawn.shapeClass = Circle;
    32. _playerPawn.setSize(50, 50);
    33. _playerPawn.updateShape();
    34. _grid.updateTilesForPawn(_playerPawn);
    35. _playerPawn.draw();
    36. _pawnList.push(_playerPawn);
    37. _canvas2D.visible = false;
    38. _canvas2D.x = 300;
    39. _canvas2D.y = 100;
    40. _canvas2D.scaleX = _canvas2D.scaleY = .5;
    41. _fpsTicker = new UITextField();
    42. _fpsTicker.background = true;
    43. _fpsTicker.backgroundColor = 0xffffff;
    44. _fpsTicker.autoSize = TextFieldAutoSize.LEFT;
    45. _fpsTicker.text = "LOADING…";
    46. _canvas3D.mouseEnabled = false;
    47. _canvas2D.mouseEnabled = false;
    48. //_fpsTicker.mouseEnabled = _fpsTicker.mouseWheelEnabled = false;
    49. _appContainer.addChild(_canvas3D);
    50. _appContainer.addChild(_canvas2D);
    51. _appContainer.addChild(_fpsTicker);
    52. _framesRendered = 0;
    53. _fpsTimer = new Timer(1000);
    54. _fpsTimer.addEventListener(TimerEvent.TIMER, showFPS);
    55. _fpsTimer.start();
    56. _fpsTicker.addEventListener(MouseEvent.CLICK, onToggle2D);
    • Share/Save/Bookmark
    AS3, Papervision
     

    12 responses to “Papervision with collision detection” RSS icon

    • hey nice collision detection
      i was making exactly the same thing and googled ,found ur post
      If u can provide the source code it will be very helpful
      thnx
      nikhil

    • FrankPepermans April 15th, 2009 at 08:49

      Hi nikhil, will add the source tonight. But do keep in mind that this thing started out as a 2D-isometric test, the 3D you see here is still based on the underlying 2D, this means that collision detection is only availabe on an XY-axis instead of the expected XYZ-axis. (eg you can run forward and bump into something, but if you’d jump up, you could jump through the ceiling).

      If you’re looking for a proper 3D solution, you might try here

    • Hey Frank! Would you consider adding some alternative controls for people that don’t have a numeric keypad (such as Macbook owners :S)?

      Never noticed it really doesn’t have one, not even via Fn keys or something similar…

      Cheers,
      EP.

    • FrankPepermans April 15th, 2009 at 23:33

      that’s odd, are you sure you don’t have the plain arrow keys? I called them the numpad arrows since they normally sit below the numpad, laptops usually have those arrows but not the numeric keys.

      Anyway I’ll add the usual w-s-a-d asap, plus the source of course.

    • Everything dynamic and very positively! :)
      Eremeeff

    • Greatings, I have already seen it somethere…
      Rufor

    • nice! i’m gonna make my own blog

    • da best. Keep it going! Thank you

    • Thank you!
      Nice work! =^_^=
      But it still not finished solution.
      I was looking for simple, and more important - FAST collision detection solution that will be used in simple app, but very nice app - as you mentioned - just for exploration of the virtual world. Can i use your code to finish the started and to make full-fledged “simple colision detection exclusively for Papervision3D(imho this is the most fast 3D rendering solution)”?
      It goes without saying that i will credit you.

    • FrankPepermans April 1st, 2010 at 22:02

      I will place the code online tomorrow, accompanied with a small blogpost. Mind though that I haven’t looked at it in over a year, and it will be as is :)
      But feel free to use it for whetever need.

    • Thank you very much!
      =^_^=

    • FrankPepermans April 3rd, 2010 at 01:20

      Well I was about to update this post, then noticed the source was available all along.

      You can get it from http://www.frankula.com/lab/swf/iso3D.zip

      If you need any help, just shoot me a message.


    Leave a reply

What I'm Doing...

Posting tweet...

Powered by Twitter Tools.

Tags

Powered by WordPress
Designed by My Mobiles