Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
5. June 2012


As part of the same document that announced the PlayStation Mobile compatible phones fromplaystation-mobile-on-htc HTC, Sony also released a list of developers currently working on PlayStation Mobile content.  Give it a look and I believe that you will agree that it is fairly impressive:





List of Third Party Game Developers and Publishers



ASGARD Co.,Ltd. 
CYBERFRONT Corporation
eitarosoft, inc.
FromSoftware, Inc
GungHo Online Entertainment, Inc.  
HAMSTER Corporation




Atomicom Ltd.
Beatnik Games Ltd. 
Big Head Games Ltd.
Crash Lab Ltd.
Futurlab Ltd. 
Green Hill
Honeyslug Ltd.
Icon Games Entertainment Ltd. 
Omni Systems Ltd.
Origin8 Technologies Ltd.
Playerthree Ltd. 
Index Corporation 
Kadokawa Games, Ltd.
Kadokawa Shoten Publishing Co., Ltd. 
MarvelousAQL Inc.
NCM Entertainment Corporation / Forever Entertainment S.A. Group
Nippon Ichi Software, Inc.
Pygmy Studio.Co., Ltd.
Q Entertainment Inc.
SEGA Corporation
SUCCESS Corporation
34  companies in total
22 companies in total
Pompom Software Ltd.
Quirkat Inc.
Retroburn Game Studios Ltd.
Ripstone Ltd. 
SFB Games Ltd.
Spinning Head Software Ltd. 
Thumbs Up
Tikipod Ltd.
Triangle Factory
Wired Productions Ltd.




Some pretty impressive names in there, from Sony, From Software and GameLoft to Nippon, Tecmo and Sega.  If you want, you can download the original PDF here.  The press release is available here.  With heavy weight support behind their effort, Sony may become a big player in the ( currently horrible? ) Android game market.



So, if Sony had this many developers lined up and working on PlayStation Mobile games, why didn’t they mention that at the E3 press conference???  I am sure nobody would have minded a few minutes axed out of the Wonderbook demonstration!


5. June 2012


At E3, Sony announced that Sony PlayStation Suite would be rebranded as PlayStation mobile.  More importantly, they announced that HTC would be the first 3rd party Androidatt-htc-one-x manufacturer to release a PlayStation certified phone, but they never went into any details about what that phones would be supported.  It appeared to be an HTC One that he was holding on stage.


Fortunately, that information is available on Sony’s Japanese corporate site:


The license program to expand PS Mobile, dedicated for portable hardware manufacturers. SCE will not only license logos but also provide necessary development support. As of June 5, 2012, the line-up of PlayStation™Certified devices include the HTC One series of smartphones, HTC One™ X, HTC One™ S, and HTC One™ V. Content developed with official version of PlayStation®Mobile SDK will be available on those devices later this year, also Xperia™ arc, Xperia™ acro, Xperia™ PLAY, Xperia™ acro HD, Xperia™ S, Xperia™ ion, Xperia™ acro S from Sony Mobile Communications AB, and "Sony Tablet" S and "Sony Tablet" P from Sony Corporation.


It seems strange that the information was here, but not as part of the official announcement!


Anyways, there you have it.  PlayStation Mobile is coming to the HTC One X, S and V phones, in addition to Sony’s existing lineup.  Now lets just hope they sign a deal with Samsung soon!



4. June 2012


As was just announced at E3, Sony has rebranded PlayStation Suite to 


All of our existing tutorials will will still work exactly the same, and I will rebrand them as I come to them. I aim to make this site “the site” for all your PlayStation Mobile programming needs.


Code wise, absolutely nothing has changed, but if you are coming here from a search engine and you run into a post referring to the  PlayStation Suite SDK, you now know why.



Other than the change to PlayStation Mobile, Sony has now officially announced a partnership with HTC, bring PlayStation mobile to more devices!  Long rumoured, it is nice to know that there are going to be PlayStation based HTC phones!


