Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

22. June 2012

 

Social games company Wooga have just open sourced their HTML5 game Pocket Island.  Youwooga-with-hosts can read the full Pocket Islands / Magic Land ( which used to be a Facebook App ) story right here.

 

If we are honest, after reading that I think they are putting too much blame at the feet of HTML and not enough at the feet of Facebook and themselves.  Additionally, in the few minutes I played, I saw a remarkably polished, pretty, *boring* game.  That said, I find that with most social games, so perhaps I am not the proper critic…

 

PI

 

Anyways, the end result is a good one for the rest of us.  The source is now up on Github. I don’t know about you, but I always jump at seeing commercial source code when the opportunity presents itself.

 

The tool chain required does seem a bit… complicated though.  brew, ruby, gem, rake, markdown, gcc, node, lessc, jslint, spritoia and pngcrush.  That said, ive never done an ounce of Ruby programming, so perhaps this is par for the course in ruby development.

 

Good on Wooga for sharing.  Perhaps nicest of all, the art assets have all been included as well ( under the Creative Commons non-Commercial license ).

News

21. June 2012

 

A few weeks ago, I mentioned that I might put together an HTML5 Roleplaying game tutorial and inquired how much interest there was in the subject.  There was sufficient interest, so I dove into the subject a little bit closer and came to a bit of a conclusion.  It’s ultimately theHTML-5-RPG tools that make the game in this case.  So, in addition to a game, I would have to create an editor, which is actually where most of the guts would reside.

 

This presented an interesting problem for me, as I’ve done a lot of web development, I mostly worked server side in a traditional language like C# or Java.  For this project, I wanted it to be JavaScript end to end.  I have a few key requirements:

 

  • single language, end to end
  • server based editor, that can be run locally on the client
  • code reuse between game and editor
  • MVC/MVP or MVVM based.  ( if you don’t know these acronyms, don’t worry )
  • event driven
  • rich UI
  • run on a tablet’s browser
  • database and local/remote filesystem support
  • json-based level output, which can be used by clients in any language
  • game entity scripting, probably again, in JavaScript

 

Part of these requirements are driven by personal interest, I have always wanted to try making an MVC based game editor.  MVC means, model-view-controller ( MVP == model view presenter and MVVM == model view viewmodel ) and it is a manner of design for decoupling your data ( your game’s/editor’s objects ) from your view ( your application or webpage ).  There are a number of great advantages to implementing things this way, including testability, maintainability, reuse and perhaps most importantly, it imposes a clean separation of responsibilities between systems.

 

The single language end to end is an easy one.  JavaScript.  While JavaScript is by no means the best designed language in the world, it is a extremely well supported one with a very bright future.  It is increasingly becoming a language that every developer is going to need to know, so why fight the future?  Of course, I could use a slightly higher level implementation like Coffeescript, Closure or Dart, they all ultimately compile down to JavaScript in the end.  That said, one of the biggest reasons I want to use a single language from end to end, is so the most people can follow along without having to know or learn multiple programming languages, so I will probably go with plain Jane JavaScript.

 

Now the whole running on a server and locally, that presented a bit of a trick.  I want people to be able to follow along, and run it from their own computer for their own projects, so offline is a must.  However, I also wanted an editor available for people who are only interested in game side of the equation, which is why I want to host one on my server.  That said, I also don’t want to bog my own servers down too badly.  This presented a bit of a problem, but it was solved soon enough when I started looking into….

 

Database and local/remote file system support.  Behind the scenes, a lot of tools are actually built around a database, whether they realize it or not.  In the end, many tools end up creating their own crude database server around their own file format, or often XML.  In my view, this is awfully close to re-inventing the wheel.  If you are using database like functionality in your tool, use a database!  Fortunately when it comes to JavaScript, there are an absolute ton of options!  From redis, a simple to learn key/value based database and JSON based CouchDB to more traditional databases like MySQL and SQL Server.

 

HTML5 has some options when it comes to local storage, such as well… webStorage.  There are some pretty heavily limitations here, one of the biggies is the lack of support.  Size limits are also rather severe size limitations, in the area of 2.5-5MB, a limit that you will run into extremely quickly.  The alternative to persist these files on the server isn’t really appealing to me, when I am the one paying the server bills! Smile

 

