Particle Editor now live!

Posted on April 15, 2015April 15, 2015 by Ben Harding

We bet you want pretty particle effects, just like us. What’s not to love?

But there has always been one problem with particle effects. Creating them by hand can be a long and painful process, and while we have an awesome Kiwi.JS Particle Effects Plugin, defining an entire object literal and configuring all the options can still feel very confusing and overwhelming.

We are proud to announce the release of the Kiwi.JS Particle Editor. This online tool provides you with a easy to use interface for making particle effects that make your game pop!

the-editor

The Particle Editor streamlines the particle creation process by giving real-time visual feedback for the options you can apply to particles.

To get started, simply go to tools.kiwijs.org/particle-editor/ and configure the particles using the the controls in the left sidebar.

You can read more about how to use the Particle Editor here.

Now go out, create that pretty particle effect you have visualized in your head, and let us know what you think in the comments below

Match Three HTML5 Blueprint Upgraded

Posted on March 20, 2015March 20, 2015 by Ben Harding

Hello to all. Today we are proud to say that, thanks to Uncle Zeiv, the Match Three Blueprint has received a massive rework. This blueprint was in need of update as it was originally created for Kiwi.JS version 0.6.0, which was so last year.

Have a play with the updated blueprint below and let us (and Uncle Zeiv) know what you think!

You can find and download the blueprint on github.

Upgrades:

Greatly reduced code duplication.
Modular architecture with separated classes.
Clear documentation throughout the code.
Smoother animations using tweens.
Tile swap now animates.
Abstracted away logical coordinates to screen coordinates mapping.

Greetings from Kiwi.JS v1.3.0 “Moriarty”

Posted on March 16, 2015 by Ben Harding

Hello readers. Today we are happy to announce the release of Kiwi.JS version 1.3.0, “Moriarty”. This release is named in honour of Brian Moriarty, designer of Loom, a fantastic fantasy game made by LucasArts in the 90s that inspired many of us here at the studio to embark on our game development journeys. “Moriarty” also sounds like you are talking to a cunning and dastardly villain, which we think makes it sound awesome.

This latest version of Kiwi brings new features to multiple areas of the engine. Instead of focusing on a particular area to upgrade we decided to add in a lot of niceties that we have always wanted, such as window focus/blur events, window visible status, passing parameters to State preload methods, plus much more.

You can download Kiwi.JS v1.3.0 on github now.

New Features