So, if you are interested in developing for PlayStation Mobile, head over here for a list of tutorials to get you started!


4. June 2012


This tutorial we are going to look at SpriteList and show how it can result in a massive increase in performance.  Along the way, we are going to create two custom Scene classes, one that performs poorly, and one the does not.  Along the way we are going to demonstrate dynamically generating a UI and how UI scenes and GameEngine2D scenes can co-exist.


A lot of the following code we have covered in previous tutorials, so I am not going to go into a great deal of detail.



First lets take a look at our AppMain.cs


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; using Sce.Pss.HighLevel.UI; namespace SpriteList { public class AppMain { static private bool quit = false; public static void Main(string[] args) { Director.Initialize(); Director.Instance.RunWithScene(new Sce.Pss.HighLevel.GameEngine2D.Scene(),true); UISystem.Initialize(Director.Instance.GL.Context); Sce.Pss.HighLevel.UI.Panel dialog = new Panel(); dialog.Width = Director.Instance.GL.Context.GetViewport().Width; dialog.Height = Director.Instance.GL.Context.GetViewport().Height; Button buttonUI1 = new Button(); buttonUI1.Name = "buttonGoSlow"; buttonUI1.Text = "Slow version"; buttonUI1.Width = 300; buttonUI1.Height = 50; buttonUI1.Alpha = 0.8f; buttonUI1.TouchEventReceived += (sender, e) => { Director.Instance.ReplaceScene(new SlowVersion()); }; Button buttonUI2 = new Button(); buttonUI2.Name = "buttonGoFase"; buttonUI2.Text = "Fast version"; buttonUI2.Width = 300; buttonUI2.Height = 50; buttonUI2.SetPosition(0,55); buttonUI2.Alpha = 0.8f; buttonUI2.TouchEventReceived += (sender, e) => { Director.Instance.ReplaceScene(new FastVersion()); }; Button buttonUI3 = new Button(); buttonUI3.Name = "buttonExit"; buttonUI3.Text = "Exit App"; buttonUI3.Width = 300; buttonUI3.Height = 50; buttonUI3.SetPosition(0,110); buttonUI3.Alpha = 0.8f; buttonUI3.TouchEventReceived += (sender, e) => { quit = true; }; dialog.AddChildLast(buttonUI1); dialog.AddChildLast(buttonUI2); dialog.AddChildLast(buttonUI3); Sce.Pss.HighLevel.UI.Scene scene = new Sce.Pss.HighLevel.UI.Scene(); scene.RootWidget.AddChildLast(dialog); UISystem.SetScene(scene); while(!quit) { Director.Instance.Update(); Director.Instance.GL.Context.Clear(); Director.Instance.Render(); UISystem.Update(Touch.GetData(0)); UISystem.Render(); Director.Instance.GL.Context.SwapBuffers(); Director.Instance.PostSwap(); } } } }


We set up our Director object and tell it to run with an empty scene.  We then set up our UISystem in a similar manner.  Then we create a Panel object named dialog by hand.  This process is basically the same as what UI Composer generates for us, just all created in code.  We then add 3 buttons to our panel.  For each button we add a TouchEventReceived handler in the form of a lamda function.


If they click the Slow Version button, we create a new SlowVersion scene object and set it as the active scene in the Director.  If we click the Fast Version button, we create a FastVersion scene object and make it the active scene.  We will cover creating these two classes in just a moment.  Finally for the Exit App button, we toggle the quit bool to true, causing the event loop to exit.


Now that we have created our 3 buttons, we add them to our dialog Panel.  We then create an empty Scene ( UI scene, not GameEngine2D! ), add our dialog to it and set it as the active scene.  This will render our buttons visible.


Now we handle our event loop.  Everything here is pretty much identical to in previous tutorials, the only key difference is that we call our UISystem.Update() and Render() within the game loop.  It is important that UISystem.Render is called after Director.Instance.Render, or the Director will render over top of it!  This loop will now continue processing until the quit bool is set by pressing the Exit App button.