This is where Node comes in.  Node nicely solves just about all of these problems.  Essentially I am going to develop the editor as a node based client/server, where the user has the option of installing the client and server locally, and running it just like any other application.  This gives me access to the local file system and whatever other libraries I need.  However, it also allows me to use the exact same code to provide a hosted version of the editor other users can simply run in their browser.  Essentially Node will act as the host for the DB, as a web server and as the interface between the local machine and the view.

 

Speaking of which, this leaves the view…

 

Again, as I said earlier, the majority of client/server programming I did was built over Java or C#, so the HTML5 / JavaScript approach was new to me, so I had to take a closer look at what options exist.  In short, there are an absolute ton of options… too many in fact.  However, my rather well defined needs narrows things down quite a bit.  In fact, I am down to a pair of options, and would love your opinion on them.

 

 

Option 1

 

jQuery for the UIjquery-logo1

jQueryMobiel for the mobile UI

Node for the backend

CouchDB or redis for the database layer

Express for the server bits

Backbone.js for the um, backbone ( this is where MVC comes in )

Moustache and icanhazjs for the templates

underscore, well, just to make things work

 

 

Option 2

 

YUI for the front end (desktop and mobile), routing, MVC and server bitsyuilib

Node for the backend

CouchDB or redis for the database.

Handlerbars for the templating.

 

 

 

Both have benefits and detriments, especially from the perspective of a tutorial.

 

jQuery is easily the most popular UI library out there, and there is a gigantic amount of support available ( and dozens of books ), with a gigantic community.  Backbone and Moustache are less used, but still well supported.  Unfortunately, this also means introducing a half dozen pieces of tech, a very confusing prospect.  Development on all of these products moves extremely fast, which is a double edges sword.  Finally, and this is highly personal, I hate the look of jquery and underscore code, it feels so… hackey.

 

YUI on the other hand, is from a single vendor, with much less supporting material but very good documentation and a very clean modular design.  More to the point, it is an end to end system so it is very consistent.  However, if something goes wrong the community is much smaller and the supporting materials aren’t as readily available.  Perhaps the biggest downside with YUI is the newness of it.  YUI3 is still in transition away from YUI2, and YUI App ( the YUI equivalent to Backbone ) is young and at times it shows.  From an engineering perspective though, YUI just feels more solid and less like a clever hack.

 

Right now, ease of explanation is winning out, and I am leaning towards using YUI.  Going with on all encompassing library is much easier to configure and explain to readers, so that is a big plus.

 

Any thoughts or opinions on the subject? 

 

Oh, and if this is all sounding extremely confusing, don’t worry, it really isn’t that bad.  The end product should still be a single archive you download and execute with a simple click. 

 

So, over the next few weeks ( or more ), we are going to be going off on a slightly odd tangent here at game from scratch, and crossing over into the world of web app development, I hope many of you find it interesting.  For those that don’t, don’t worry, I will still be publishing game development specific contents and tutorials too!

Design , ,

20. June 2012

 

This tutorial is going to cover creating transition effects between your GameEngine2D scenes.  It is actually going to be rather short and mostly code, as the subject is actually quite simple and consistent between different effects.

 

All right, lets just right in.  First of all, when need our main application.  This is going to perhaps be the simplest one we have created to date, and all of the code should be familiar to you by now.  Create a new file named AppMain.cs as follows:

 

using System; using System.Collections.Generic; using Sce.Pss.Core; using Sce.Pss.Core.Environment; using Sce.Pss.Core.Graphics; using Sce.Pss.Core.Input; using Sce.Pss.HighLevel.GameEngine2D; using Sce.Pss.HighLevel.GameEngine2D.Base; namespace SceneTransitions { public class AppMain { public static void Main (string[] args) { Director.Initialize(); Scene1 scene1 = new Scene1(); Director.Instance.RunWithScene(scene1); } } }

 

All we are doing is Initializing the Director object, creating our custom scene of type Scene1 and telling it to run.  This literally is about the shortest PlayStation Mobile application you can create.

 

Now lets take a look at Scene1.cs

