Hello, and welcome to the release of Kiwi.js v1.1.0! I’m Ben Richards, part of the core engine development team here, and we thought we’d take the time to tell you why v1.1.0 is the best Kiwi.js yet.
This is the first in a series of Kiwi.js v1.1.0 posts, in which we’ll go into depth about new features and under-the-hood enhancements. If you don’t know what Kiwi.js is, now is a great time to find out at www.kiwijs.org, and perhaps get involved with development yourself at github.com/gamelab/kiwi.js!
Today we’ll be giving you an overview of v1.1.0, explaining what this version is for, and giving a taste of some new features. So without further ado, let’s see what’s up!
What’s the Plan?
Kiwi.js v1.1.0 is versioned as a “minor release”. Using semantic versioning, this means we are allowed to add new functions and perform bug fixes, but we can’t remove or change old functions. Your v1.0.1 Kiwi.js projects should continue to perform just as they did before – but maybe faster and with fewer bugs.
The purpose of this minor release is to make animation and WebGL graphics easier and more flexible. To that end, we’ve added several useful features, both user-facing and internally. The bit that gets me excited is our rebuilt WebGL rendering pipeline, which has just blown the doors off future possibilities.
With v1.1.0 complete, it’s possible to make a huge range of plugins to do amazing things. And we’ve got plans. Our main plan is to pioneer new features as plugins. It’s a good way to introduce these features, because it doesn’t impact core functionality, and it allows us to revise the API on those features after seeing them behave in the wild. If we like the feature, we can add it to core in a future minor release. Plus, once we put something in, we can’t take it out until the next major release – version 2.0.0. Semantic versioning requires a stable API (application programming interface) and backwards compatibility within major versions. With plugins, we can explore our options and only put it into core once we have an API that we like.
What sort of plugins? Oh, little things like advanced physics, lethal AI, multiplayer with all your friends, and real-time lighting like you’ve never seen before.
New Stuff
There’s so much interesting stuff in Kiwi.js v1.1.0 that we couldn’t possibly fit it all into one blog post. (Well, we could, but your brain would explode. And we respect your carpet far too much to let that happen.) So we’re splitting it up into a series of posts.
Your favourite part of this series will depend on what you’re doing with Kiwi.js. Some parts will be quite technical – maybe you’ll learn something, or better yet, you’ll find a place where we messed up. (And tell us. We like that part best.) Other parts will be more accessible, describing some cool ways to use new features.
Before we get into the new features, we’ll go over a series of little things that don’t merit an entire blog post on their own. After that, we’ll summarise upcoming articles. The series will alternate between technical and API topics. We have a lot to say on the technical side; we hope this will prove a useful resource to other WebGL developers, as well as showing you how best to interface with Kiwi.js if you’re into shaders and other advanced topics.
Let’s get started!
The Little Things
New Examples Repo
Kiwi.js has plenty of examples, showing all sorts of useful things. Too many, in fact! All that goodness was bloating the core Kiwi.js download on Github.
So we’ve moved the examples to a new repo. If you want to see Kiwi.js in action, grab that repo, fire up your localhost server (we suggest WAMP or MAMP), and see what Kiwi.js can do.
WebGL Default Renderer
Like it says, WebGL is now the default renderer. Blazing fast graphics are even easier than ever. The moment you create a game, it uses WebGL. Don’t worry if your browser doesn’t support WebGL; Kiwi.js will detect a problem and fall back to Canvas mode.
Kiwi.js now has the following renderer options, which you can use as values for “renderer” in a gameconfig object:
- Kiwi.RENDERER_CANVAS (fallback renderer, guaranteed to work on any HTML5 browser)
- Kiwi.RENDERER_WEBGL (default high-powered renderer with all the best features)
- Kiwi.RENDERER_AUTO (autodetect WEBGL if it is present, CANVAS if not)
Camera Resets
When you swap States, all cameras in the game reset to default. (This means they set x,y = 0, rotation = 0, scale = 1, rotPointx,y = width/2,height/2.) This is important, because 99% of the time you’re using the default camera. If you move that camera and then swap States, you might find yourself looking at the wrong part of the new State.
This reset happens automatically. If you want to call it yourself, use either game.cameras.zeroCamera( camera ) or game.cameras.zeroAllCameras() (where game is your game object and game.cameras is a CameraManager object).
Alpha On Stage
It is now possible to make the game background transparent, allowing you to see the rest of the webpage behind it. This can be useful if you want to integrate Kiwi.js objects with the rest of your content, although you’ll probably need to do plenty of coding to pull it off.
To set a transparent background on the Game object game, call game.stage.color( "ffffff00" ) or game.stage.rgbaColor( {r: 255, g: 255, b: 255, a: 0} ).
To set the background opaque, call game.stage.color( "ffffffff" ), game.stage.color( "ffffff" ), game.stage.rgbaColor( {r: 255, g: 255, b: 255, a: 255} ), or game.stage.rgbColor( {r: 255, g: 255, b: 255} ).
Note that the game will assume a fully opaque alpha if you call rgbColor or set color to a six-digit hex value. Note also that using rgbaColor requires an alpha parameter in the range 0-255, not 0-1 as may be used in some color formats; this is to preserve internal consistency.
Thanks to user Viriatos for asking about alpha on stage.
Off-Axis Tile Maps
It is now possible to freely transform TileMapLayer objects. You may reposition, rotate, and scale them freely. This can be very useful for creating interesting backgrounds.
However, we haven’t yet managed to get physics to follow them. You should not use transformed tilemaps as interactive objects just yet. We’re working on advanced physics systems to overcome this problem. For now, explore the aesthetic possibilities.
Goodbye, willRender
Some objects had a willRender flag to control their visibility. This is deprecated in favour of the visible flag. Because we’re not putting out a major release, willRender still works – we simply advise users not to use it, and redirect calls to visible. This simplifies an unnecessary divergence of function.
That’s it for the small things. Now for the big stuff.
New WebGL Render Pipeline
We’ve reordered the WebGL rendering pipeline in the name of greater accessibility. We already had a super-fast batch renderer, which would combine objects with identical texture and renderer settings into a single draw call. But now each batch follows a series of steps:
- Enable renderer. Here you can set shader uniforms.
- Clear vertex buffers.
- Call per-object
renderGL() methods. Here you can run per-object graphics operations and define geometry.
- Upload texture/s to graphics card.
- Manage blend mode.
- Draw to screen.
In the render pipeline article we’ll explain what we used to do, why we changed it, and how you can use this to make powerful game objects.
After consulting the needs of game designers, we’ve come up with some new shortcuts which we think you’ll find most useful. Game objects now have a unified set of aliases to transform properties, and we’ve added some new functions and names to boot. Want to scale an object in both x and y at once? Does anchorPointX sound cooler than rotPointX? Just how incredibly useful are transforms anyway? All shall be revealed in this article.
New WebGL Texture Pipeline
When it comes down to it, all of Kiwi.js is a system for drawing textures onto the screen. Thus far we’ve given you tools to draw with one texture at a time. But what if you could draw data from multiple textures at once? What if you could combine data, make it do more than just replicate the same set of colors? This is the domain of WebGL shaders. And we’ve taken all the hard work out of setting up your WebGL environment to drive advanced shaders.
In this article we’ll examine the flow of textures through the render pipeline and explain how they are arranged on the video card.
New Tagging System and Object Selection
Add abstract tags to game objects! Label friends and foes, set moods, inform an enemy that they are now on fire – you can do all this and more without developing new classes and functions.
In this article we’ll talk about ways to identify and sort your game objects. We’ll also look at the scene graph, and explain how it orders your assets.
New WebGL Blend Mode System
Users of our Particle Effect Plugin have seen how cool additive blending can be. Inspired by this, we’ve put blend modes into the core engine. But that’s not all; we’ve given you more control over renderers, so you can set up shader groups, clone renderers, and generally make your game objects look exactly how you want them.
In this article we’ll talk about WebGL blend modes, what they can (and can’t) do, and how to manage your renderers the way you want.
New Time Properties
Kiwi.js is super fast, but we’re ultimately at the mercy of the browser. If your game starts to run slow, whether it’s because of a pop-up from another site or because you’ve implemented ray-traced 3D global illumination in your game (and good on you), you don’t want your game to go into slow motion. Or maybe you do want some slow motion! Whatever the case, we’ve got your back with a range of new time parameters.
In this article we’ll explain the consequences of frame rate, and how you can create a whole range of super smooth animations with our new time properties.
New WebGL Shader System
We’ve looked at the new render pipeline, the new texture pipeline, and the new blending system. These are pretty awesome on their own, but they’re a hundred times better when you use them to fulfill their destiny. From the beginning, these improvements were intended to support the creation of advanced new shaders.
In this article we’ll look at the process for creating new shaders, from beginning to end. How do you write a shader? How do you write a plugin renderer? How do you apply them to objects in game? All this shall be answered, and it will be max wicked.
Change Log
Check out the readme on Github for the complete change log!
Beyond v1.1.0
What’s next for Kiwi.js? Unfortunately, your security clearance isn’t high enough to know all the details. But we have a pretty good idea of where we’re going. There will probably be a v1.1.1 targeting implementation problems on the more specialised platforms, like CocoonJS. We’ll test a series of exciting new features using plugins. And me? I’m thinking about v2.0.0. Two words: Deferred Renderer.
See you next time, when we talk about the new WebGL render pipeline!
Benjamin D. Richards
Recent Comments