Now lets take a look at SlowVersion.cs… the bad way of doing things!



using System; using Sce.Pss.Core.Graphics; using Sce.Pss.HighLevel.GameEngine2D; using Sce.Pss.HighLevel.GameEngine2D.Base; namespace SpriteList { public class SlowVersion : Scene { private TextureInfo _textureInfo; private Texture2D _texture2D; private System.Collections.Generic.List<SpriteUV> _sprites; public SlowVersion () { this.Camera.SetViewFromViewport(); _texture2D = new Texture2D("/Application/Jet.png",false); _textureInfo = new TextureInfo(_texture2D); var w = Director.Instance.GL.Context.GetViewport().Width; var h = Director.Instance.GL.Context.GetViewport().Height; System.Random rand = new System.Random(); _sprites = new System.Collections.Generic.List<SpriteUV>(); for(int i = 0; i < 1000; i++) { SpriteUV sprite = new SpriteUV(_textureInfo); sprite.Position = new Sce.Pss.Core.Vector2(rand.Next(0,w) - w/2 ,rand.Next(0,h) -h/2); sprite.Quad.S = new Sce.Pss.Core.Vector2(_texture2D.Width,_texture2D.Height); sprite.Rotate(rand.Next (0,360)); sprite.Schedule( (dt) => { sprite.Position = new Sce.Pss.Core.Vector2(rand.Next(0,w)-w/2 + _texture2D.Width/2,rand.Next(0,h)-h/2); }); _sprites.Add(sprite); } foreach(var sprite in _sprites) { this.AddChild(sprite); } FPS fps = new FPS(); fps.Position = new Sce.Pss.Core.Vector2(0,0); this.AddChild(fps); } public override void Draw () { base.Draw (); } } }


Most everything here has also been covered in prior tutorials, but perhaps not in this form.  SlowVersion is inherited from Scene.  For member variables it contains a single Texture2D and it’s corresponding TextureInfo object.  It also contains a List of SpriteUV’s to be rendered every frame.  All of the sprites point to the same Texture, our Jet.png graphic:




Bonus points if you can identify the type of jet! Winking smile


In our constructor we go about the usual things, first we setup our camera, load our texture from disk and create our TextureInfo from the loaded texture.  Next we allocate our List and then create 1000 instances of our jet sprite, randomly rotated and positioned on screen.  We also register a lamda Schedule method that will be called every frame. During each update we simply randomly relocate the airplane sprite on screen.  Finally, we add the newly created sprite to our list.  Next we loop through all of our sprites and add them to our scene.


In the next bit we create an FPS object, a simple helper object for displaying the current frame rate on screen.  We will cover the code in a second.



Now let’s take a look at FastVersion.cs, which you will soon notice is basically just a copy and paste job!


using System; using Sce.Pss.Core.Graphics; using Sce.Pss.HighLevel.GameEngine2D; using Sce.Pss.HighLevel.GameEngine2D.Base; namespace SpriteList { public class FastVersion : Scene { private TextureInfo _textureInfo; private Texture2D _texture2D; private System.Collections.Generic.List<SpriteUV> _sprites; private Sce.Pss.HighLevel.GameEngine2D.SpriteList _spriteList; public FastVersion () { this.Camera.SetViewFromViewport(); _texture2D = new Texture2D("/Application/Jet.png",false); _textureInfo = new TextureInfo(_texture2D); var w = Director.Instance.GL.Context.GetViewport().Width; var h = Director.Instance.GL.Context.GetViewport().Height; System.Random rand = new System.Random(); _sprites = new System.Collections.Generic.List<SpriteUV>(); for(int i = 0; i < 1000; i++) { SpriteUV sprite = new SpriteUV(_textureInfo); sprite.Position = new Sce.Pss.Core.Vector2(rand.Next(0,w) - w/2 ,rand.Next(0,h) -h/2); sprite.Quad.S = new Sce.Pss.Core.Vector2(_texture2D.Width,_texture2D.Height); sprite.Rotate(rand.Next (0,360)); sprite.Schedule( (dt) => { sprite.Position = new Sce.Pss.Core.Vector2(rand.Next(0,w)-w/2,rand.Next(0,h)-h/2); }); _sprites.Add(sprite); } _spriteList = new Sce.Pss.HighLevel.GameEngine2D.SpriteList(_textureInfo); foreach(var sprite in _sprites) { _spriteList.AddChild(sprite); } FPS fps = new FPS(); fps.Position = new Sce.Pss.Core.Vector2(0,0); this.AddChild (_spriteList); this.AddChild(fps); } public override void Draw () { base.Draw (); } } }