using System; using Sce.Pss.Core.Graphics; using Sce.Pss.HighLevel.GameEngine2D; using Sce.Pss.HighLevel.GameEngine2D.Base; namespace SceneTransitions { public class Scene1 : Scene { Texture2D texture; TextureInfo ti; public Scene1 () { this.Camera.SetViewFromViewport(); texture = new Texture2D("/Application/pic1.png",false); ti = new TextureInfo(texture); SpriteUV sprite = new SpriteUV(ti); sprite.Quad.S = ti.TextureSizef; sprite.Position = new Sce.Pss.Core.Vector2(0,0); this.AddChild(sprite); this.ScheduleUpdate(1); this.RegisterDisposeOnExitRecursive(); } ~Scene1 () { ti.Dispose(); texture.Dispose(); } public override void Update (float dt) { if((Sce.Pss.Core.Input.GamePad.GetData(0).ButtonsDown & Sce.Pss.Core.Input.GamePadButtons.Cross) == Sce.Pss.Core.Input.GamePadButtons.Cross) { if(Director.Instance.CurrentScene.IsRunning) Director.Instance.ReplaceScene(new Scene2()); } } } }

 

We are declaring a new class Scene1, which is derived from GameEngine2D.Scene. In this scene, in the constructor we are setting the camera to be sized to the viewport, creating a texture from our image pic1.png ( oh yeah, you need to add 3 images to your project, I picked three PS Vita wallpapers I downloaded off the net, you can use whatever files you want, but I assume you name them pic1.png pic2.png and pic3.png ) then create a sprite out of it.  This is all stuff we have done in prior tutorials.  We now add the sprite to our scene, and schedule this scene to receive updates.  Finally we call this.RegisterDisposeOnExitRecursive().  This function call is key, as it tells the Director to dispose of this scene when it is replaced.  If you do not call this, we will quickly run out of memory.

 

Next up is our destructor.  TextureInfo and Texture are both classes that you are expected to manage destruction of yourself ( they implement IDisposable ).  So in the destructor, which is called when our scene is replaced, we need to dispose of both of these items.  ( Actually I believe TextureInfo will take care of Texture2D, but don’t quote me on that ).

 

Next up is our Update() method.  As we have seen in the past, this method is called once every frame and is where your scene’s logic should be located.  In this case, we are waiting on the user hitting the Cross button ( or S key if using the simulator ), in which case we tell the Director to Replace the scene with a new created Scene2, which we will now create.

 

Create a file named Scene2.cs with the following code ( which is going to look extremely familiar… )

 

using System; using Sce.Pss.Core.Graphics; using Sce.Pss.HighLevel.GameEngine2D; using Sce.Pss.HighLevel.GameEngine2D.Base; namespace SceneTransitions { public class Scene2 : Scene { Texture2D texture; TextureInfo ti; public Scene2 () { this.Camera.SetViewFromViewport(); texture = new Texture2D("/Application/pic2.png",false); ti = new TextureInfo(texture); SpriteUV sprite = new SpriteUV(ti); sprite.Quad.S = ti.TextureSizef; sprite.Position = new Sce.Pss.Core.Vector2(0,0); this.AddChild(sprite); this.ScheduleUpdate(1); this.RegisterDisposeOnExitRecursive(); } ~Scene2() { ti.Dispose(); texture.Dispose(); } public override void Update (float dt) { if((Sce.Pss.Core.Input.GamePad.GetData(0).ButtonsDown & Sce.Pss.Core.Input.GamePadButtons.Cross) == Sce.Pss.Core.Input.GamePadButtons.Cross) { if(Director.Instance.CurrentScene.IsRunning) { Director.Instance.ReplaceScene( new TransitionCrossFade( new Scene3() ) { Duration = 4.0f, Tween = (x) => Sce.Pss.HighLevel.GameEngine2D.Base.Math.PowEaseOut( x, 3.0f )} ); } } } } }

 

So, basically it’s a cut and paste job of Scene1, just with a different texture file, and a different looking replace scene call.  I will look closer at that in a second.  Notice too that here we are creating a Scene3 in our Update() call, lets go ahead and create it next.

 

Create Scene3.cs

 

