Booty5 v1.8.5b out now – Cached rendering and Marmalade SDK Audio Support

Well the proof is in the eating and not the making. I’ve spent some time putting together a small game using Booty5 called Leapo that I will eventually distribute as an example of how to use Booty5. Whilst developing this game I have come across various issues or missing features, hence this update.

Booty5 game engine changes:

  • Added new Actor setPositionPhysics() and setRotationPhysics() to set associated physics body position and rotation directly
  • Added new utils class that contains utility functions
  • Fixed actor and scene sorting using new sorting method in Utils called sortLayers()
  • Added new property to TheApp called use_marm which should be set to true if deploying to mobile using the Marmalade SDK
  • Added new property to Sound constructor called reuse which can be used to force the sound effect to be reused (only useful for short sound effects at may not play if one is already playing)
  • Added new stop / pause methods to Sound class, only usable with reusable sounds
  • Sound class will now use the powerful Marmalade audio system instead of standard, if its available
  • Added new method TheApp.parseAndSetFocus(scene_name) which parses xoml JSON and sets the named scene as the current scene
  • TimelineManager.add() now returns the timeline that was added
  • Scene.addActor() now returns the added actor
  • Actor.addActor() now returns the added actor
  • TheApp.addScene() now returns the added scene
  • ParticleActor.addParticle() now returns the added particle
  • Main loop timer replaced with requestAnimationFrame for smoother rendering
  • TheApp now measures average frame rate via avg_fps property
  • TheApp has new property called adaptive_physics which will run physics update multiple times within a single frame if frame rate falls considerably outside target frame rate
  • Actors can now all be cached by setting cache property to true. When cached the actor will be rendered only once to an off screen canvas, subsequent rendering will be of the cached version. note that the Size of the actor as specified by its properties will determine the size of the cached canvas area. In the case of unfilled actors, the allocated size will be slightly larger to allow for stroke thickness. Note that shadows and composite operations are not cached

Booty5 game editor changes:

  • ExportName Scene property is now saved and restored correctly
  • Load scene property now cloned correctly
  • Target frame rate now exported
  • Fixed main.js for Marmalade SDK export, also now copy wb.js over from SDK into build folder
  • Marmalade native audio will be used in place of standard audio if available
  • Added new property to Sound resource called reuse
  • Added new project property called Adaptive Physics which can be used to run physics multiple times per game update
  • Unfilled rounded rects with corner radius now render properly
  • Actors can now be marked as cached which causes them to be rendered once to an off screen canvas
  • Added new measure button next to size property in properties panel, this will set the actors size to the extents of any attached geometry
  • Exported main.js will now wait until resources are loaded before starting TheApp

Whilst all of the above changes are a positive, one of the more important changes includes caching of actors for rendering. HTML5 is not particularly fast (especially on mobile) at rendering things like gradients and shapes. Actors can now be marked as cached which will force them to be rendered once to an off-screen surface, subsequent renders will render the cached version. When deployed via Marmalade Web I am seeing a good 30-60 fps frame rate for Leapo on an iPhone 5C.

You can download Booty5 HTML5 game maker for free from here

Booty5 v1.8.4b the free HTML5 game maker out now, support for the Marmalade SDK added

I realise that two updates inside of a week is a bit much but I wanted to get this update out quickly because I have changed the way gradients are used by game objects substantially, I’ve also added project generation for the Marmalade SDK using Web Marmalade. Web Marmalade is a system that enables you to package your HTML5 games / apps into a native app for a variety of different mobile phones and tablets, allowing you to submit them to the app stores. Web Marmalade also provides access to native device specific features. To export a Marmalade compatible project simply go to the Project Settings, select the Marmalade tab and tick the “Export MKB” option then either run or test the project. This will generate a project in the marmalade sub folder inside your project folder. You can import this file into the Marmalade Hub and then deploy your HTML5 game as a native app to a device or run in the simulator to test.

Changes for this release include:

  • Replaced gradient angle with gradient start / end vectors
  • Labels can now use gradients
  • New Marmalade properties section added to project properties which enables a Marmalade SDK compatible web application to be exported

Changes to the editor include:

  • Added support for gradients to unfilled shapes
  • Removed gradient angle property and replaced with gradient start and gradient end points
  • Added support for text gradients
  • Moved gradient style creation out of Xoml class and into Gradient class

You can download Booty5 for free from the Booty5 web site

Booty5 the free HTML5 game maker 1.8.3b is out now

Booty5 is a free HTML5 game maker, for more information visit the Booty web site

Been very busy since the last update extending the features of Booty5 to bring more HTML5 specific features into the editor. The editor changes for this release include:

  • Added mouse wheel joint type to list of joint types
  • Added new property called ExportName to Scene, this changes the name of the scene, but not its exported file name
  • Added support for corner radius to rects enabling rounded rects
  • Added support for none filled polygons, arcs, rects and labels
  • Added support for stroke colour and thickness
  • Layers are now exported and used by engine
  • Added support for shadows to all actor types
  • Added support for composite operations
  • Added support for Scene OnKeyPress, OnKeyDown and OnKeyUp events
  • Added new gradient brush type and gradient editor
  • Actors can now render gradient brushes at any angle

Engine changes:

  • Added support for wheel joint
  • Added panning property to Scene to determine when the scene is being touch panned
  • Box2D begin and end contact callbacks now call both objects that were affected
  • Added corner_radius property to rectActor to render rounded rects
  • Added support for stroke colour and thickness to rect, arc, polygon and label actors
  • Added support for scene and actor layer ordering. Set layer via _layer property and not layer variable to ensure that re-sorting takes place
  • Added new shadow properties all actor types (shadow, shadow_x, shadow_y, shadow_colour, shadow_blur)
  • Added support for composite operations to actors
  • Added support for Scene onKeyPress, onKeyDown and onKeyUp events
  • Added new Gradient class that handles gradient brushes
  • Rect, Arc and Polygon actors can now render gradient brushes at any angle, angle is specified by new grad_rotation property
  • Added new demos keys, mouse joint, bitmap animation, shapes and gradients

The idea is with this last crop of changes is to bring in more HTML5 and SVG style specific features such as support for keys, gradient brushes, rounded rects, shadows amd so on. Here are a couple of screen shots showing some of the new features:

Booty5 HTML5 gradient editor Booty5 HTML5 gradient editor Booty5 HTML5 shapes example Booty5 HTML5 shapes example




Booty5 HTML5 Game Maker v1.8.2 out now

Much hammering and tightening has been under way of late, Santa and his helpers have nothing on how many hours have been put into getting 1.8.2b ready for release! :)

Ok, enough about Santa, version 1.8.2b of Booty5 the Game Maker for HTML5 developers is now available for download.

Changes for this release include:

  • Added brush background preview to Actor properties panel
  • Added ability to select shapes, actors, images and brushes across all property panels
  • Added shape editor
  • Added shape bitmap tracer and polygon shape mesh optimiser
  • Concave fixtures are now exported as multiple convex fixtures
  • Fixed crash that occurs after dragging an image into scene, deleting it then clicking on its generated brush
  • Fixed issue when saving a project for the first time using the Save button
  • Fixed issue where changing actors geometry was not being updated properly

The most notable change for this release is the addition of a shape editor which enables you to create / edit shapes that can be used for clipping, actor visual representation and physics fixtures.

The shape editor also supports auto tracing of bitmaps to generate optimised meshes, which are exported as sets of convex fixtures for physics.

Another new cool feature is the ability to select many components using a list of selections. For example, you no longer have to type the name of a fixture shape in directly, instead you can select it from a list.

Here are a couple of new screen shots:

Booty5 HTML5 shape editor

Booty5 main HTML5 game editor

Hope you all enjoy the new features and fins them useful. Don’t forget to drop a line into the community forum if you want to leave feedback

Booty5 HTML5 game maker now available for free download

Booty5 HTML5 Game Maker

Booty5 HTML5 Game Maker

Its taken many months of pain staking development and quite possibly a mountain of coffee but it is finally here. Booty5 the 2D HTML5 game editor and engine (a game maker) is now available for download

Booty5 enables you to produce HTML5 based games and apps for mobile and desktop using a WYSIWYG game editor.

Booty5 HTML5 game maker screenshot

Booty5 HTML5 game maker screenshot

Booty5 v1.3 the free open source HTML5 game engine now available