You may notice two things… first, neither SlowVersion nor FastVersion do *ANY* cleanup and leak like sieves!  In non-demonstration code, be sure to clean up after yourself!

Second, they are virtually identical, but if you run them, FastVersion runs easily 4-5x faster… why is this?


That is the power of SpriteList, which performs a function very similar to SpriteBatch if you are familiar with XNA programming.  We only made two changes.



private Sce.Pss.HighLevel.GameEngine2D.SpriteList _spriteList;

We declared out spriteList member.



_spriteList = new Sce.Pss.HighLevel.GameEngine2D.SpriteList(_textureInfo); foreach(var sprite in _sprites) { _spriteList.AddChild(sprite); }


Then, instead of adding the sprites to the scene, we add them to our spriteList object.  That’s it!


There are limitations, all sprites must have a common TextureInfo, BlendMode and Color property to be added to a spriteList, so basically create one spriteList per TextureInfo if you have multiple sprites on screen and you will see a large performance boost.



Finally lets take a quick look at the FPS.cs widget.  This is just a crude hack to display FPS on screen by creating a small texture.


using System; using Sce.Pss.Core; using Sce.Pss.Core.Graphics; using Sce.Pss.Core.Imaging; using Sce.Pss.HighLevel.GameEngine2D; using Sce.Pss.HighLevel.GameEngine2D.Base; namespace SpriteList { public class FPS : SpriteUV { TextureInfo _ti; public FPS () { Texture2D texture = new Texture2D(150,1000,false, PixelFormat.Rgba); _ti = new TextureInfo(texture); this.TextureInfo = _ti; this.Quad.S = new Sce.Pss.Core.Vector2(150,100); Scheduler.Instance.ScheduleUpdateForTarget(this,1,false); } public override void Update (float dt) { _ti.Dispose(); Image img = new Image(ImageMode.Rgba, new ImageSize(150,100), new ImageColor(255,255,255,0)); img.DrawText("FPS:" + (1/dt).ToString(), new ImageColor(255,255,255,255), new Font(FontAlias.System,32,FontStyle.Bold), new ImagePosition(0,0)); Texture2D texture = new Texture2D(150,100,false, PixelFormat.Rgba); texture.SetPixels(0,img.ToBuffer(),PixelFormat.Rgba); img.Dispose(); _ti = new TextureInfo(texture); this.TextureInfo = _ti; base.Update (dt); } } }


All we are doing here is creating our own SpriteUV derived object, FPS, but instead of loading the texture from file, we generate an image dynamically, just like we did way back in Hello World.  We then schedule ourselves to update every frame.  In the update we create an image and print the the current frames per second ( the fraction of a second our current time delta takes) and update our texture to the newly created image.



Here is our code in action.  Unfortunately the nature of the output resulted in a horrifically large animated gif, so I had to put this one up on YouTube:


Running our SpriteList demo


You can download all of the project code here.


4. June 2012



This tutorial covers the process of getting Cocos2D-html setup and running.  If youCocos2dHTML5 already have completed this step, skip ahead.  It is also going to cover configuring a webserver, an optional ( but relatively easy ) step.  All right, lets get started.


First thing you need to do is get the cocos2d-html5 sources, which you can download here.



Locate the zip icon, as demonstrated in the picture to your left, click it.


Save the resulting download anywhere, just remember where you save it, we will need it in a few moments.


