Kiwi Examples are Live!

We have heard your pleas for a better Kiwi.js examples webpage and we are pleased to announce that it is finally here!

If you ever thought your game needed a little more pizzazz or you simply could not figure out how to do that one tricky thing then our new examples page might be just the thing you’ve been looking for.

The examples webpage covers everything from the Animation component to Tweens and we are not stopping there. We plan to update this examples webpage with all of the features that Kiwi.js has to offer and everything that it will offer in the future. So check in regularly to ensure that you keep getting the most out of Kiwi.js.



Dressup Blueprint Updated

If you have been following our github account you would have probably noticed that over the last few days we have just created a few new repositories for a few of our older projects. The two projects I am talking about are the Dressup Blueprint and the Zoe Dressup Game. These were in need of some TLC as not only were created using pre Kiwi.JS 1.0.0, but some of code may have been a bit too convoluted.

Below you checkout the Zoe dress-up game. Sorry, it won’t look much different visually, but under the hood it does!

Want to know how we have done it? If you want to check out the code you can find the links to repos below.

To Note:

Just to note that the Zoe Dressup Game extends the Dressup Blueprint. So a lot of the core code is the same between them.

Whilst your are checking out the code if you find any mistakes, unclear documentation or the like, then go ahead and make the correct changes and make a pull request. We do want the code to be the best it can, and if you think it’s not then help us out.

Fast Fibre HTML5 Game


Yes, it’s the Mayor of Porirua Nick Leggett battling to bring fast fibre to the whole of Porirua, while trying to avoid a posse of zombies intent on eating his brains.

Do you want fast fibre for Porirua? Then help Nick Leggett on his quest!

By playing the game and tweeting your score you will also win points for Porirua’s campaign to be the first Gigatown in the Southern hemisphere!

» Play Fast Fibre

Friday Fun: Absolution Velocity

Here at the laboratory we look forward to Friday afternoons. Ordinarily you might think that this qualifies us for the nice padded room, but we have a secret. Friday afternoon is game jam time, when we drop everything and work on something quick and cool.

For the past couple of weeks we’ve been jamming on a derivative of the venerable Curveball, a sort of 3D Pong. What we came up with is a neon-soaked retro-future experience. We call it Absolution Velocity.

Fire up some jams by Daft Punk or Power Glove and have a go:

Behind the Scenes


This game does something that you don’t see often in Kiwi.js: 3D. The ball moves in and out of the screen. How do we do that?

Well, we fake it.

All 3D graphics are fake, of course. Even the Oculus Rift is just feeding you two flat images. But you’re smart, and your brain is great at adding depth. We just need to feed you enough hints for that wonderful brain to fill in the gaps.

What we’ve done is a simple perspective trick. We put the ball (and the ball guide) into a group, offset the group’s anchor point to the middle of the screen, and then scale it.

The setup is easy:

Perspective is a little bit trickier. For this, we need to know how far away the objects are. We’ve done this by manually adding a z value to the ball group. Once we know the z position, we can do a simple calculation to get the apparent size:

Of course, this leads to certain problems. If the ball reaches a depth of 2, it will be half as wide. At a depth of 4, it will be a quarter as wide. This is already very small. But the game area is several hundred pixels across! If we gave it a depth of a few hundred units to match the other dimensions, the ball would be smaller than a single pixel.

We can solve this by setting the near and far planes of the level, and using them in the equation. We store these z values in a simple Kiwi.Geom.Point object. We simply assume that the near plane is where scale = 1, and the equation becomes:

Our level is 100-400. This works well with calculations using ball radius and velocity.

Chasing Absolution

The name of the game was determined while designing the physics. Bouncing off rectangular walls is a fairly easy problem because you can compute each axis independently, but it has some pitfalls.

For example, consider a ball that hits x = 0. We can assume that its velocity is negative, because it’s heading in a negative direction. So perhaps we should multiply that velocity by -1 so it will head the other way.

This seems neat and logical. It is also wrong.

You cannot guarantee that the velocity is actually negative. In fact, we’ve just proved that it isn’t – we multiplied by -1 to turn it positive! If the ball doesn’t rise above 0 on the next frame, perhaps because it lost energy in a bounce, its velocity will reverse again, and now it will be headed back out. The ball will get stuck in the wall!

A more robust solution will make sure that the ball is heading in the correct direction, no matter what direction it was going before. For this we use absolute values. If we say velocity.x = Math.abs(velocity.x), all is well; it makes the velocity positive. We can also say velocity.x = -Math.abs(velocity.x) for the upper bound, to redirect it inwards.

