From Unity 3D to Facebook Hosted!

So I decided to have a go at getting one of my mobile games up and running on Facebook’s site, chatting to other game developers they warned me to steer clear as its a pain and it will eventually break when they change to the next API release etc… Of course I didn’t heed their advice and went ahead and gave it a try. The main reason being that Facebook now host game content for you, so you no longer need to host it on your own web site using up your own meagre bandwidth and best of all you do not need to buy and manage SSL certificates, whats not to like.

Exporting to Unity WebGL

So the first thing I did was export a build to WebGL gave it a quick test. However I didn’t like the Unity logo, app name or full screen button at the bottom of the screen so I opened up the exported index.html and commented out the following lines of html to remove them and provide a clean clutter free view of my game:

[sourcecode language=”html”]
<div class="logo"></div>
<div class="fullscreen"><img src="TemplateData/fullscreen.png" width="38" height="38" alt="Fullscreen" title="Fullscreen" onclick="SetFullscreen(1);" /></div>
<div class="title">Tens Junior</div>
<p class="footer">&laquo; created with <a href="http://unity3d.com/" title="Go to unity3d.com">Unity</a> &raquo;</p>
[/sourcecode]

Set the screen resolution

Ok, I wasn’t happy with the default screen resolution that Unity exported my game at so I changed it, taking into account that my game will be shown in a frame on Facebook, so I changed the canvas width and height in the Unity WebGL export settings dialog to 480×800. Lovely, it now fits on a 1080 display.

Create a Facebook App for your game

So I now have an app that I can submit to Facebook and have it hosted by them, the next thing to do is to go and create a Facebook app. To do that head over to the Facebook Developer Site and create an app. When creating the app ensure that you add the Facebook Web Games platform and in settings ensure that you have WebGL and Simple Application Hosting enabled. In general settings also ensure that you at least provide App Name, Email Address, Privacy Policy URL, App Icon (1024×1024) and select the Games category.

Uploading your game to Facebook to be hosted

In the Facebook Web Games section, locate the Simple Application Hosting section, just beneath that there is a link named “uploaded assets”, click that link, a new browser tab will open which takes you to the Manage Hosted Asset section, click the add and setup button to the top right then under Hosting Type select Unity (WebGL).

Now go to your Unity exported WebGL folder and zip up all the files, this should include index.html, TemplateData and Release folders, ensure that index.html is in the root of the zip. Go back to Facebook Manage Hosted Assets section and click the Upload Version button, select the zip you just created then upload. The file will show up as processing, after a while this will change to Standby, at this point you can push your app to production by clicking on the small Move to Production button (If you want to later replace the build with a new version, simply move the build back to Standby by clicking the Move to Standby button, delete the build then re-upload a replacement.

Once the build is live you can visit your app url (see the Facebook Web Games Page URL in the Facebook Web Games section of your apps settings). Visit this URL and you will be able to test the game. Note that your game will not go live however until it is reviewed by Facebook and approved.

Getting reviewed

I am quite lucky with my game because I do not require any extra permissions. The game only logs into Facebook, uses the players profile picture and shares the players progress via the share dialog. To get the ball rolling you need to click the Add Products button to left hand side of the screen in app settings then select “App Centre”, fill out a bunch of info about the app including short / long description, app icons / screen shots etc. Once that is added you can submit for review. Note that if you need any additional permissions such as publish_action then you will need to provide additional info during submission.

Finally don’t forget to make your app public (go to the App Review section of the apps settings and click the button at the top of the screen, this will toggle your app between live and development mode).

The end result can be seen by taking a look at Tens Maths IQ Challenge on Facebook.

Facebook now host Games up to 500MB!

I’m usually so busy that I miss cool stuff sometimes, anyway, I’ve discovered today that Facebook will now host WebGL (including Unity) and HTML5 game content for you for free. So gone are the days of having to host your own and get a SSL certificate etc.. There are some limitations however such as 500MB max content size, 500 max files and no use of scripting languages such as PHP. Still for most uses its great.

You would not believe how m any times I had to retype that last paragraph! My son gave me a gaming keyboard and after years using tghe same keyboard, its proving very difficult getting used to one with bigger keys!

Ok, more details about this cool new Facebook feature here

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…

The all new IndieDeveloper a social community for game developers

Do you love to make games?  Are you passionate about making games?  Do you want to find other developers just like yourself?  Well, I recently came across a new social community and resource for developers of all professional skill levels. You can join a community of independent game developers and find a collaborator, a team, a project, or just a new friend. Well what are you waiting for, see you over at IndieDeveloper, If you want to friend me, I’m user mrmop,.

 

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 HTML5 Game Maker 1.9 Available – Tiled Maps

Booty5 the HTML5 Game Maker v1.9.0b is now available for free download. Support for tile map rendering has been added to the engine, whilst support for tile map editing has been added to the game maker. A quick screen shot of the new tile map editor is shown below:

Booty5 HTML5 tile map editorBooty5 HTML5 tile map editor

Full list of changes include:

Game Engine v1.4.6:

  • Added new actor type called MapActor which can render tiled maps
  • Support added to Xoml for loading Booty5 game editor exported tile maps
  • Fix: Actor.vr wasn’t updating transform

Game Editor v1.9.0b:

  • Added support for tile maps (any sprite actor can now be changed to a tile map by changing RenderAs type to Tile Map)
  • Added pretty print export options that will export JSON in a tidy readable format

The Booty5 HTML5 game manual ebook has also been updated.

You will also need to replace all examples which can be downloaded from Github.

Free Booty5 HTML5 Game Maker Manual e-book now available

The first version of the Booty5 HTML5 Game Maker Manual e-book is now available for free download. Find out more on the Booty5 free e-book page.

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