using System; using Sce.Pss.Core.Graphics; using Sce.Pss.HighLevel.GameEngine2D; using Sce.Pss.HighLevel.GameEngine2D.Base; namespace SceneTransitions { public class Scene3 : Scene { Texture2D texture; TextureInfo ti; public Scene3 () { this.Camera.SetViewFromViewport(); texture = new Texture2D("/Application/pic3.png",false); ti = new TextureInfo(texture); SpriteUV sprite = new SpriteUV(ti); sprite.Quad.S = ti.TextureSizef; sprite.Position = new Sce.Pss.Core.Vector2(0,0); this.AddChild(sprite); this.ScheduleUpdate(1); this.RegisterDisposeOnExitRecursive(); } ~Scene3() { ti.Dispose(); texture.Dispose(); } public override void Update (float dt) { if((Sce.Pss.Core.Input.GamePad.GetData(0).ButtonsDown & Sce.Pss.Core.Input.GamePadButtons.Cross) == Sce.Pss.Core.Input.GamePadButtons.Cross) { if(Director.Instance.CurrentScene.IsRunning) { Director.Instance.ReplaceScene( new TransitionSolidFade( new Scene1() ) { Duration = 1.0f, Tween = (x) => Sce.Pss.HighLevel.GameEngine2D.Base.Math.PowEaseOut( x, 3.0f )} ); } } } } }

Again, another cut and paste job, with just the texture file name changed, and a different ReplaceScene() call, this time creating a Scene1, basically creating an infinite application that shows Scene1, then button press, shows Scene2, button press, shows Scene3, button press, shows Scene1, repeat over an over.

 

Now lets look at the key differences between how the transitions work:

 

Scene1:

Director.Instance.ReplaceScene(new Scene2());

Scene2:

Director.Instance.ReplaceScene( new TransitionCrossFade( new Scene3() ) { Duration = 4.0f, Tween = (x) => Sce.Pss.HighLevel.GameEngine2D.Base.Math.PowEaseOut( x, 3.0f )} );

Scene3:

Director.Instance.ReplaceScene( new TransitionSolidFade( new Scene1() ) { Duration = 1.0f, Tween = (x) => Sce.Pss.HighLevel.GameEngine2D.Base.Math.PowEaseOut( x, 3.0f )} );

 

The transition from the first screen, does nothing, it simply transition to the next scene with no visual effect.  Your first image will simply be replaced with your second image.

 

Scene2 however, transitions by creating a new temporary scene, a TransitionCrossFade, which is essential a short lived scene that goes between Scene2 and Scene3 and causes a cross fade effect.  As you can see, we provide a Tween method which controls the rate at which the fade will occur.  A tween are not simply the people responsible for the bizarre success of the Twilight franchise, its actually short had for inbetween, which is essentially just a function that is going to be called over and over during a transition until it is completed.  Tweens are quite common in the animation world. 

 

Scene3 works almost identically to Scene2, but instead of a cross fade, it’s a solid fade.  You can see the difference in the video of this application in action.  There is one very important thing to be aware of here… these temporary scenes, TransitionCrossFade and TransitionSolidFade, if you try to replace them before they have completed running, your application will crash!  Truth is, in real life you won’t be switching scenes this quickly, so it should be a non-issue, but it is something you should be aware of.  If you want to witness this first hand, load this code up in the simulator and just repeatedly hit S, you will crash soon enough.

 

Now, let’s take a look at our code in action:

 

Transition between scenes on the PlayStation Vita Simulator

 

As always, you can download the full sources here.

Programming , , ,

19. June 2012

 

A couple months back took a long look at Appcelerator and initially I loved what I saw.  For those of you unaware, Appcelerator allows you to develop “native” applications for Android and iOS in JavaScript that execute in a special version of the V8 JavaScript Engine. I started developing a prototype app of a simple Android game for my daughter and got surprisingly good results quickly.  It was a very encouraging start, but then the wheels fell off.  I notice a number of people end up on this site from search engines looking for an Appcelerator review ( for some reason? ) so I thought I would share my experiences.

 

For whatever reason, I got distracted and put it down for a while, I came back to it recently and intended to finish off that prototype.  Here is the kicker, the exact same code from a couple months ago, unchanged, no longer works on my Transformer tablet.

 

I will say, this is frustrating to say the least.  Now, since the code didn’t change it was obviously an update to Android that broke things, I can’t exactly blame that on Appcelerator Titanium ( oh the joys of Android device compatibility… ) but I can blame them for what came next…

 

