Awesome

Ranger-Sack - v0.9.5 Beta

Logo

##Contents:

About
Templates, Applications and Unit tests
Nodes
Documentation
Google Blog
Author
License
Development

###About Ranger-Sack (Sack for short) is a sibling project relative to Ranger-Dart

HighLevel

Sack simply serves as a goto place for examples that range from full apps, templates and unit tests. It also includes miscellaneous extensions/add-ons or enhancements.

###Templates, Applications and Unit tests Sack comes with a suite of Templates, Applications and Unit tests. Each serves as a howto for starting a project or referencing during project development. When starting a new project you will copy one of the Templates and begin coding from there. The Applications and Unit tests are for later, after you have a project underway and want to know how to do something.

Templates

There are currently 7 Templates located under the web folder.

web/
    applications/
        templates/

Each Template progressively adds on a feature showing how to perform a basic task. For example, level0 is the most basic: a Splace Scene and Splash Layer, and a GameScene and GameLayer.

Level 0 - A stripped down basic framework template.
Level 1 - Loads a single sprite asyncronously.
Level 2 - Loads 5 sprites asyncronously and adds an overlay busy spinner.
Level 3 - Basic keyboard activation and usage.
Level 4 - Demonstrates basic Scene transition and animations.
Level 5 - Demonstrates icon animation and HTML panel animation.
Level 6 - Demonstrates a particle system.
Level 7 - Demonstrates a typical resource loading sequence for a game. Complete with a button widget.

Applications

There are currently 2 applications.

web/
    applications/
        ranger_particles/
        rocket/
        2048/

Ranger_particles is a hand built HTML/CSS application that uses Sack to display the particles. The application itself is not complete meaning you can only save to local-storage. There is code to save to the GDrive but it hasn't been completely wired up. I know the GDrive code works because it is used in the SpritePatch application to save and load sprite sheets.

RangerRocket is a demonstration of complex Node usage. In there you will find examples on how to map between "world-space" and "node-space" in order to handle particle placing and collision detection. It also shows the proper way of handling key presses.

2048 is a 2048 clone. This application demonstrates a complete game from start to finish. It contains: Loading resources (images and local-storage), Animations and game logic. However, it isn't a good representation of how to code a gui. Sack currently lacks a UI-Kit so everything is hand rolled. It has several new--more modern--widgets: ButtonWidget, PopupWidget and SlidePanel. They are crude and don't represent a typical UI-kit by even a longshot. Depending on your needs you may want to use HTML/CSS.

Unit tests

There are many unit tests. Some are non-visual but many are visual. The original unit tests have all of the non-visual tests, for example, pooling and affine transformations; and they are a bit outdated so use with caution.

A side note: When first looking to port Cocos2D-js the first thing I noticed was that the transform stack was a mess of incomprehension. I couldn't make complete sense of it and I didn't want to use something that I couldn't follow or understand. So the very first thing I did was scrap Cocos2D-js code and learn to make a transform stack myself. Forturnately I had worked with Piccolo2D and understood how its stack worked.

The old test (some may not work as they were created almost a year ago) are located under the old_tests folder. The newest tests are under the scenes/tests folder.

web/
    unittests/
        old_tests/
        scenes/
            tests/
                colors/
                fonts/
                inputs/
                particlesystems/
                spaces/
                sprites/
                transforms/
                transitions/

The new tests cover pretty much all aspects of Ranger. They serve as both unit tests and as a resource to learn from.

###Nodes Nodes are in no specific order.

ZoomGroup RangerRocket: A node that allows zooming around a center point. Useful for zooming on sections of a scene.
ButtonWidget Templates-level 7: A simple gui node where you can get enter/exit and click events from a Sprite node.
CircleParticleNode RangerRocket: A trivial node suitable for particle systems. It specifically implements the Color4Mixin for color tinting.
PointColor RangerRocket: A simple circle that demonstrates collision/intersect.
PolygonNode RangerRocket: A simple node that wraps Polygon class while providing an Axis Aligned Bounding Box (aabbox) for visibility checking.
ControlsDialog RangerRocket: A simple Html DIV panel that implements the Tweenable interface. It slides in from the right. This panel is also demonstrated begining in Templates level 5 and 6 and the main panel of Unittests.
Zones (Single and Dual range) RangerRocket: Zones are spatial areas that emit messages when objects enter and exit them. Single is a single ring and Dual is two rings.

###Documentation

These docs 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.

###License See MIT license

###Development When developing anything within Sack you have two choices as to which Ranger source you use:

Directly from Github. In this case you can't modify Ranger's source code but you can debug it.
- git: git://github.com/wdevore/ranger-dart.git
Or you clone Ranger to your desktop and reference it instead.
- path: */some/where/*GitReposes/Ranger-Dart