Window focus/blur events added to the Stage allowing users to easily pause/resume their game. (#23)
The Animation Component will now look for sequences on their given texture atlas if told to play a sequence that can not be found. (#83)
TileMapLayers have been seperated into Orthogonal and Isometric classes to keep code more maintainable as well as more succinct. (#85)
Additional file management methods added to the FileStore class. (#103)
You can now pass parameters to a states preload method when switching states. (#104)
You can now filter out messages to be logged out when using the Kiwi.Log. (#151)
Much better consistency for passing file types. (#156)
@rydairegames added a method to get a tile when you know its index. (#160)
ArcadePhysics now contains a rotateToVelocity method. (#179)
Clocks now contains deltas. (#183)
You can now assign floating point values when changing an Animation‘s frame; they will be rounded to the nearest frame. (#186)
Audio now contains an onComplete signal. (#189)
Context menu events have been added to the Mouse Input Manager. (#191)
HUDWidgets can change the origin the position is based on. (#193)
New get children by tag methods added to groups. (#195)

Bug Fixes

Animation employs more rigorous methods which ensure the frameIndex is correct. (#184)
Timer no longer hangs when the interval is set to 0ms. (#187)
setInterval and setTimeout now deal with clock units. (#188)
IconBar positioning fixed. (#192)
Minor fix with the image loading when using the xhr + arraybuffer methods of loading.
ArcadePhysics tile collision boxes made smaller to give better collisions.

Special thanks goes out to @rydairegames for providing the getTileFromIndex method. We think it is extremely useful already.

More details can be found on the Kiwi.JS repo under the 1.3.0 milestone.

If you have any questions, or would like to report a bug, please resist the urge to shout, “Curse you, Moriarty!” Instead, visit our website and make use of our growing community!

KiwiJS v1.2.0 – Refreshed File Loading System

Posted on February 2, 2015February 2, 2015 by Ben Harding

Hello there! Today we are going to have a little look into the file system since it has been refactored in KiwiJS v1.2.0.

Adding Files to the Loader

Adding assets to your games is a fundamental part of the library! We worked on quite a few projects with Kiwi, and after a while we found that we just could never remember the correct order to pass arguments to the add assets methods such as addImage and addSpriteSheet.

We thought that passing a params object would fit the bill. Just have a look at the example below!

// The traditional method.

// Passing arguments. Still valid in version 1.2.0

this.addImage( "MyImage", "./assets/img/my-image.png" );

// New Method

// Using a params object

this.addImage({

key: "MyImage",

url: "./assets/img/my-image.png"

});

Now the addImage method is a bit easy to remember. But have a look at the example below which shows us how it works with the addSpriteSheet method.

// Can you remember what every argument is for?

this.addSpriteSheet("MySpriteSheet", "./assets/img/my-spritesheet.png", 150, 117, true, 8, 2, 8, 0, 0, 12, 12);

// A bit easier now

this.addSpriteSheet( {

key: "MySpriteSheet",

url: "./assets/img/my-spritesheet.png",

frameWidth: 150,

frameHeight: 117,

numCells: 8,

rows: 2,

cols: 8,

sheetOffsetX: 0,

sheetOffsetY: 0,

cellOffsetX: 12,

cellOffsetY: 12

} );

// Or leave out optional parameters altogether:

this.addSpriteSheet( {

key: "MySpriteSheet",

url: "./assets/img/my-spritesheet.png",

frameWidth: 150,

frameHeight: 117

} );

Global Files

Whilst adding the new params object we though it would be the perfect the time to expand upon the Global vs. Local asset management concept we currently have in the engine.

Currently each add method contains an argument named “storeAsGlobal”. This is a boolean. When true the asset added will never be deleted by Kiwi runtime itself. You can of course manually remove it. But when it is false that asset will be removed when the runtime switches to another State.

// Global

// Will be usable FOREVER, you until you manually remove it

this.addImage( "MyImage", "path/to/my-image.png" );

// Local

// Will be usable only for this state

this.addImage( "MyImage", "path/to/my-image.png", false );

When using the new params object, instead of marking assets as “global”, you will have to set the LAST State the asset is to be used on. The asset will be usable on every State until the State you specify is loaded and then switched off.

// Global

// Will be usable FOREVER, you until you manually remove it

this.addImage( {

key: "MyImage",

url: "path/to/my-image.png"

} );

// Local

// Will be removed when the current state is switched off

this.addImage( {

key: "MyImage",

url: "path/to/my-image.png",

state: this

} );

Tagging

Now while this isn’t a new feature to Kiwi (we have actually had this for quite some time), we thought we would show you how you can tag assets in Kiwi.

The first step is to tag the asset when creating it. You can also use the addTag method on the Files.

// Add the tags parameter when create the assets

this.addImage({

key: "Fire Queen",

url: "fire-queen.png",

tags: [ "fire", "queen", "deadly" ]

});

// Alternatively you can get the file and then use the "addTag" method.

var file = this.addImage( "Fire Queen", "fire-queen.png" );

file.addTag( "fire" );

file.addTag( "queen" );

file.addTag( "deadly" );

Now once you have tagged a few assets you can remove them, or access them via the FileStore.

// Get the files by tag

var files = this.game.fileStore.getFilesByTag( "queen" );

// Remove the files by tag

this.game.fileStore.removeFilesByTag( "fire" );

Percent Loaded

Default Behaviour

Just loading in your assets will probably not be enough in your games. You may also want to show progress bars.

In Kiwi the percentage loaded can be calculated in two different ways depending on your needs. Regardless of the method it is always a number between 0 and 100.

The first behaviour in Kiwi returns a percentage based on assetsLoaded / numberOfAssetsToLoad. This is the default behaviour in Kiwi.

state.preload = function() {

// Load your assets here...

};

state.loadProgress = function(percent) {

console.log( percent );

// Number from 0 - 100

// Calculated by: numberOfAssetsLoaded / numberOfAssetsToLoad

// Can also access it on the loader

console.log( this.game.loader.percentLoaded );

};

This is generally perfectly fine behaviour for majority of games, but it does not take into account the size of the files.

Calculating Sizes

The second behaviour returns the percentage based on the numberOfBytesLoaded / numberOfBytesToLoad. This behaviour is disabled by default. In order to calculate the size each file makes a XHR head request asking for the file details, and this has a performance overhead.

Although loading times maybe increased, this is offset by the fact that the number of bytes for the files will be calculated and each file will know how large it is.

state.preload = function() {

// Add your assets here...

// Tell the loader to calculate the file sizes

// Can be done at any point in the loader

this.game.loader.calculateBytes( true );

};

state.loadProgress = function(percent) {

console.log( percent );

// Number from 0 - 100

// Calculated by: bytesLoaded / bytesTotal

// Details can be retrieved off the loader

console.log( this.game.loader.bytesLoaded );

console.log( this.game.loader.bytesTotal );

console.log( this.game.loader.percentLoaded );

};

Parallel Asset Loading

Currently files are loaded in one after another in a queued fashion. File loading like this is common and in place for a number of reasons but unfortunately it can lead to long loading times.

In KiwiJS 1.2.0 we are happy to introduce the parallel loading feature which can really help!

state.preload = function() {

// Add your files here...

// Enable parallel loading

this.game.loader.enableParallelLoading = true;

}

When this feature is enabled, Files will attempt to load at the same time. This requires browser support, but should work fine with standard images.

The theory is that browsers are already great at managing loading of images and such, so why not let them do what they already do?

So give this feature a try and let us know how it goes!

Thanks for reading!

We hope you find the new features useful – and powerful. It might make a world of difference when loading your games!

Next time: the Entity Component System automates game tasks.

Hello from Kiwi.JS v1.2.0 “Williams”

Posted on January 27, 2015 by Ben Harding

Happy New Year from the Kiwi team! Today we are happy to release version 1.2.0 of Kiwi.JS, “Williams”.

This version of Kiwi.JS brings powerful new ways to build and automate game architecture. With a robust Entity Component System, more time controls, faster file loading options, a new debug logging system, unified color format, and more, we reckon you’ll be able to build some seriously pro games.

“Williams” is named in honor of Roberta Williams, creator of the King’s Quest series and one of the great adventure game designers. Where would modern gaming be without Williams? We’re big fans here.

You can download 1.2.0 of Kiwi.JS on github now.

New Features

Kiwi.JS v1.2.0 has several exciting new features. Some of these are so cool that we’ll be doing entire posts on them in the near future. Upcoming articles include:

Entity Component System
Robust Clocks and Better Animation
Kiwi.Log Debug System
Color System
Revised File Loading System

We’ve also made some smaller improvements that don’t merit their own article. We’ll explain those here.

Animation.onComplete

When an Animation is set to a single repetition, and it successfully completes that repetition, it fires a Signal called onComplete. This is useful for signalling the completion of a single event. It is different from onStop, which may fire upon completion, but will also fire if the Animation is interrupted.

Transform Performance Upgrades

GameObjects must have a Transform to set their position in space. Unfortunately, Transforms use matrix mathematics to do their thing, and this can be costly on low-end CPUs such as those in mobile devices.

We’ve streamlined the Transform process to make it 10-30% faster. In addition, we’ve supplied a couple of useful functions to squeeze even more power out of the Transform.

Transform.ignoreParent

By default, Transform will get a matrix from its parent. This allows the Transform to follow a parent through any transformation, as though it were part of the parent Transform. Set ignoreParent = true to disable this, gaining some performance back. The entity will still be able to transform, but it will not respect any parent transforms. This is useful if your entity is not part of a Group. Note that the State is also a kind of Group, so if your entity is a child of the State, and the State does not transform, ignoreParent = true is a great way to get a little more oomph.

Transform.locked

By default, Transform will update its matrix every frame. Set locked = true to disable this, gaining some performance back. The entity will be locked at its current transform. It will still respect parent transforms. This is useful for objects that don’t change often.

TextField.box

TextField now has a hitbox component. This hitbox is a clever estimate based on expected text dimensions. If you wish to add other components, such as physics or input, the presence of a Box will make it possible.

Game domParent can use CSS Selectors

When specifying the domParent in game options, you can now use CSS Selectors as well as DOM element ids.

Kiwi.Utils.Common.isBetween

Tired of writing long conditionals to figure out whether a number is within bounds? isBetween( x, min, max ) will do the heavy lifting for you. Note that it only returns true if x is genuinely between min and max; if x = min or if x = max, it is not between them and is thus false.

Pointer.pressed, Pointer.released

Pointer (and by extension Finger and MouseCursor) now have pressed and released properties. These are true only on the frame directly after the pointer is pressed or released. This was previously difficult to ascertain if you were creating your own input methods.

Camera.transformPointToScreen

You could already call Camera.transformPoint to transform a Point into world coordinates. With transformPointToScreen, you can go the other way. This will tell you where a Point in world space maps to the screen. This can be useful for ascertaining whether something is on screen, positioning HUD elements over game objects, etc.

Reassign Tween.object

There is now a setter that permits you to reassign Tween.object midway through a Tween. This will immediately stop updating the current object. The new object will inherit the current value of any tweening value. Any tweening value that is not present on the new object will be removed from the Tween. This could be useful for substituting one object for another midway through a Tween, as in a transformation sequence or an entity suffering battle damage.

TextField name

What’s wrong with “Textfield”? It’s not properly camel-cased: it should read “TextField”. We’ve added the correct name as an alias. Old code will still work, but new code may be written in a more pleasing fashion.

Release Notes

v1.2.0 "Williams"

New Features

Pro architecture tools out the wazoo
All Component objects on a Group or Entity will automatically update when the State updates. This permits a full Entity Component System. (#122)
Clock greatly improved (#143)
- Time can run at any rate, in any direction
- rate property available on clocks
- Animation, Tween, and TweenManager use new clock abilities
Animation has a Signal called onComplete which fires after finishing (#143)
Kiwi.Log added. This replaces and upgrades console.log functionality, with recording, tagging, and selective muting. It’s a big step up for debug! (#117)
Kiwi.Utils.Color object can record and output color values in a very wide range of formats, including RGB, RGBA, HSL, HSV, CSS color functions, and normalized or integer values. (#135)
File system is more flexible
- Parallel loading option for lightning-fast downloads
- Load files with easy-to-use parameters
- Easily manage state-specific files
Transform optimisations (#141)
- Improved performance
- Transform may be set lock = true to prevent updates and increase performance
- Transform may be set ignoreParents = true to save performance with objects whose parents don't update
TextField now has a hitbox (#137)
Game domParent parameter can now use CSS selectors (#131)
Kiwi.Utils.Common.between( x, a, b ) method added. It's much faster to check if something is between two numbers now. (#118)
Input.Pointers now has pressed and released getters, allowing you to see if a mouse or finger was pressed or released in the last frame only. (#115)
Camera.transformPointToScreen added, allowing you to translate world points to screen coordinates. This is the opposite of Camera.transformPoint. (#112)
You may now reassign Tween.object, transferring a Tween from one object to another. (#109)
State.loadProgress() can now estimate bytes loaded (#66)
Timer Helpers implemented. You can now call Clock.setInterval and Clock.setTimeout, rather than mess around with three or more calls to get the same effect. These helpers run on game clocks, and will respect clock manipulation and pausing. (#44)

Bug Fixes

XHR loading works with Nodewebkit where status codes are unavailable (#144)
Kiwi.Utils.Common.defaultToString is now in camelCase (#140)
TileMapLayer.getOverlappingTiles now works correctly with negative coordinates (#139)
Kiwi.Time.Clock.removeTimer works correctly (#138)
Audio objects now loop correctly after being paused and resumed (#132)
PluginManager now correctly allows requirements that match or exceed requested version number, rather than those that match or precede it. (#130)
Game prints the correct error message when no stage was specified, or an incorrect stage was specified. (#129)
Mouse events now include button data. (#126)
AnimationManager now calls onUpdate after changing cellIndex, ensuring that callbacks have more accurate data regarding cells. (#125)
StaticImage.objType() now reports "StaticImage" instead of "Sprite" (#119)
Spritesheet texture atlas correctly enumerates number of cells. (#116)
Timer resumes where it left off after being paused (#113)
File loader now correctly interprets files without extensions in CocoonJS (#106)

Deprecations and Removals

Textfield is deprecated in favour of TextField alias (#134)
Kiwi.Utils.Common.defaultToString is now in camelCase (#140)

Project Architecture

Switched to Typescript 1.4. Run npm update to upgrade your packages.

More details can be found on the Kiwi.JS repo under the 1.2.0 milestone

Rigid Body Physics System

Posted on November 25, 2014November 27, 2014 by Ben Harding

Physics! A fantastic and awfully complex feature which a lot of games use. And it’s just been made easier in Kiwi.

Today we are happy to announce the ChipmunkPhysics Plugin for KiwiJS. This latest plugin brings the processes of Chipmunk and Kiwi together, allowing you to create games which use the Chipmunk2D rigid body physics library.

Thanks to the fabulous people of Chipmunk2D and those who made a JavaScript port of it. Without them this plugin would not be possible.

Break-apart Kiwi: Example

Toggle the debug overlay with the button in the top left corner.
Click and drag a shape to move it.
Click on empty space in the center of the game to apply gravity.

You can obtain a copy of the plugin from Github. Further information can be found in the tutorial section.

We plan to add more features to this plugin in the future, such as Tilemap support, the possibilities of defining shapes in the Texture Atlas, and more as we think of them. So get in contact if you come up with a idea or would like to help out!

Let us know what you think!

Publishing to the Chrome Webstore

Posted on October 20, 2014October 13, 2014 by Ben Harding

header

If you’re like me and like to use Chrome as your web browser, or even if you don’t but want your games to get as many views as possible, then do I have some new documentation for you! We recently created some new docs on how you can publish games to the Chrome Web Store!

Investigating the Chrome Web Store

Investigating the Chrome Web Store is an introductory page which is designed to make you familiar with the key points of the store. Items discussed on the page include:

What is the Chrome Web Store.
Apps, Themes and Extensions, and which one is most useful for you.
Packaged vs Hosted Apps.

Of course it isn’t a page describing every single feature of the store. If we did that then the page would be a bit too long!

Preparing to Publish your App

This page describes what you will need to generate/create in order to publish an App to the Chrome WebStore.

Also included at the bottom of the page is a link to a ‘ready-to-use’ example app which you can download, and then upload straight to the Chrome Web Store to test out and see the files that are needed.

So have a read of these pages and get uploading your games to the Web Store ASAP!

Introducting the Fullscreen Plugin

Posted on October 16, 2014October 13, 2014 by Ben Harding

Hey Folks! Today we are introducing the latest plugin to Kiwi, the Fullscreen Plugin! This plugin uses the HTML 5 Fullscreen API to make your games use as much screen real estate as possible. That is pretty neat. So get started!

You can find the Fullscreen plugins repository here.

Information about how you can use the plugin can be found here..

Dressup Blueprint Updated

Posted on October 10, 2014October 8, 2014 by Ben Harding

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.

Recent Plugins

Recent Comments

Recent Posts

New Features

Bug Fixes

Adding Files to the Loader

Global Files

Tagging

Percent Loaded

Default Behaviour

Calculating Sizes

Parallel Asset Loading

Thanks for reading!

New Features

Animation.onComplete

Transform Performance Upgrades

Transform.ignoreParent

Transform.locked

TextField.box

Game domParent can use CSS Selectors

Kiwi.Utils.Common.isBetween

Pointer.pressed, Pointer.released

Camera.transformPointToScreen

Reassign Tween.object

TextField name

Release Notes

v1.2.0 "Williams"

New Features

Bug Fixes

Deprecations and Removals

Project Architecture

Break-apart Kiwi: Example

Links

To Note: