Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon Join the GFS Discord Server!
15. May 2012

 

This part of the tutorial is going to look at using UIComposer to create a simple UI, then the code to actually run the resulting GUI.  This two part tutorial was originally just one part, covering how to make a UDP socket request.  However, in putting together the required code, I had to build an interface, which resulted in a rather long post.  Therefore I have split this into two parts.  This part covers creating the UI, the next part covers wiring up the UI to actually do something and of course, the networking.

 

Once you are done both parts of this tutorial you will have a fully functional networked high score client with a primitive GUI.

 

Now, let’s create our application, fire up UIComposer.

 

File->Create New Project

 

image

 

 

In the Create New Project dialog, name and path it.  I’m going with HighScoreApp.

 

image

 

 

File->Create New Layout

image

 

 

Assuming you are developing for Vita, leave it at 960x544, I named it MainWindow.

 

image

 

 

Now drag in controls from the widget panel:

 

image

 

 

Start with a Panel, the size of the entire window:

 

image

 

 

Drag and drop Label, Button and EditableText widgets to create the following result:

 

image

 

 

Now the most important part is to match my naming or your code will end up being different.  The top two labels names don’t matter.  On the next line, name them from left to right: textBoxName, textBoxScore, buttonAddScore and buttonGetScores.

 

You set the variable name by selecting the widget, then filling in the following form:

 

image

 

 

Variable Name is the field that you are most interested in.

 

Finally, at the bottom of the form, drag in a Label widget to fill the rest of the available space.  Here are the settings I used:

 

 

image

 

 

Most importantly, make sure Variable Name is set to labelResults.

 

Now that we’ve created our screen, lets build it.  Select File->Build or hit F5:

 

image

 

 

Your results should look like:

 

 

image

 

 

Now we are theoretically done with UIComposer, lets fire up PS Studio.  Create a new solution, I called mine Networking.  Add a reference to Sce.Pss.HighLevel.UI.  Now we want to import our newly created UI files.

 

Right click your project and select Add->Add Files…

 

image

 

 

Navigate to the files you just created in UIComposer and add them.  The key here is to Add them as a link.  You don’t have to do this, but if you do, if you go back to the UIComposer and make a change ( and Build ), it will be automatically brought into Studio.

 

 

image

 

 

Add MainWindow.cs and MainWindow.composer.cs.  MainWindow.composer.cs is the system generated file that wires together your windows code; you do not edit it.  Instead, it makes use of partial classes and you do your editing in MainWindow.cs.

 

Now add the following code:

 

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.UI; namespace Networking { public class AppMain { public static void Main (string[] args) { GraphicsContext graphics = new GraphicsContext(); UISystem.Initialize(graphics); HighScoreApp.MainWindow window = new HighScoreApp.MainWindow(); UISystem.SetScene(window); while(true) { SystemEvents.CheckEvents(); List<TouchData> touchData = Touch.GetData(0); UISystem.Update (touchData); graphics.SetViewport(0, 0, graphics.Screen.Width, graphics.Screen.Height); graphics.SetClearColor(new Vector4(0,0,0,1)); graphics.SetClearDepth(1.0f); graphics.Clear(); UISystem.Render (); graphics.SwapBuffers(); } } } }

 

This is about the simplest code you can create to display a UI on screen.  First we create our GraphicsContext, then initialize the UISystem singleton with it.  The UISystem singleton is contained in Sce.Pss.HighLevel.UI.  Next we create our UIComposer generated class, HighScoreApp.MainWindow.  If you are wondering where this name came from, the namespace was defined by the Project Name you specified in UIComposer, while the class name is the Class Name from the New Layout dialog.  Just like when working with Director from GameEngine2D, we add the window using SetScene().  Note, these are different scenes and cannot be interchanged.

 

Next we loop infinitely.  In our app loop, we check for new events, check what the current touch status is and pass the results to UISystem.Update().  Again, UISystem follows the same basic premise as the Director singleton, so it’s use should be familiar at this point.  We then clear the screen, tell our UISystem to draw, then finally tell the graphics to SwapBuffers displaying our screen.

 

Here is the results of our actions:

 

image

 

In the next section we will actually put the GUI to use doing something.  In the next part we are going to make a UDP socket connection to a high score server, to add new scores as well as retrieve the current high scores.

 

On to Part 2

Programming


15. May 2012

 

I promise not to let it occupy all of my life… I say as I write this at 4AM in the morning!

 

 

Actually, so far the launch has been a gigantic epic failure, not that I am shocked.  As for right now the American forums are down completely.

 

I signed up for a Battle.NET account ( was one of 8 people alive that didn’t play WoW ), purchased my copy from Blizzard.com, went to activate it and:

 

This Battle.net account does not have a Diablo 3 License attached to it.

Hmmmm… go check my email, no keys sent.  What the heck is going on?  Battle.Net says my account is active.  Turns out this is a pretty easy fix, for some reason Diablo 3 set my region to Europe, and your account appears to be region locked.  Simply go to Options->Account and change your region.

 

