Booty5 HTML5 Game Maker Update – Support for Facebook Instant Games Added

Facebook Instant Games Support

Finally released the latest version of Booty with support for Facebook Instant Games. Within the Booty5 engine you will find a new class called Instants which is a small wrapper around the Facebook Instants SDK. Games exported from Booty with Instants enabled in the settings will automatically initialise the Facebook Instants SDK and download all preloaded global resources, note that you will need to download any scene local resources yourself after the main download.

To make your project Facebook IG compatible simply tick the Facebook Instants check box in the projects settings then enter the local launch URL into the Host box in project settings, e.g:

https://www.facebook.com/embed/instantgames//player?game_url=https://localhost:8080/

Dragon Bones Animation Support

Unfortunately you cannot edit Dragon Bones animations within the Booty5 editor but you can add the associated PNG, skeleton and atlas JSON files that are exported from Dragon Bones to the editor as resources and access them from within code, e.g:

// Parse dragon bone data
var factory = dragonBones.b5Factory.factory;
var skel = JSON.parse(b5.Utils.resolveResource("my_skeleton", "raw").data);
var atlas = JSON.parse(b5.Utils.resolveResource("my_atlas", "raw").data);
factory.parseDragonBonesData(skel);
factory.parseTextureAtlasData(atlas, b5.Utils.resolveResource("my_texture", "brush"));

// Create an actor containing the dragon bones armature and attach it to a parent actor
var dba = factory.buildArmatureDisplay("name");
dba.animation.play("anim");
dba.x = 0.0;
dba.y = 0.0;
ParentActor.addActor(dba);

I will in the near future wrap the above into the engine / editor to make it more readily accessible, as well as add the same support for Spine.

Other Stuff

The editor has had a whole host of bug fixes and additional changes to keep pace with the Booty5 game engine. See the Booty5 game engine for more details on those changes.

Upcoming Demos and Documentation

Over the next few days I will be releasing the full Booty5 projects for some of my recent Facebook Instant games so you can use these as a reference / starting point. These games cover many areas of the Facebook Instants SDK including displaying ads, using in-app purchases, submitting leaderboard scores, grabbing and displaying leaderboard entries, inviting other players to play, sharing progress, switching contexts and posting updates to Messenger.

The following full projects have been uploaded thus far:

You can grab the latest version of the Booty5 Game Maker from the Booty5 website.

I am still in the process of updating documentation, I will post details here once that is finished.

Booty5 HTML5 Game Engine Update out – Facebook Instant Games Support Added

It’s been a long long while since I put an update to Booty5 out so I thought it time. I have been playing around with Facebook Instant Games over the last few months so I added support for Facebook Instant Games to the Booty5 engine. You will find a new utility class called Instants that wraps up the Facebook Instants SDK. This has been tightly integrated into the loader for the Booty5 game editor. I will be releasing the updated version of the Booty5 editor with direct Facebook Instant Games export support very soon. Along with that I will be releasing the source to some of my games to help developers learn how to use the new features more easily. The complete list of Booty5 engine changes (v1.5.5) include:

  • New hit property added to Actors. If true then will be included in hit testing
  • New dock_screen property added to Actors. If true then docking will be to screen edge instead of scene edge
  • New padding property added to Actors. Text padding (used when caching)
  • New scale_method property added to Actors. Scale method used to fit actor to screen
  • New draw_reverse property added to Actors. If set to true children are drawn in reverse order
  • New _av property added to Actors. This will set active and visible states at the same time
  • New method removeAllActors added to Actor which removes all actors from the actors child list
  • New getSlot and moveToSlot methods added to Actor which allows you to query a child sort index and modify it
  • New overlapsRect method added to Actors which checks for a rect area overlapping the Actors rect area
  • New circleOverlaps method added to Actors which checks for a circular area overlapping the Actors circular area
  • New circleOverlapsRect method added to Actors which checks for a rect area overlapping the Actors circular area
  • New fullCircleOverlapTest method added to Actors which checks for a circular area overlapping the Actors circular area (taking into account transforms)
  • New stroke_filled property added to all Actor types which if true will cause stroke will be drawn
  • New line_height property added to LabelActor which specifies the height of a line of text
  • New _text property added to LabelActor which sets the labels text and updates its cached version if cached
  • New deactivate property added to Animations. When set to true deactivates and hides target actor when its done (default false), should only be used with actors
  • Many new easinng funnctions added to the animation system
  • App canvas_width and canvas_height now known as design_width and design_width
  • Fonts now added to the app as resources, the underlying font loaded uses the FontObserver lib to load fonts
  • Raw JSON resource type now added to the App
  • New started property added to the App which is a callback that will be called when the app starts
  • All App resource containers are now objecsts instead of arrays
  • App waitForResources now calls a supplied callback to alert the user of progress during loading
  • App main logic loop is now ran on requestAnimationFrame
  • New draw_reverse property added to Scenes. If set to true children are drawn in reverse order
  • New _av property added to Scenes. This will set active and visible states at the same time
  • Added new Task type called TaskQ which is a collection of tasks that are ran serial. Only the first task in the queue is ran, once that tasks is complete the next task in the queue is ran.
  • Resources now checked for load failure and attempt to reload a number of times before giving up
  • Value passed to Actor _atlas can be an atlas object or the name of an image atlas brush
  • Calling playAnim or playTimeline on an inactive or invisible Actor will make activate it and make it visible
  • Hit tests are no longer carried out on inactive Actors
  • Fixed Actor _scale property so that it now updates the main transform
  • Fixed virtual Actor margins
  • Action lists are now optional component and not included by default
  • Support for Facebook Instant Games added