While brainstorming this simple physics paradigm, I used the term “absolution velocity” on our whiteboard. The phrase was too cool to forget. So we named the game after it.


We were fortunate to begin development on Absolution Velocity shortly before the release of Kiwi.js v1.1.0. As in every game design project, we had to invent new solutions. And sometimes using the tools in new ways revealed unexpected bugs. Which we were then able to fix.

A fun way to let off stress for us is also a great way to make Kiwi.js even more reliable for you. We know our tools are great because we use them, and we have to be satisfied with our own work.

Neon Wasteland

Finally, we made extensive use of the new Kiwi.js blend modes to get that 80s feel just right. Everything glows and flickers and pulses. We do this by creating a new renderer, setting its blend mode to ADDITIVE, and then cloning all the assets to create glows. We’ll be discussing this technique in more detail in an upcoming article here at, so keep an eye out; or jump the gun and have a look at the API docs in our handy reference section.

That’s all for today. See you soon!

Benjamin D. Richards

A new HTML5 Conference Game – The Project


Every year a group people with deep knowledge in their area of speciality congregate in Auckland to attend “The Project”, a conference hosted by AUT and orgnanzied by our friend Hal Josephson, the Founder of MediaSense. With speakers from Twitter, Buzz Media and Universal Music NZ, this years conference did not disappoint! By far my favourite take away from the conference was Cameron Gawley Co-Founder and CEO, BuzzShift talking about how Netflix came up with the concept House of Cards. Wow!

Anyway our role was to come up with a game around disruption and “Project Disrupt” is what we came up with. A cute HTML5 Top-Down conference game where attendees can login and interact with the speakers and the sponsors of the event. This game is disruptive for a couple of reasons, (a) because it took us just a couple of days to make (remember once upon a time games took MONTHS to build), and (b) because it is built using HTML5 which for those who don’t know is a web standards compliant technology that will run on just about everything – staggeringly last year alone over 1B HTML5 capable devices were sold!

While this game took us only 2 days to develop, it took about 4 full days to draw all of the art work! A big shout out to our friend Niko for doing such an amazing job on that – it looks totally stunning!!!

The game was announced on the second day of the conference, over 160 people played and went in the draw to win a new Samsung Galaxy S5. Boom!

Play Project Disrupt – The Game!

A new game called “-90″


Hi team, here’s a new HTML5 game that we put together in Kiwi.JS

Don’t let the somewhat familiar graphic style fool you, our game is a fast-paced tapper with no room for error.

This came about when one of our community members suggested that we needed more original content to compliment the upcoming Kiwi.JS V1 launch. As such we decided to make a simple, score-driven game that a user can learn within 30 seconds, and was tap based.

In homage to 2048, one of the biggest distractions on the internet (second only to Twitter), we present to you our new game, -90.

Please let us know what you think, or even better, tell us your high score!

Play -90 (negative 90) Game 

Two new HTML5 Game Blueprints

Hi team! Today I am pleased to announce the addition of two new HTML5 Game Blueprints. If you’re wondering how make Candy Crush or how to make Bejeweled, we’ve got a Blueprint for that! If you’re wondering how to make your own Dwarf Fortress or Nethack game game we’ve got a Blueprint for that too! 

ZOMG! Downloads NOW please!

We hope you enjoy these. If you find that we’ve helped make your life as a game developer even a little bit easier we’d love to know about it and hear your stories. If you fancy contributing or getting involved with our community please take a look around our Github repository and chime on in.

An HTML5 Hidden Object Game Blueprint… game

Screen Shot 2014-05-21 at 4.55.50 pm

Since Time immemorial game players and developers have been playing and making Hidden object games (sometimes called a hidden picture game), a genre of puzzle game in which the player must find hidden objects from a list that are hidden within a picture, we aim to continue this tradition by releasing the first HTML5 Hidden Object Game Blueprint for developers so that they can quickly and easily create their own Hidden Object games.

Continue reading

An HTML5 Dress-up Game called Zoe


This demo has since been updated and now is contained within its own repo. You can view the new Zoe Dressup blueprint here.

Here’s an example HTML5 Dress-up game that we put together. Like most Dress-up games it comes with the following features:

  • Buttons for cycling through different images
  • A randomize character button
  • A reset character button
  • The ability to toggle to a “show / preview” state
  • The ability to print your creation
  • The ability to save your creation as an image

So have a play and let us know what you think. The Zoe Game extends the Dress-up Game Blueprint that we’ve made by adding the ability to cycle through different characters. We’ll be making both Zoe game and the Dress-up Game Blueprint available within in the next couple of days. So stay tuned…