Now we are going to install a webserver.  This part is strictly optional, but if you want to take full advantage of the cocos demos, you are going to want a webserver installed.  It will also allow you to access your creation from different machines.  Besides, it’s a fairly simple process.  These instructions are for Windows only.


Now head over to WAMP and download their server.  The WAMP server is an all in one install of Apache, MySql, PHP and a few other applications, in many ways it is complete overkill, but like I said, it’s easy.  Pick whichever version is most appropriate, it doesn’t really matter which, so long as you choose the right one for your processor ( 32 or 64 bit ).




Now run the installer.  I choose the default value for every entry and let it install to C:\wamp.  If you saved to a different directory, adjust your path’s accordingly later on in this tutorial.  It is going to ask you to pick your default browser and default out to explorer.exe ( the shell, not to be confused with Internet Explorer the browser ).  You can explicitly choose a browser if you want but there is little reason to do so.  When prompted for mail settings, simply take the default.  WAMP server will now be installed and running in your system tray.






Like such.  Left clicking the tray icon will bring up the menu shown above.  Click localhost to see your webserver in action.


If everything went according to plan, you should see:




Now we want to extract the cocos2d-html archive we downloaded earlier.  Open up the zip and navigate the folders until you find a directory that looks like such:




CTRL+A select the entire contents of this folder in the zip and paste it  to C:\wamp\www\.


Now in your browser, you should be able to navigate to localhost/index.html and you will see:




If so, congrats, you have successfully set up Cocos2d for HTML5.  If not, make sure you have the proper contents in c:\wamp\www, and that it’s not buried in a subdirectory.  Now optionally you can open access to it up a bit so other computers on your network can see the website.  I am by no means an apache expert ( was born and raised on IIS ), so do not take this as authoritative in any way!


You want to edit httpd.conf, which you can do from the tray icon, like such:




Find and locate the following entries to match what I’ve done here ( with your IP address obviously ):


Set your IP and port to listen on, entry was originally Listen 80:

# # Listen: Allows you to bind Apache to specific IP addresses and/or # ports, instead of the default. See also the <VirtualHost> # directive. # # Change this to Listen on specific IP addresses as shown below to # prevent Apache from glomming onto all bound IP addresses. # Listen


Set the server name to your servers name, or if you haven’t got DNS configured ( such as ) use your IP address like I have:


# # ServerName gives the name and port that the server uses to identify itself. # This can often be determined automatically, but we recommend you specify # it explicitly to prevent problems during startup. # # If your host doesn't have a registered DNS name, enter its IP address here. # ServerName


Finally, grant access to your www folder:


<Directory "c:/wamp/www/"> # # Possible values for the Options directive are "None", "All", # or any combination of: # Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews # # Note that "MultiViews" must be named *explicitly* --- "Options All" # doesn't give it to you. # # The Options directive is both complicated and important. Please see # # for more information. # Options Indexes FollowSymLinks # # AllowOverride controls what directives may be placed in .htaccess files. # It can be "All", "None", or any combination of the keywords: # Options FileInfo AuthConfig Limit # AllowOverride all # # Controls who can get stuff from this server. # # onlineoffline tag - don't remove Order Allow,Deny Allow from all </Directory>


You should now have full access to your webserver folder from other machines on your network ( and externally if you don’t have a firewall or have port forwarding configured ).  You can of course tweak the security settings until the cows come home.


Now, save your changes and restart your apache server, this can again be done from the tray icon, simply left click and choose Restart All Services.  If your icon doesn’t turn green, you have made an error in the httpd.conf file.



Again, the entire server portion is optional, you can just work from the local file system, but this allows you to make use of the full demo and test suite.


Speaking of which, if you now open your browser to http://yourserverIP/tests/index.html you should now have access to all the various cocos2d tests, like such:




Now you are set up and ready to go.  In the next tutorial, we will actually get to some coding.


Read tutorial 2


AppGameKit Studio

See More Tutorials on!

Month List