You can’t debug on device.  At all.  With the exception of printing comments to logcat, you are basically blind.  This obviously leads to a problem, as here is what happens when I run the app.  ( Which by the way, still runs perfectly fine on my Galaxy Note running Android 2.3.x, its just on my Asus Transformer that it breaks ):

 

appcell

 

Since I can’t debug on device, this is the results I get from connecting with the Delvik Debug Monitor:

 

06-19 09:56:51.090: I/TiApplication(1823): (main) [0,0] checkpoint, app created.
06-19 09:56:51.130: I/TiApplication(1823): (main) [46,46] Titanium 2.0.2 (2012/05/30 10:21 2ff31a3)
06-19 09:56:51.170: D/dalvikvm(1823): GC_CONCURRENT freed 268K, 5% free 6703K/7047K, paused 2ms+2ms
06-19 09:56:51.380: D/dalvikvm(1823): GC_CONCURRENT freed 314K, 6% free 6898K/7303K, paused 2ms+2ms
06-19 09:56:51.450: E/TiApplication(1823): (KrollRuntimeThread) [318,364] APP PROXY: [email protected]

 

 

And, that is it.  Since I can’t debug on the device, I am pretty much DOA here.  The forums answer nothing ( although I did find other people having similar problems ).  I of course could debug in the emulator with two exceptions.  a) the error only occurs on the actual device b) the debugging experience on Android is still awful.

 

This is another area with Appcelerator Titanium I always found infuriating… the emulator.  Getting it to actually run with your running emulator was a nightmare, you had to match up the Android build version and run configuration exactly with the version of the running emulator, then it was still a 50/50 chance that it would actually use your emulator, or start a new one.  If you’ve worked with Android before, you know how fun waiting for the emulator is!  There is light and the end of the tunnel with the recently release Intel emulator running a heck of a lot quicker, but unfortunately the JavaScript V8 virtual machine Appcelerator relies on doesn’t work with it.

 

It’s a shame to be tripped up on such a thing, but actually being able to debug on your device is an absolute requirement, as is demonstrated by this situation.  There are other annoyances with using Appcelerator certainly…  the binaries it generates are “large” to be extremely kind, performance can be a bit spotty at times and you virtually have to write two applications if you want to support iOS and Android, but none of these was enough to make me give up. 

 

Not being able to debug on device, coupled with some remarkably meh support.. that is.  Combined with the fact my application was broken by an Android update… if I can’t get my code working with my three devices reliably, what happens when I release to the masses with their millions of different devices?

 

Which is disappointing, as I really liked working with Appcelerator.  I even liked Appcelerator Titanium as an IDE, which is shocking as I hate Eclipse, which it is based on. 

 

There is potentially light at the end of the tunnel, as there is an open ticket for debugging on device.  Unfortunately, its been assigned medium priority and has already been open for almost a year.

 

Appcelerator Titanium is an interesting and encouraging product, but for the above reasons, I just can’t commit to using it.  Add native debugging support, and I will certainly reconsider.

General , , ,

18. June 2012

 

unity

By way of this reddit posting, some interesting news about Unity 4 was posted and then removed.

 

 

So what can we expect in Unity 4, according to this article?

  • DirectX 11 support
  • Improved Flash exporting
  • External forces, bent normals and automatic culling of particles
  • dynamic obstacles and avoidance navigation
  • optimized UnityGUI performance and memory usage
  • dynamic fonts across all platform using HTMLesque markup
  • remoute Unity web player debugging
  • new project window workflow
  • iterative lightmap backing
  • refined component based workflows
  • extensible inspectors for custom classes
  • improved cube map importing
  • geometry data improvements for huge memory and performance savings
  • non triangle meshes, render points and lines.
  • search, live preview and asset store directly from project window

 

And perhaps most interesting of all, a preview of deploying to Linux.

 

They also promise a faster turn around development cycle on version 4 than they had on version 3.

Personally I am kind of underwhelmed.  With Flash/Nacl support, is Linux support really a big deal?  Otherwise its nowhere near as big of a release as the prior 3.x releases.  The DirectX 11 support should help PC versions of Unity games get closer to CryEngine and UDK in graphical fidelity.

 

I do wonder if they will offer upgrade pricing for the version they gave away earlier this year?

 

What do you think, if this is real are you excited by the new features?

News ,

Month List

Popular Comments