Please note that this version of Booty5 may not be completely compatible with your existing code so back up before trying it!

The complete source to Booty5 is available on Github here.

I will update the game editor, documentation and e-book in the near future.

Oh I also have a Dragon Bones lib coming soon too.

Booty5 HTML5 Game Maker 1.9.3b out now – Droidscript support added

It has been a long while since I released an update of Booty5, but at last it is here. A good fellow over at Droidscript got in touch to let me know that they had added a plugin for their awesome app (check it out to see what I mean by awesome) which enables developers to develop games using the Booty5 API directly on an Android device and / or via a desktop browser, which to me is coolness of a higher degree. I had planned a release of Booty5 to push out the latest changes to the engine as well as support for texture packer trimmed bitmaps amongst other things so I went ahead and interfaced the Booty5 editor directly with the Droidscript app allowing games to be sent directly to Droidscript and played on the device. This provides a very rapid development environment directly on device.

The changes for this release include:

  • By setting the host in project settings to the wifi address supplied to you by the Droidscript app and checking the Droidscript checkbox, you can run your projects directly on a connected Android device
  • Updated to the very latest Booty5 engine which includes support for features like tasks, events and smaller exported scene data
  • Open in IDE no longer opens in WebStorm by default, instead Visual Studio Code is used
  • Projects no longer deploy separate source files, instead booty5_debug.js or booty5_min.js are deployed
  • Socket.io can now be exported with projects
  • New export location added to project properties that allows you to specify where deployed files will go when running / testing
  • Host project property added which allows deployed projects to launch a specific host url when running / testing
  • Added two new canvas fit modes, Fit Greatest / Fit Smallest
  • Added Body and Head properties to project properties, additional html can be added here to be exported in the body and head sections of the html file
  • Added nodejs command prompt button
  • Fixed crash bug when creating a label with no font
  • Added animation sets to brushes
  • Removed animation frames, start frame and playback speed from actors, you now specify the animation name to play as default
  • Get actor size will now get brush size if no geometry attached

Note that the Booty5 plugin for Droidscript is currently in beta (see the beta group for more details.)

The manual and API documentation have also been updated so please don’t forget to view / grab them.

The changes to the Booty5 engine v1.5.2 include:

  • Added support for events and event notification (see b5.EventsManager)
  • Added support for tasks (see b5.TasksManager)
  • Added support to brushes for animation sets
  • Added support to actors for working with brush animation sets (see b5.Actor.playAnim)
  • Bitmap based actors now support trimmed atlas images
  • Image based actors that use an atlas will use the size of the atlas frame, can be overridden by setting ignore_atlas_size to true
  • Removed support for web Marmalade
  • All booty5 scene data is now loaded into the b5.data space instead of window
  • Xoml data property names have been minified to greatly cut down Xoml datas format storage size
  • Added polyfill for RequestAnimationFrame to support older browsers
  • Some examples have been updated to fix various issues

Booty5 is a free Javascript based HTML5 game engine available on Github and a fully fledged game / app editor available for free. See the Booty5 HTML5 game maker website for more details.

Happy coding, don’t forget to leave feedback and report issues on Facebook / Google+ etc…

Booty5 HTML5 Game Maker 1.9.2b out now – Web Audio API Support Added

Support for the Web Audio API has been added offering better control over audio playback. Using it is s simple case of ticking support for it in the projects properties (on by default).

Full list of changes include:

Game Editor v1.9.2b:

  • Added new use web audio export option to project settings
  • Added new auto play property to sounds which cause sound to automatically start playing once loaded
  • Added new export option force_round which will force all exported actors to use pixel rounding
  • Fix: Project property smoothing is now applied in exported code
  • Fix: Canvas centering on some mobile devices

Game Engine v1.4.8 and 1.4.9:

  • b5.Xoml.loadJSON now accepts 4th parameter which can be used to stipulate loaded data should be returned as binary buffer
  • b5.App.use_web_audio property added which can be used to switch on support for Web Audio if it is supported
  • b5.Xoml.loadJSON moved to b5.Utils.loadJSON
  • b5.Xoml.loadJS moved to b5.Utils.loadJS
  • Added support for web audio API to sound (default is enabled). To disable Web Audio set b5.App.use_web_audio to false. If web audio is not supported then it will fallback to HTML5 Audio
  • b5.App constructor now accepts a second parameter which enables / disables web audio support
  • Added b5.Sound.auto_play property to enable auto playback of sounds after they are loaded
  • JSDoc documentation added
  • b5.App.canvas_fill_window removed
  • Modified how the render scaling and canvas resizing works to make it easier to use.

