ZIM - Game Zaps - with ZIMjs for JavaScript and HTML Canvas with CreateJS


Dr. Abstract explains and defines games zaps for the HTML Canvas with JavaScript, CreateJS and ZIMjs interactive media framework Game Zaps are games that can be made in a day! These can be used for advergaming, gamification for e-learning, game portals, etc.

Controllers

Games often involve a character that is controlled with mouse, keyboard or game controller. The ZIM MotionController class makes this really easy! ZIM also has one-line drag and drop as well as gesture controls for touch screen pinch zoom, pan and rotate.
MotionController(target, type, speed, axis, boundary, map, diagonal, damp, flip, rotate, constant, firstPerson, turnSpeed, moveThreshold, stickThreshold, container, localBounds, mouseMoveOutside, mousedownIncludes, minPercentSpeed, maxPercentSpeed, dampKeyup) Docs

Hit Tests

Games can have items that need to be collected or avoided. ZIM has a variety of hit tests for points, bounds, circles, rectangles, registrations, and grids. There is also a souped up interval as well as Ticker class optimized for mobile. These can be used to drop a bomb or a flower at random times and constantly test for a hit using a traditional JavaScript if statement.

Sprites

ZIM Sprite uses industry-standard SpriteSheets and features a run method based on ZIM animate which provides duration, rewind, loop, ease, labels, etc. ZIM also has a Dynamo which is a dynamic sprite that changes speed based on input. These can be put in an Accelerator along with Scroller objects and other animations to change the speed of the whole scene from one place!
Sprite(image, cols, rows, count, offsetX, offsetY, spacingX, spacingY, width, height, animations, json, id, globalControl, spriteSheet, style, group, inherit) Docs

Here is an example of using a ZIM Sprite for a Texture Atlas approach where the SpriteSheet holds multiple images. These can be brought in and used just like any other DisplayObject so animated, dragged, etc. The advantage of this approach is speed gained from only one call to the GPU. Speed is important on mobile.

Physics

ZIM has integrated Physics that provides a much easier interface to the BOX 2D Physics engine (Angry Birds). Any display object can be placed into the physics world with the addPhysics method to receive force, impulse, torque, contact, etc. The physics world has gravity, borders, dragging, joints and can be scrolled and set to follow any body.
addPhysics(dynamic, contract, shape, friction, linear, angular, density, restitution, maskBits, categoryBits, physics) Docs

Modules

ZIM has a game module with a LeaderBoard, Isometric Board, Timer, Scorer, Meter and a growing number of helper classes. EasyStar can be used for path finding. The Three module works to bring 3D into ZIM via ThreeJS. There is also ZIM Socket for multiuser games!

Organization

ZIM provides a Frame that fits to an HTML Window, Tag or mobile ViewPort and gives a Stage where all the objects are placed. The Pages class lets us divide into scenes and then there is the Container class to organize any number of objects. The Tile class can be used to tile objects, the Emitter class can be used to make many objects in time. And there are many components like Button, Slider, Dial, etc. for interface.
Frame(scaling, width, height, color, outerColor, assets, path, progress, rollover, touch, scrollTop, align, valign, canvasID, rollPerSecond, delay, canvasCheck, gpu, gpuObj, nextFrame, nextStage, allowDefault, loadFailObj, sensors) Docs

Industry

CreateJS has been downloaded over a Billion times and was used to remake the Atari Arcade sponsored by Microsoft at the dawn of HTML5. ZIM is used around the world for casual games, kids games, word games, Flash-type games, advergaming, and any type of 2D game imaginable! Pictured at right are CloseApp games.
Thanks to ZIM, development time was quite short and a very smooth ride along a quick learning curve! - Valeria Valoueva, New York Hall Of Science

Education

The ZIM Learn section has all you need to learn. There are common techniques used for dragging many things at once, snapping things in place, applying damping and proportion, etc. These can be found in ZIM Bits. The basics of JavaScript and ZIM is looked at in the Code Zero, What IZ and ZIM Capture series. There are two Game workshops in the ZIM Teach section for making games with ZIM.

MORE
Games are even more fun to code!
open links in new tab


Alone Droid 2 Neon Cave Physics Game to disable shield generator
Alone Droid 2 Neon Caves Side Scroller physics game

Isometric Maze Game Board in ZIM Game Module
Isometric Maze Game Board in ZIM Game Module

Alone Droid Physics Game to disable shield generator
Alone Droid Physics Game to disable shield generator

LeaderBoard made with ZIM Game Module - GET YOURS
LeaderBoard made with ZIM Game Module - GET YOURS

Touchy Mobile Game to touch each other's screens
Touchy Mobile Game to touch each other's screens

Splatoid Pattern Matching Game
Splatoid Pattern Matching Game

Noodles - physics game
Noodles - Physics Game to keep dreads on!

Star, Ship, Alien, Portal - memory game
Star, Ship, Alien, Portal - Memory Game

Color Game - memory game
Color Puzzle Game

Carboon Isometric Game to collect and avoid
Carboon Isometric Game to collect and avoid

Psychic Pixels Guessing Game mobile app with pixel drawing
Psychic Pixels Guessing Game mobile app with pixel drawing

Dynamic Sprite Sheets with Dynamo and Accelerator
Dynamic Sprite Sheets with Dynamo and Accelerator

Integrated Physics with forces, contacts, linkages, scrolling and more
Integrated Physics with forces, contacts, linkages, scrolling and more

Zong! Pong Game with multiple balls and paddles
Zong! Pong Game with multiple balls and paddles

64 ZIM Bits including Local Storage, Path Finding and Falling Games
64 ZIM Bits including Local Storage, Path Finding and Falling Games

ZIM Controller class with Game Console controls, keyboard and mouse
ZIM Controller class with Game Console controls, keyboard and mouse

Parallax scrolling backgrounds for Side Scroller Games
Parallax scrolling backgrounds for Side Scroller Games