Kiwi.js 1.0

Kiwi.js is the worlds easiest to use Open Source HTML5 game framework for making both mobile and desktop HTML5 browser games.

Our focus is blazingly fast WebGL rendering and complimentary tools to make professional quality serious games. We use CocoonJS for publishing games and App creation.

Version: 1.0 "Iwatani"

Visit the Official Website
Follow us on Twitter
Explore Source code for Kiwi.js examples
Read our API Documentation
Browse our Plugin Repository
Contact us for more information

Welcome to Kiwi!

Born out of a desire to democratize HTML5 game development and to make something that we love available to the masses, we bring you Kiwi.js.

We don’t mean to brag (too much), but Kiwi.js is fast. With hardware accelerated WebGL rendering, you can expect your games to be easily deployed across mobile and desktop browsers. But wait, they can also be deployed to mobile devices as native apps, using the CocoonJS framework.

Our mission is to follow the best open source community practices. We’re backing that up by providing professional support when its needed, so everyone — commercial developers as well as indies — feel the love.

And we do think you’re going to feel the love. What couldn’t you love about a game engine that is named after a fluffy adorable bird and one of the world’s greatest game inventors?

How to Guides

Have you ever been trying to figure out how to do something on a website and the help pages resemble a Goosebumps choose your own adventure book? So have we, which is why we have spent literally hundreds of hours writing good help documents for Kiwi.js developers.

Our Official Documentation Codex is here if you do get stuck.

Features

Powerful Rendering

Kiwi uses a custom built WebGL rendering system for targetting modern mobile and desktop browsers as well as mobile apps through CocoonJS.

Not only is Kiwi lightning quick but it is also extendable, meaning that fellow contributors can easily write there own powerful rendering Plugins and Add-ons using WebGL Shaders. For instance our WebGL Particle Plugin creates stunning special FX using this systmem.

Of course, you can render to canvas too, which means older browsers, and mobile browsers, don't miss out.

Mobile Publishing

Kiwi.js is closely aligned with Ludei's CocoonJS. You can use Cocoon to wrap up your game and play it on iOS or Android devices.

State Management

A state management system lets you easily move between and manage game states. Each state has an optional preloader phase, a create phase, an update loop, and a destroy phase. Each of the phases are highly configurable.

Flexible Asset Loading and Management

It's easy to load in images, sound and data. You can decide when you want it to load (e.g. in a single payload at the beginning, or on a per state basis). When your assets are loaded they're super easy to access from data libraries.

Gameobjects - Sprites, Images, Textfields

Gameobjects are objects that get rendered in your game. Whether they're frame-based sprites, webGL particles, static images or textfields, they all can be moved in the game world and placed in the scene graph.

Entity/Component system

Each gameobject is an "Entity" and can have "components" attached to it. Components are small pieces of code that do something useful. For instance the arcade physics system is implmented as a component. If you want your game object to use physics, simply attach a physics component to it. Some of the standard gameobjects have components such as animation already attached. You can also write your own components.

Scenegraph (Grouping objects)

The scenegraph represents all of the gameobjects that visible in your gameworld. You can group objects, and place groups within groups. You can animate and move your objects and groups and they'll behave in a consistent manner depending on how they are nested.

Animation

Sprites have an animation component that enables frame by animation from spritesheets and texture atlases. You can easily define frame sequences and frame lengths, play, pause, loop and reverse animations. There is also a built in tweening system.

Input (Including Touch)

Kiwi.js supports input for mouse, keyboard and of course touch. Mouse and touch events are easily handled by Kiwi.js pointer objects, so in most cases you don't have to worry about where the input is coming from.

Camera

Your game world is viewed through a controllable camera, which you can move and spin.

Tilemaps

Kiwi.js has support for tilemaps, including multiple tile layers. The Tiled map data format is supported, including isometric tiles. You can programatically generate tile maps, and once a tile map is created you can easily manipulate the data to change the tilemap dynamically.

Audio

Kiwi.js supports the WebAudio api, and falls back to using tag when it is not available. Audio sprites are also supported, unless of course your device happens to be some weird futuristic gheto blaster.

Monitization

As fellow game developers we know what it is like to be hungry, shivering on the corner holding a can of change in one hand and a damp “will code for cash” cardboard sign in the other.

Because of this, creating an In-App Purchasing Plugin to allow you to monetize your games was a top priority and is available now.

CocoonJS users can easily sell add a virtual currency to consumable goods via the AppStore

Plugin System

As part of our dedication to open source principles, the plugin system lets developers extend many aspects of Kiwi.js. The rules around creating them are unobtrusive, making plugins easy to create and attach. Plugins will soon be able to be sold in the upcoming Kiwi.js marketplace.

Integration with powerful tools

Kiwi.js is part of a larger ecosystem of products which will enable you to create games and game content using specialised tools such as the Gamefroot cloud based game building solution. Because you can never get enough power

Getting Started

There are several ways to get started, starting from scratch is the generally accepted way to go about this, but if you want to get up and running even faster, Kiwi.js "Blueprint" games will help get your game building experience off to a flying start.

Choose from any of the following:

