Booty5

Build Flash Style HTML5 Games with Booty5

drmop

The latest version of Booty5 the free HTML5 game maker now has support for creating Flash like animations, enabling web developers to create Flash like games across mobile and desktop browsers using an easy to use WYSIWYG game editor. A screen shot of the editor in actions is shown below:

Booty5, the HTML5 Flash Like Game Maker

Booty5, the HTML5 Flash Like Game Maker

View a demo that was creating in less than 30 minutes here.

More details about this release of Booty5 and to download go here.

Booty5 1.8.6b out now – audio fallback, templates, merged caches

drmop

Engine Changes:

  • Added new property to Actor called merge_cache which when set to true will attempt to merge the actors rendering into a suitable parents cache. Note that once an actor has been merged into its parent its visual properties cannot be modified
  • Add new property to TheApp called focus_scene2 which sets a 2nd scene as focus, this scene will be used for touch events if the first main focus scene does not respond to them
  • Added support for fallback sound to Sound class via location2
  • Added new min_panning property to Scene. This will prevent panning being marked as true if the movement distance squared is below this value
  • Sound now supports looping via Sound.loop
  • All Xoml parse functions now return the created object
  • New Xoml.findResource() added which searched a Xoml resource collection for the named resource
  • Fixed issue where Actor.current_frame was going out of bounds
  • Fixed polygonActor gradient fill
  • Examples updated
  • New “Create Objects from Template” and “List Menu” demos added

Editor Changes:

  • Added new property to Icon / Label called merge_cache which when set to true will attempt to merge the actors rendering into the a suitable parents cache
  • Scene Current property has been renamed to the more appropriate “Has Focus”
  • Scene has new property called Secondary Focus which sets a 2nd scene as focus, this scene will be used for touch events if the first main focus scene does not respond to them
  • Added new “clone to all scenes” menu action which will clone an Icon / Label to all scenes
  • Added new “delete from all scenes” menu action which will remove all Icons / Labels from all scenes that share the same name as the selected item
  • Added new “copy to scene” menu action which will create a copy of the selected actor and copy it to the selected scene
  • Added new “bring to front” and “send to back” commands to resources tree view
  • Added new resource view text size change buttons which can be used to increase / decrease font size
  • Added new Disable Shadows property to project properties. Setting to true will disable export of all shadows for all actors
  • Added fall back audio file to sound properties, this file will be loaded if original one fails to load
  • Added new loop property to sound which enables audio to be looped
  • CocoonJS added to list of additional API’s (see project properties)
  • Fix: Stopped menu appearing when pressing right mouse button on canvas
  • Fixed bug that generated invalid JSON when exporting label children

more details about these changes can be found at the Booty5 blog

Goji Game Maker for Marmalade v1.8.5b out now

drmop

As a small Christmas gift I have decided to port some neat Booty5 changes over to the AppEasy Core and Goji Editor. I’ve listed the changes to 1.8.5b below:

  • Added new “clone to all scenes” menu action which will clone an Icon / Label to all scenes
  • Added new “delete from all scenes” menu action which will remove all Icons / Labels from all scenes that share the same name as the selected item
  • Added new “copy to scene” which clones the selected actor into a new scene
  • Added support for filled / unfilled ellipses and rects / rounded rects
  • Added new Filled, CornerRadius and Thickness properties to actors
  • Updated actors to support bitmap animation frames, actor properties now support frames property which can be use to change default frame order
  • ImageActor XOML tag has new Filled (bool) property which specifies the filled / unfilled status of an actor, unfilled will be drawn with a border
  • ImageActor XOML tag has new CornerRadius (float) property which can be used to specify the corner size of a rounded rect (note that RenderAs must be set to 2) to force actor to be rendered as a rect
  • ImageActor XOML tag has new Thickness (float) property which specifies the border thickness for actors that are rendered unfilled
  • ImageActor XOML tag has new RenderAs (int) property which specifies how the actor should be rendered, 0 – normal, 1 – render as an arc and 2 – render as a rect / rounded rect
  • ImageActor XOML tag has new PlaybackSpeed property which specifies how quickly any attached bitmap animation will play back
  • ImageActor XOML tag has new AnimFrames (array of its) property which specifies the order in which bitmap frames are played back
  • Brush XOML tag has new RectFrames property which is a list of x,y,w,h rect frames that can be used to assign bitmap animations to actors

The most exciting changes (for me at least) are the addition of support for rendering arcs, rectangles and rounded rectangles, these can be filled with solid colour / bitmaps or rendered with an edge stroke that can also be solid colour or bitmapped. I found that these objects come in very useful when it comes to UI. If you look in the actors property panel in Goji you will notice a new “RenderAs” property. Changing this enables you to tell the engine to override the default rendering to render the actor as an arc or rect. Additional properties have been added to allow you to specify properties such as corner radius for rounded rects and thickness. If you are interested in seeing the code that generates these shapes then take a look in CzGeometry.cpp.

Another addition that I decided to port across was bitmap brush animations. Its awkward having to set up bitmap animations in XOML so I made it easier. You can now add individual rectangular frames to a brush to create an animation (Goji shows a preview of the animation). Once the brush is attached to an actor an as long as the Playback speed is set to something other than 0 then the animation will play. You can also override the order in which animation frames are played by setting your own animation frame indices in the Anim Frames properties box.

 

 

 

 

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

drmop

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

Goji Editor v1.8.4b out now

drmop

The Goji editor has had a new update today, mainly to bring the features more in line with Booty5. Changes include:

  • Added Support for ALT Tab to switch between previous / last resource
  • Added image preview to Icon background property
  • You can now select most resources directly in the object properties panel
  • Added shape editor
  • Added shape shape bitmap tracer and mesh optimiser
  • Concave fixtures are now exported as multiple convex fixtures
  • Changed code editor font to fixed size
  • Fixed actor insert crash bug
  • Fixed script / image auto reload
  • Fixed main canvas scaling
  • Fixed various export options
  • Fixed geometry not updating correctly bug
  • Fixed auto shut down of editor when clicking close button on are you sure dialog
  • Fixed deployment with Marmalade free license

    • Main changes relate to usability / productivity, just making things a little easier to use. Also the addition of the shape editor makes it possible to create physics shapes and geometries within Goji, avoiding the need for an additional shape editor.

    You can download a free copy of the Goj Game Editor here

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

    drmop

    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

    drmop

    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

    drmop

    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

    drmop
    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