Canvas Components, Controls and more!
ZIM 10 has launched with a NEW SITE and new features including integrated physics, an accordion List and SVG import to ZIM paths.
The new site features ten banner sections giving examples of the types of Interactive Media that can be created with ZIM. These are:
Canvas Games with ZIM – 2D games, casual games, arcade games, espape games, minigames, flash games, games of chance, isometric games, physics games, simulations, action and educational games good for e-learning, advergaming and gamification.
UI UX – ZIM canvas components such as slider, dial, button, label, keyboard, color picker, check box, radio buttons, toggle, pane, window, layer, waiter, progress bar, tabs, pad, loader, text area and accessibility
Escape Puzzles – challenge your curiousity, problem solving and intuition!
Wonder Cards – interactive holiday cards, gadgets, widgets, inventions and features that defy description
ZIM uses Box2D and a wrapper ZIM physics.js file. Previously, the physics objects and ZIM objects would be made by the coder and then ZIM would map the two. Now, physics has been fully abstracted. The coder can create ZIM objects and use the addPhysics() to add the object to a physics world with a host of options like static/dynamic, linear and angular damping, friction, density, etc. This adds the following methods and properties to the ZIM object:
The physics world gets gravity, borders, scroll and:
The new Hierarchy class is used to turn ZIM List into an accordion component. Try it out here:
SVG (Scalable Vector Graphics) from HTML can be added to a ZIM SVGContainer() so that the paths and shapes get converted to ZIM Squiggle, Blob, Circle and Rectangle shapes. These then can be transformed and manipulated by the user with Bezier curves. Objects can be animated and dragged along the curves, and LabelOnPath can be used as well.
Try out SVG on Canvas here:
ZIM Pick is a formalized and generic version of ZIM VEE values launched in ZIM 5 which provide dynamic parameters. These are so handy, that we decided to give them to the world as a Pick Class.
Generally, Pick() lets a coder pass in parameters for a series, an array for randomly picked, a range object for a range or a function that returns a value. The function or class can then choose with a Pick.choose() static method. This is handy for instance with an interval to pick a different time each interval. Or a ParticleEmitter to choose a different particle to emit. Or a Tile to choose a different color each tile, etc.
A complete list of new features and changes for ZIM can always be found here: http://zimjs.com/updates.html
The ZIM site features the following sections: