XUtils

Ranger

A game engine centered around HTML5 Canvas and a scene graph.

Dart
https://github.com/wdevore/Ranger-Dart

###About Ranger-Dart (Ranger for short) is a game engine written in Dart and slightly modeled after an older version of Cocos2d-js 1.x. Ranger is actually two projects: this project and

###Screen shots Ranger in action via Sack: ScreenShots and videos

###Features

  • Scene graph (heirarchical spatial organization) including space mappings.
  • Animations using Universal Tween Engine Pub by Xavier Guzman.
  • Message system using EventBus Pub by Marco Jakob.
  • Pooling ported from Dartemis: Entity System Framework Pub by Dennis Kaselow.
  • Sprites and sprite sheets. (PNG, SVG etc…)
  • Particle systems.
  • Html5 Canvas rendering.
  • Design resolution that is independent of device resolution.
  • Scene transitions.
  • Optional Updates-per-second for slower devices.
  • Examples, starter templates and Unit tests.

Note: if you are interested in an Entity System approach to game development consider Dartemis. It is based off the concept of Data Oriented Design (DOD). Ranger has the ability to add “systems” and feed timing to them so you can effectively code in a hybrid design where some of your code is hierarchical through a scene graph and other portions are more “linear-ish” through DOD. For further reference Artemis.

###Getting started Where to start? Easy, just follow these steps:

  1. Download the Dart SDK and install it. If you are on a Mac then it is as easy as installing the .dmg.
  2. Go to GitHub and download Ranger-Sack. To do that choose to either Clone in Desktop or Download ZIP. If choose the Zip option then uncompress it to a location of your choosing. You should now have a folder called “Ranger-Sack”.
  3. Launch the Dart Editor that came with the SDK.
  4. In the editor navigate to the file menu and choose Open Existing Folder.
    • Navigate to the location of either the uncompressed Zip or
    • The local Git repository that you cloned to your “desktop”.
  5. With the project open, run one of the Templates called “level0”
    • Navigate into the “level0” template folder located under:
web/
    applications/
        templates/
            level0
  1. Right-click on level0.html and choose Run in Dartium.

Once Dartium (which comes with the SDK) has launched it will automatically navigate to “http://localhost:8080/applications/templates/level0/level0.html” and start running. First you will see a splash scene for 3 seconds and then instaneously transition to a GameLayer with dark blue text displaying “Ranger GameLayer” on a dark grey background. GameLayer

  1. Congratulations. You have successfully installed and ran Ranger!

###Libraries (Pubs) Ranger relies on several Dart Pubs.

Sack relies on Ranger libraries plus several other Pubs

  • color_slider_control
  • gradient_colorstops_control
  • lawndart by Seth Ladd.

###Folder layout Ranger is a Pub and the core code is located under the lib folder. Here is a brief overview:

lib/
    ranger/
        animation/      -- Tween animation wrapper/helper
        audio/          -- AudioEffects. Classic arcade style
        core/           -- Pooling and timing (aka the Scheduler)
        geometry/       -- (Optional) Basic geometric shapes
        mixins/         -- Color, Input behaviors
        nodes/          -- The main visuals (Scenes, Layers etc...)
        particles/      -- (Optional) particle systems
        physics/        -- (Optional) Velocity
        rendering/      -- DrawContext (includes default implementations.)
        resources/      -- Imageloading and Embedded Base64 resources
        sprites/        -- Includes Canvas implementations
        utilities/      -- Misc

Basically there are 4 critical folders that matter when developing a game: animation, core, mixins and nodes. Other than that you are not required to use anything else. geometry, particles, physics and even sprites are not required.

The optional folders simply provide examples on how to build Nodes, and they are used mostly for the unit tests and templates.

###Documentation

These docs are not directly related to Ranger. But they could help your game development. They are all a work in progress.

###Google Blog Ranger has a Blog where I periodically post statues.

###Author Hello, I am Will DeVore the current developer of Ranger and Sack. I find it a pleasure working with the Dart language. Its integration with HTML/CSS/Canvas/WebGL is solid and functional.

###TODOs Ranger’s code is still sprinkled with TODOs. Most are minor in nature. Some of the top areas are:

  • Performance. Things like String conversions in places where code runs in tight loops.
  • Pause/Resume. I need to add the pause/resume code when Scenes are transitioning. An early version was present but once I replaced the old dispatch code with Dart’s Streams that code became obsolete.
  • Visibility of browser/tabs. When a tab or the whole browser focus is lost the engine needs to recognize this and pause.
  • Accelerometer code.
  • Several pieces of code should be optimized to check for dirty flag on transformations. I have slacked off is a few areas–in progress.
  • A better more full proof way of handling Infinite animations. At the moment the developer needs to track the Infinite animations. If they are not “killed” then cycles are wasted as the animation continues to animate objects that may be gone or invisible.

###Further reading

###Showcases None at the moment.

Articles

  • coming soon...