HTML5 match-three game
HTML5 top-down game
HTML5 dressup game
HTML5 breakout game
HTML5 roguelike game
HTML5 platform game (in dev coming soon)
HTML5 crossword (in dev coming soon)
HTML5 hidden object (in dev coming soon)
HTML5 tower defense (in dev coming soon)
HTML5 poker game (in dev coming soon)

There will be an ever increasing library of free and premium blueprints to get you started.

Starting from scratch

The easiest way to start with a blank game is to take a copy of the /gameTemplate folder. This contains a recommnded folder structure and all default files already in place.

You will need to use a web server to open the index file.

A more advanced, but still simple, way to create a blank game is to use the Kiwi.js Yeoman Generator. This will create build files and other goodies for you as well.

Viewing the examples

The /examples folder contains a number of basic examples for you to try and to view the source code. In the next minor version of Kiwi.js these will be moved to a separate repo.

You will need to use a php web server to open the index file in the examples folder. This is a temporary arrangement, and when the examples are moved this will no longer be the case.

What's in this repo?

Note: If you just want to use the framework, the kiwi.js and kiwi.min.js files are located in the /build folder, and the docs in the /docs folder, and there is a template game in the /templateGame folder. You probably don't need to worry about the rest of the repo!

Folders

build - The kiwi.js and kiwi.min.js files
src - The kiwi.js framework source code
docs - API documentation on the Kiwi.JS framework.
docstyles - Used to store assets for building docs.
examples - These examples are soon to moved to a new repo and updated (See more info below)
templateGame - An example TemplateGame to help you on your way to developing a Kiwi.JS game.

Files

.gitignore - mask files from git
bower.json - see below about bower installation
grunfile.js - used for building the framework
license.txt - The MIT license
package.json - the npm package used for installing dev dependencies
README.md - this file!
tslint.json - the tslint configuration file

Getting and building the library

Bower

If you use the Bower package manager you can install kiwi.js with

bower install kiwijs

Yeoman

If you use the Yeoman scaffolding system you can install a blank kiwi.js game with

yo kiwijs

It's best to look at our Yeoman Game Generator repo for full details.

Using Grunt

This requires installing node.js, and the grunt CLI package. There are a few thing you can do with grunt, including linting and compiling the typescript, uglifying the result and compiling the docs.

To build, lint and uglify use the default

grunt

To do all of the above plus compile the docs

grunt full

To just build the docs

grunt docs

The csproj and grunt compilation methods both output a single kiwi.js file in /build Grunt will also create a min.js version and also output a kiwi.d.ts definition file in /build as well

Building Kiwi manually

You don't need to build the library to use it. The repo has prebuilt files in the /build folder.

Kiwi.js is currently using Typescript 0.9.5 Either - use Visual Studio/TS extension. There are csproj files for both the main project and also the examples.

Extending Kiwi.js

You want Plugins? We got Plugins!.

The concept of Plugins, and how they might apply to game creation, is something we're very interested in. Years of working in the open source space and hacking open source tools has provided us with the qualifications necessary to create a system that works for you.

We built from the ground up as a plugable system. You can add multiple plugins to your game, or write plugins yourself. Soon, you'll even be able to sell your own plugins in the Kiwi.js marketplace.

Kiwi.js is built in such a way that your plugins can do very simple or very powerful things. For example:

A utility plugin, such as an inventory for keeping track of items a player has collected.
A gameobject plugin, that creates programmable tower defense unit.
A component plugin, such as a specialised physics system that can be applied to any gameobject.
A rendering plugin, that creates new renderers and WebGL shaders that give your game an entirely different look.
A service plugin, such as an ad-network or in-app purchasing system.
Stop your bathtub from automatically draining whenever you try to take a bath.

To learn about building Plugins view the tutorials on kiwijs.org. You can also get started with Plugins using the Kiwi.js Yeoman Plugin Generator.

Tools

Visual Game Maker

Gamefroot is the worlds most powerful and easy to use browser-based game editor.

We've partnered with Gamefroot and we're pleased to let you know that Kiwi.js integration is in development and coming your way soon.

Stay tuned for more updates and more tools!

Roadmap

Here are some of the features planned for future release.

Version 2.0 "Bushnell"

Multiplayer capability (yup, thats right!)
WebGL lighting
Tools!
New Physics engine

Contributing

We'd love for you to get involved and help make Kiwi.js the best damn game framework in the world! If you'd like to contribute please get in touch, fork/clone the repo and have a dig around.

If you find a bug then please report it on GitHub issues
If you have feature request, or have written a game or demo that shows Kiwi in use then please get in touch. We'd love to hear from you! Please email: dan@gamefroot.com
If you have a pull request for Kiwi, please only do so against the dev branch and not against the master branch.
Before submitting a Pull Request please run your code through JSHint to check for stylistic or formatting errors.

Bugs?

If you discover a bug and find yourself wanting to jump in and help make the world of HTML5 gaming a better, less buggy, place, please add said bug to our issues tracker with as much information as possible, especially source code demonstrating the issue.

https://github.com/gamelab/kiwi.js/issues/new

Community

A massive shoutout to our contributors!

Ross Kettle
Ben Harding
Phil Wickliffe
Zach Frieberg
Locky Reid
Ido Yehieli

Kiwi.js also uses code from a number of open source projects. Effort has been made to clearly identify authors in the code comments. If you notice and missing or incorrect attribution please let us know.

gamelab/kiwi.js

README.md