Download the latest version of Booty5 HTML5 Gama Maker.

Booty5 HTML5 Game Maker 1.9.1b Available – Text preview and collision flags

Booty5 the HTML5 Game Maker v1.9.1b is now available for free download.

Editor Changes:

  • Scale and angle are now affected in multiple actor selections
  • Editor export properties now supports smoothing property that will enable / disable anti-aliasing during rendering
  • Added support for rounding pixels to actors, if disabled then pixel coordinates will be rounded to integer values, can improve performance but at a cost of lower precision rendering
  • Removed some currently unused options from sprite and label
  • Font size and face separated in labels
  • Font weight added to label
  • Editor now shows text preview
  • Exported collision flags are now used by engine
  • Added vertices snap to shape editor
  • Added new Collision Flags example
  • Fix: Convex shapes were not exporting correctly
  • Fix: Some properties such as actor scale were not exporting correctly with an export precision of 0

Engine Changes:

  • Added new property to Actor called round_pixels, when set to true vertices will be rounded to integer which can speed up rendering significantly
  • Added support for collision flags to physics fixtures (category, mask and group index)

The Booty5 HTML5 game manual ebook has also been updated.

Booty5 v1.8.9b now available – Code restructure and Actions Lists

Booty5 1.8.9b out NOW

Booty5, the HTML5 Flash Like Game Maker

Booty5, the HTML5 Flash Like Game Maker

Booty5 1.8.9b represents a big shift towards making the Booty5 JavaScript engine more modern, a number of major changes have taken place to the engine including:

  • Code restructured
  • All classes moved into the b5 namespace
  • TheApp class renamed to App
  • window.app replaced with b5.app
  • Added new property to App called canvas_fill_window which when set to false will prevent the canvas from being resized to fit window
  • Added support for sequential and concurrent actions to app, actors and scenes via ActionsListManager and ActionsList classes
  • Large collection of pre-defined actions added:
    • A_ChangeActions
    • A_CreateExplosion
    • A_CreatePlume
    • A_ChangeTimeline
    • A_AttractX
    • A_AttractY
    • A_Attract
    • A_Sound
    • A_CamStopMove
    • A_CamGravity
    • A_CamMove
    • A_CamMoveTo
    • A_CamFollow
    • A_CamFollowPath
    • A_CamFollowPathVel
    • A_CamLimitMove
    • A_Wait
    • A_SetProps
    • A_AddProps
    • A_TweenProps
    • A_Call
    • A_Create
    • A_Destroy
    • A_FocusScene
    • A_StopMove
    • A_Gravity
    • A_Move
    • A_MoveTo
    • A_MoveWithSpeed
    • A_Follow
    • A_LookAt
    • A_FollowPath
    • A_FollowPathVel
    • A_LimitMove
    • A_SetLinearVelocity
    • A_SetAngularVelocity
    • A_ApplyForce
    • A_ApplyImpulse
    • A_ApplyTorque
  • Actor.setPositionPhysics() deprecated, use setPosition instead
  • Actor.setRotationPhysics deprecated, use setRotation instead
  • Moved getResFromType() out of App and Scene classes into common Utils class
  • Added new Utils.findObjectFromPath() and Utils.resolveObject() which can be used to find actors, scenes, action lists and timelines from a path such as gamescene.actor1.timeline1
  • Added new Utils.findResourceFromPath() and Utils.resolveResource() which can be used to find resources from a path such as gamescene.sound1
  • Added new _atlas, _bitmap, _clip_shape properties to Actor that can use resource paths as well as instances of resources
  • Added new _clip_shape property to Scene that can use resource paths as well as instances of resources
  • Added new _focus_scene and _focus_scene2 properties to App that can use resource paths as well as instances of resources
  • Added vx_damping and vy_damping to scene camera
  • Updated Xoml.js to load new actions lists from Booty5 editor exported JSON format
  • generateExplosion, generatePlume and generateRain now also accept string version of type
  • Logic and rendering decoupled. Logic (app.mainLogic) now ran on timer at default 60 fps whilst and rendering (app.mainDraw) at max frame rate
  • New Actions example added
  • Fix: Animation.Update() locks up when only a single key frame is specified
  • Fix: “none” rescaling method was not working correctly
  • Fix: Box2D forces applied in Actor OnTick were not being applied

Booty5 game maker editor changes v1.8.9b include:

  • Added new property to project section called Fill Window which when set to false will prevent the canvas from being resized to fit browser window. Setting to false is useful if you have a canvas that fits in vertically with other page content as no borders will be shown.
  • Updated events editor
  • IsPath added to Shape properties, which can be used to mark shapes to be used as paths
  • Added actions system and Action List editor to Actors and Scenes
  • Project property Frame Rate now exported
  • Fix: Proportional origins were not working
  • Fix: “Wait for resources” project option not saving correctly
  • Fix: Attempting to export a project that has a brush that points to an image that is not present on disk crashes

Build Flash Style HTML5 Games with Booty5

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

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

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

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