Streaming League of Legends on Twitch.tv and Twitch extensions

Twitch.tv Logo

Twitch.tv Logo

Recently two family members have started streaming their gaming on Twitch.tv. They currently stream a game I love to play but am terrible at so prefer to watch :D . That game is League of Legends (I’m a lowly silver player, these guys are Diamond level players). if you like to watch gaming streams you should check them out, they’re pretty entertaining pair.

DDarkBlu on Twitch.tv (Support main)
Hastams on Twitch.tv (AD carry main)

I hang around in the streams and chat from time to time.

Anyway the point of this blog is to mention that it got me interested in streaming and streamers. I have discovered that Twitch.tv have an extensions API. I’m currently analysing the APi to find ways in which I can integrate it into the IGX SDK. This will enable developers to deploy their Facebook Instant Games straight to Twitch with little to no modification. Twitch.tv enables monetisation of your extensions via a currency called bits which seems interesting, so plenty of scope for earning money fellow developers.

The IGX SDK is a wrapper for the Facebook Instant Games SDK that enables you the developer to deploy your games and apps to web (mobile and Twitch.tv support coming soon) with little to no code changes, helping you maximise visibility and monetisation.

MEME arrives on Facebook Instant Games platform

So I got bored with writing games for Facebook Instant Games for a bit and decided to jump on the entertainment app (NO THEY ARE NOT GAMES :D ) train that seems to be doing well on Facebook Instant Games right now. I wrote a MEME generator / creator that lets users create their own MEME’s and share them to their timelines. The user can generate around 900 different MEME’s with over 500 different backgrounds. They can customise the text, text size, colour and even sign them. I don’t hold much hope out for it doing well, but its just something that I really wanted to create and really just a stepping stone to much larger more involved entertainment apps.

Coming to web and native mobile using the IGX SDK very soon.

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