More happy coding evenings and weekends for me means more juicy features for you. Well, that’s a bit of a fib, the latest version 1.3 is more of a tidy up and documentation phase. I’ve spent a few hours each evening this week putting together the Booty5 introduction and the Booty5 API reference and along the way I ended up tidying up the source code. By the way, did I mention that the minified version of Booty5 without Box2D functionality is only 50k!

v1.3 changes:

  • Added more comments
  • Actor setters now only dirty transform if a change is made
  • Actor.findActorDeep() removed
  • Actor.findActor() has additional parameter that allows recursive searching
  • Actor.sendToBack() added
  • Actor.addFixture() now returns the created fixture
  • Actor.addJoint() now returns the created joint
  • Scenes now active property which can be used to pause processing
  • Scenes will now still be processed when not visible
  • Scene.findActorDeep() removed
  • Scene.findActor() has additional parameter that allows recursive searching
  • Scene.sendToBack() added

I’m hoping to have full support for Booty5 in the up and coming next beta release of the Goji Editor, so watch this space.

Booty5 the free open source HTML5 game engine has big update

That’s right, I’ve been busy coding away like a mad man to bring you a huge update to Booty5 the free open source HTML5 game engine which is available for download on Github.

Changes include:

v1.2 Changes:
* GSAP dependency removed
* JQuery dependency removed
* Support for actor hierarchies added
* Support for physics joints added to actors
* Opacity for actors and scenes added
* Actors now support 3D depth property
* Actors now have support for onCreate and onDestroy event handlers
* Actors now support box, circle and polygon shaped fixtures
* Fixtures can now be marked as sensors
* Actors and Scenes can now clip their children against box, circle and polygon clipping shapes
* Actors and Scenes now have separate active and visible states
* Actors now have a simple physics system that is used on Actors that are not under control of Box2D
* Actors can be docked to the edged of the display as well as to the edges of canvas actors
* Actors can now ignore scene camera movement
* Actors now support onCollisionStart and onCollisionEnd events
* Child actors can now bubble events up to parents
* Scene camera can track actors
* Scenes now support touch panning
* New actor types added:
* ArcActor – Displays arcs / circles
* CanvasActor – A UI actor that can arrange, scroll around and dock its content
* ParticleActor – An actor that is a particle system
* Polygon Actor – An actor that displays polygon shapes
* RedctActor – An actor that displays rectangle shapes
* Support for timeline key frame based tween animations added
* Support for various types of resources added on a global or scene local level, including:
* Shapes – Used by clipping and physics systems
* Geometries – Used by rendering system to render geometries
* Brushes – Used to create sprite atlases / bitmap animation
* Sounds – used to play back audio
* Materials – Used to define physics materials
* Full support for the Goji Editor added, including XOML loader

I’ve also started documenting the engine and API at

Booty5 – Free HTML5 Game Engine

I’ve finally branched out into HTML5 game development, I’ve been avoiding it for years but finally took the plunge. Funnily enough my first creation with HTML5 is the Free Games Bandit, a service to help game developers get their mobile games noticed. I found myself actually enjoying working with JavaScript, CSS and HTML5. I’ve changed my whole mindset regarding HTML5, where I once saw it as a tool for creating gimmicky web site widgets I now see it as a valid way to make games and proper slick interactive web sites.

With the previous paragraph in mind I have begun the long journey of creating an HTML5 game engine, which I have randomly named Booty5 and is hosted on Github. I’ve already made some headway putting together the basics of scene / actor management, support for sprite atlases / sprite animation, Box2D physics and animation via GSAP etc..

My plans for the engine in the future are to support a majority of features from the AppEasy Core SDK. I am also in the process of extending the Goji Editor to enable support for building, testing and deployment of HTML5 games.

You can find out more about the free game engine here

HTML 5 Gotchas

On this page I will place all of the gotchas that I come across during my HTML 5 developments.

IndexSizeError: Index or size is negative or greater than the allowed amount

I got this error Firefox and a similar error in Internet Explorer whilst drawing an image to the HTML 5 canvas using drawImage(). The problem turned out to be trying to draw a portion of an image that was outside its bounds. I was drawing what I thought was an 800×600 image, which was actually 798×600 so the source rectangular area that I was drawing was off the edge of the actual image. Doh!