image

 

For such a massive launch, that’s a pretty stupid error message.  Well, once I set the region I at least stopped getting the “This Battle.net account does not have a Diablo 3 License attached to it.” message.

 

Instead I get:

 

image

 

The servers are busy at this time.  Please try again later (Error 37).

 

 

Lovely.

 

 

Always on DRM for a single player game… what could possibly go wrong?

 

/Sigh

 

 

On the bright side, it looks like Diablo 3 isn’t going to be too distracting for now!

 

EDIT: A fair number of people seem to be having login problems.  Unfortunately beyond the fix mentioned above, there is very little that can be done.

 

Error 37 and 3005 apparently just mean the servers are overloaded.  All you can do in this case is keep trying.

 

As per the Diablo 3 support blog:

 

Error 37, 3005

Our servers will send an Error 37 or Error 3005 message when they are under heavy load. If you are not able to log into Diablo III and receive an Error 37 message, try logging in again. It may take several login attempts before you successfully connect.

 

In addition, Blizzard’s Twitter stream is directing people to this post, but it’s pretty typical connection stuff.

 

Sadly, most of the problems seem to be the simple fact their servers got crushed and Blizzard dropped the ball.  Hopefully they pick it up and fix things quickly.

Totally Off Topic


14. May 2012

 

When I was putting together the Blender to PS Suite tutorial I noticed that COLLADA and FBX exports were nowhere near as good as the X format.  A forum member on the PlayStation forums obviously ran into the same issues, and wrote a script to generate a more PSS friendly dae file.

 

In his own words:

 

Hi all,
I wrote the python script to use .dae file on PSS.
ModelConverter.exe hates a .dae(s) which produced by Blender2.63.
The script does fix some errors, and make .dae file to suitable .dae file.
Developping's quickly began, I think that the script may do not always work.
Please check this if it interest you.
https://github.com/roentgen/collada2pss/downloads

How to use:

1. put to_pss.py onto a directly

eg)

cp ~/Download/to_pss.py ~/models

2. open console (or terminal) and go to the directly

eg)

cd ~/model

3. execute the script

eg)

args="models/input.dae models/output.dae" /Applications/blender.app/Contents/MacOS/blender -b -P to_pss.py

* the script works for blender 2.63, and does not work for blender 2.49 earlier

* you need to know where blender is.

4. use modelconverter.exe

 

Those are Mac-centric instructions, on Windows do the following:

 

Head here and download the script(or click the button below):

image

Open the zip and extract to_pss.py to the folder your dae file is in. ( C:\temp in my case )

Open a command prompt:

Change to the directory you extracted the script.

Create a parameter for the script via environment an environment variable named args, this value represents the input and output filenames. For example: SET args=in.dae out.dae

Run “c:\Program Files\Blender Foundation\Blender\blender” –b –P to_pss.py.  Obviously you need to change this to match the path to your Blender install.

 

Like this:

image

 

This will create a more PSS friendly dae file named whatever you specified in args.

 

I’ve not had the chance to really test the difference, but if you are having trouble with your COLLADA files, be sure to try out this script.  Keep in mind, you need Blender 2.63.

 

Nice work roentgen.

Art


14. May 2012

 

I have noticed a rise in traffic coming from Google these days, which of course I love, always welcome new readers!  What I’ve noticed is, it seems to correspond to people +1’ing posts.  Here is a graph illustrating Google traffic since the beginning of the year:

 

image

 

As you can see, search traffic has basically doubled in that time period.  That growth seems to correspond with the number of +1’s clicked.

 

Just wanted to let you know how important that imageat the bottom of each post is to this site.  If you are reading a post you like and want to help GameFromScratch.com, please be sure to click it.  Frankly one of the most difficult/frustrating part of running this blog is raising awareness that it even exists. The increases in traffic and the many wonderful comments I receive make it very easy to keep motivated to write more tutorials/posts!

 

 

On a related topic, Digg.  I have a Digg this button on each post and I honestly don’t think it’s been clicked this year.  I know people use the Stumbleupon and Delicious buttons but I am starting to think absolutely nobody actually uses Digg since their implosion, so I’m figuring I am going to remove it.

 

So there’s the question, do any of you actually visit Digg anymore?


14. May 2012

 

 

I finally got around to updating the Pang project files from part 6 through 9 to include the SFML 2.0 ports.  Thanks again to Nathan for making my job a whole bunch easier! Smile

 

 

So now, if you are following along to the C++ tutorial series, you now have the option of downloading a SFML 1.6 and a SFML 2.0RC project file.  The parts before part 6 are virtually unchanged, so there is still only a single project file download.  Also note, the tutorial text is still only applicable to the 1.6 version, so you will have to do a bit of poking about to see what has changed.  One easy way is to download both projects and run a diff between them.

 

 

Now that that is complete, I really do need to get back to writing part 10 now don’t I?


AppGameKit Studio

See More Tutorials on DevGa.me!

Month List