Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
10. July 2013

I'll be the first to admit the expression "cloud computing" is overly abused these days. The reality is, while a bit abused by marketing types, cloud computing is a huge deal for developers.  Gamers simply expect certain functionality in your game that eventually is going to require you to have a server side component.  You may think to yourself…  well, rolling my own server isn't all that difficult.  If you have the skill set to do so, creating say… a server side score board is not all that difficult.  Frankly, it isn't either, in fact I covered exactly that topic in a prior tutorial series.  Easy, right?  Ok… now where are you going to host it and what is that going to cost you?  How secure is it?  Is it encrypted?  How well does it scale?  What about back-ups and fault tolerance?  Who is going to administrate your servers?  What about reporting?  Suddenly this simple little task quickly becomes a much more costly and complicated process and takes time and money away from doing what you set out to do… actually developing a game.

 

At the end of the day, for many developers letting someone else take care of all of these things generally makes a lot of sense.  This is the exact problem that Scoreoid sets out to solve.  You can essentially think of them as a your game's server in the cloud.  Using a fairly simple REST based api you can easily accomplish pretty much anything you could want from a dedicated server and they take care of the infrastructure and day to day operation for you.  In this post we are going to take a closer look at how Scoreoid works and what it does for you.

 

From a developers perspective, Scoreoid can be thought of as a product in two parts.  First you have the developer portal/dashboard where you can monitor, access and maintain your data.  Then you have the REST based API that the programmer uses to work with Scoreoid.

 

WARNING TIME!

To illustrate the various abilities I put together a web application that demonstrates much of Scoreoid's functionality.  This application is hitting live data and you the viewers have the ability to update and create new data.  This means I have NO IDEA what you might encounter when using the application and take no responsibility for anything written.   Please guys, be mature about it.  If you see something hateful or excessively stupid, let me know and I will remove it.

 

The Scoreoid Dashboard

First let's take a quick look at the Scoreoid web interface.  If you haven't already, you need to sign up for a Scoreoid account.  Don't worry, it's completely free and they don't spam you with emails.  Once you are signed up, log in and you will arrive at the main Dashboard page:

 

Dashboard

 

Here you get a top level overview of activity for your game.  In this case you can see that Henry is a very prolific and talented player of Test Game!

Across the top are a series of tabs.  These provide you a way to drill down into data for each category, for example, below is the result of clicking the Player tab.

DashPlayers

 

Here you can modify or delete any value in the Players database.  Scores, Games, Stats and Notifications work similarly, allowing you to access and modify data using a graphic interface.  The one I didn't mention was Console, and this is a handy little tool.  Console allows you to make Scoreoid API calls using a form.

 

ScoreoidConsole

 

Using the Console you pick the API call to make, and the form below is populated with the available parameter fields.  Once you execute it, you see the results below in the results panel, in either XML or JSON format.  You can make use of the entire Scoreoid API using the console.

 

Finally, let's take a look at adding a game.  Click on the Game tab and click the Add New Game button.  You need at least one game to use Scoreoid, but you can of course make many if you wish.  You pass the Game ID as a parameter to a number of the API calls.  Creating a game is simple enough:

CreatingAGame

 

Finally the Help link brings you to the documentation.  You can access the documentation without the need to log in if you want to take a look at the API.  The documentation is complete and has examples in multiple languages for each API call.  Now, let's get down to some coding.

 

 

Programming with Scoreoid

 

Scoreoid is accessed using a REST based interface.  The nice part about a REST based api is, if your application can programmatically access the web, it can use the API.  The actual programming language you use doesn't matter.  In this example, I am going to mostly use JavaScript.  In my case I like working with the YUI library, but you can easily use whatever library you want, the methodology stays very similar although the syntax changes slightly.

 

There are a couple things to note up front.  In the name of keeping the code easy to understand, I've performed a couple programming no-no's in this example.  First I gave you all access to my Scoreoid token…  in your application you obviously would not want to do this.  If you create a JavaScript based Scoreoid application, be sure to read about using an auto generated proxy for securing your application.  Next, I used the HTTP calls instead of the HTTPS ones.  In a secured application, you would want to obviously use the encrypted option.  Finally I made only synchronous networking calls… this means my networking calls cause programming execution to stop until results are returned.  In a real application you would generally want to make asynchronous calls.  As a result of these decisions, the code should however be fairly easy to understand.

 

Let's jump right in to the sample app.  We will be looking at portions of the code as we go.  However a great deal of the code has nothing to do with Scoreoid in particular ( YUI3 or markup related code ), while a lot of it is very repetitious in nature.  Therefore instead of listing it all here, I created a github for it. You can also download a zip of the project here

 

The application requires a server to be run due to the AJAX calls.  Therefore I have included a simple Node based server.  If you have Node installed, you can run the application by typing:

node server.js

Then you can access it in your browser at http://localhost:3000. The vast majority of interesting code for this application is in the views folder, while the templates folder contains the markup. Again, keep in mind this application is working with live data, so play around, but please be mature about it:

 

( Below is the application, not a screen shot :) )

 

 

There is a tab for each area of functionality we want to look at, Game, Player, Score and Cloud.  Under each is a form for interacting with Scoreoid.  At the bottom of each form is a field showing the raw XML or JSON results returned by the server.

 

Before we continue too far, let's take a quick look inside Index.html at the following lines.

        //Global Y variables
        Y["SCOREOID_KEY"] = "bde61648959d0c364b04b93e257035abd5ee3b26";
        Y["GAME_ID"] = "3e99cf43ab"
 

These are two values we will be needing over and over again.  First is my Scoreoid token… you should KEEP YOURS PRIVATE!  The second is the ID of a game I created earlier using the dashboard.  Once again, Scoreoid can support multiple games at once, but in this case I am using only one.  So in the code when you see Y.SCOREOID_KEY and Y.GAME_ID, this is where those values are set.

 

Now let's take a look at the Game tab in the application:

Game

First we will look at the code that executes when the user clicks the Get Game Information button in game.View.js.

        getGameData:function(){
            // This is a blocking web request... in real world, BAD!
            var requestCfg = {
                sync:true,
                data : {
                    api_key: Y.SCOREOID_KEY,
                    game_id: Y.GAME_ID,
                    response:"JSON"
                }
            };
            var request = Y.io("http://api.scoreoid.com/v1/getGame", requestCfg);
 
            Y.Global.fire('displayResults', {msg:request.responseText});
        }
 

Y.io() is what you use to make a HTTP request in YUI3.  The data object within the requestCfg object is where you pass the parameters to Scoreoid.  We pass in our api_key, game_id ( both defined earlier in index.html) as well as response.  The response variable tells Scoreoid what format you want the results returned in, either JSON or XML.  For the vast majority of examples, we are going to go with JSON as it's a bit easier to read and lighter weight.  Finally you call the function in the form of the URL you pass to Y.io, in this case http://api.scoreoid.com/v1/getGame which calls the getGame() method.  There is a wiki page for every API call ( here is getGame for example ), that lists the possible parameter fields as well as the values that will be returned.

 

Click the button and in the results area you should see:

[{"Game":{"user_id":"51b8b1dcfd8978203e000b9d","name":"Test Game","short_description":"This game is so amazingly awesome, it doesn't exist!","description":"Really, it doesn't exist.  The game is a lie.","players_count":6,"scores_count":7,"status":1,"created":"2013-06-12 19:39:07","updated":"2013-06-12 19:39:07"}}]

 

This is the return value of getGame() in JSON format.  JSON is a handy format, as it is basically just a JavaScript object encoded in string from.  You can turn a JavaScript object into JSON by calling JSON.stringify(myObject) and you can turn a JSON string back into a JavaScript object by calling JSON.parse(myString).  Pretty much every programming language under the sun has a JSON parsing library.  For those that don't you can always get Scoreoid to return XML ( we look at an XML example later ).

 

If YUI calling convention is alien to you, and you are more comfortable using jQuery, you can make the above call using the following jQuery code:

$.post("http://api.scoreoid.com/v1/getGame", { api_key:Y.SCOREOID_KEY,game_id:Y.GAME_ID,response:"JSON"},

   function(response) {

     //response will now contain the JSON data returned by Scoreoid

     //note, this is an async call

   });

 

As you can see, it's pretty simple to make REST based calls.  The other two examples in the Game tab are Get Players and Get Highest Gold Amount.  Below is the code for GetPlayers:

        getGamePlayers:function(){
            // This is a blocking web request... in real world, BAD!
            var requestCfg = {
                sync:true,
                data : {
                    api_key: Y.SCOREOID_KEY,
                    game_id: Y.GAME_ID,
                    response:"JSON"
                }
            };
            var request = Y.io("http://api.scoreoid.com/v1/getPlayers", requestCfg);
 
            Y.Global.fire('displayResults', {msg:request.responseText});
        }
 

As you can see the code is basically identical, the only difference is you call a different URL.  getPlayers() returns a list of all of the players of your game, unless of course you tell it to limit the results returned.  Get Highest Gold Amount is also virtually identical:

        getGameTop:function(gameField){
            var requestCfg = {
                sync:true,
                data : {
                    api_key: Y.SCOREOID_KEY,
                    game_id: Y.GAME_ID,
                    response:"JSON",
                    field:gameField
                }
            };
            var request = Y.io("http://api.scoreoid.com/v1/getGameTop", requestCfg);
 
            Y.Global.fire('displayResults', {msg:request.responseText});
 
        }
 

Once again, we call a different URL. In this case we are also passing in an additional parameter field.  Field tells the method which value we want to get the highest value of when calling getGameTop.  As you can see when we called getGameTop(), the value that was passed in was gold.

            container.one("#buttonGetWealthiest").on("click",function(){
                this.getGameTop("gold");
            },this);
 
There are a number of valid options for field ( bonus, best_score, gold, money, kills, lives, time_played, unlocked_levels ).  Once again, you can get a list of valid options in the documentation for getGameTop.  If you press the Get Highest Gold Amount button, you should see:
 
GetHighestGold
 
Of course, since you guys have full access to all the data in the application, the actual value returned might change.
 
Now let's take a look at working with Player data:
 
 
Player
 
The code behind this form is player.View.js.
 
Creating a player is once again a very straight forward process.  First the code that is called when the user clicks the Create Player button:
 
            this.get('container').one("#buttonCreatePlayer").on("click",function(){
                this.createPlayer(Y.one('#playerName').get('value'));
            },this);
 
 

This simply gets the value of the playerName text field ( see player.Template in the templates folder for HTML markup ) and passes it to the function createPlayer().  Now let's look at createPlayer:

 

        createPlayer:function(playerName){
            var requestCfg = {
                sync:true,
                data : {
                    api_key: Y.SCOREOID_KEY,
                    game_id: Y.GAME_ID,
                    username: playerName,
                    response:"JSON"
                }
            };
            var request = Y.io("http://api.scoreoid.com/v1/createPlayer", requestCfg);
            Y.Global.fire('displayResults', {msg:request.responseText});
        }
 

Once again, the actual code remains almost identical.  The URL we are calling is now http://api.scoreoid.com/v1/createPlayer and we pass the new player's name in the field username.

 

Next we will look at working with XML data instead.  If you click the Get All Players button, the following grid will appear:

GetPlayers

 

The YUI grid binds to an XML results set, so this time we are going to call /getPlayers, but instead we want it to return XML results instead of JSON.  This code is going to look a bit more daunting then it really is.  This is what executes when the user presses Get Players:

this.get('container').one("#playerGetAll").on("click",function(){
 
                var requestCfg = {
                    method:"POST",
                    data : {
                        api_key: Y.SCOREOID_KEY,
                        game_id: Y.GAME_ID,
                        response:"XML"
                    }
                };
 
                var ds = new Y.DataSource.IO({source:"http://api.scoreoid.com/v1/getPlayers"});
                ds.plug(Y.Plugin.DataSourceXMLSchema, {
                        schema: {
                            resultListLocator: "player",
                            resultFields: [
                                { key:"Username", locator:"@username" },
                                { key:"Email", locator:"@email" },
                                { key:"TimePlayed", locator:"@time_played" },
                                { key:"Gold", locator:"@gold" },
                                { key:"BestScore", locator:"@best_score" }
                            ]
                        }
                    });
                ds.sendRequest({
                    callback:{
                        success: function(e)
                            {
                                var dt = new Y.DataTable(
                                    {
                                    columns:[{key:"Username"},{key:"Email"},{key:"TimePlayed"},{key:"Gold"},{key:"BestScore"}],
                                    data: e.response.results,
                                    summary:"List of all players in the game",
                                    caption:"Players"
                                    });
                                // Clear the table, in case one already exists
                                Y.one("#dataTable").setContent("");
                                // Now populate
                                dt.render(Y.one("#dataTable"));
 
                                Y.Global.fire('displayResults', {msg:e.data.response});
                            },
                        failure: function(e){
                            Y.log(e);
                        }
                    },
                    cfg:requestCfg
                });
 
            },this);
 

Once again we are making a call to the getPlayers url. Notice however that we set Response to XML.  This time instead of getting data using Y.io(), we instead want to populate an XML dataset using Y.DataSource.IO().  The actual call is made when we call sendRequest and we pass in the requestCfg here.  The remaining code is about selecting which fields from the XML we want to have displayed in the grid.

 

Speaking of XML, here is the results of getPlayers() in XML form:

<?xml version="1.0" encoding="UTF-8"?>
<players>
<player username="Henry" unique_id="" first_name="" last_name="" email="mike@isawesome.com" bonus="0" achievements="" gold="9000" money="0" kills="0" lives="0" time_played="300" unlocked_levels="" unlocked_items="" inventory="" last_level="" current_level="" current_time="0" current_bonus="0" current_kills="0" current_achievements="" current_gold="0" current_unlocked_levels="0" current_unlocked_items="" current_lives="0" xp="" energy="" boost="" latitude="" longtitude="" game_state="" platform="" rank="0" best_score="90003" created="2013-06-21 16:39:10" updated="2013-06-24 16:33:05">
</player>
<player username="Mike" unique_id="" first_name="" last_name="" email="" bonus="0" achievements="" gold="4512" money="0" kills="0" lives="0" time_played="42" unlocked_levels="" unlocked_items="" inventory="" last_level="" current_level="" current_time="0" current_bonus="0" current_kills="0" current_achievements="" current_gold="0" current_unlocked_levels="0" current_unlocked_items="" current_lives="0" xp="" energy="" boost="" latitude="" longtitude="" game_state="" platform="" rank="0" best_score="0" created="2013-06-21 16:27:33" updated="2013-06-25 15:56:07">
</player>
------------------------------ RESULTS SNIPPED ------------------------------------
</players>

 

As you can see, there is a great deal more information available than what we are choosing to display.  Switching between JSON and XML results is a trivial task.

 

The final part of the Player page illustrates how to retrieve and update a single field of an individual player.  The code is pretty much identical to what we have seen thus far.  See the getPlayerField() and setPlayerField() functions for more details of how this code works.  The fields in the um… Field drop down is set in the players.Template code.  It is simply a combo box filled with the available values.  Once again, valid values can be obtained  from the documentation. 

 

One of the most common tasks that game programmers require a server for is online leader boards.  Making an online scoreboard with Scoreoid is a pretty simple affair, as we will see looking at the Scores tab:

 

Score

 

The code controlling this form is available at score.View.js.  Using this form you can get high scores, get scores sorted high to low and low to high, get the average over all score and create a new high score.  At this point in time, the code should be intimately familiar, as the logic is identical, just the URLs and parameters change.  The first three buttons call the method /getScores.  The only difference is for the sorted results we pass the parameter order_by with the value either "asc" for ascending or "desc" for descending results.  Get Average Score calls the method /getAverageScore ( predictably enough… ).  The /getScores method has a number of parameters we didn't use here for fine tuning your results.  You can fine tune the results by specifying difficulty level, date range, platform as well as limit your results to N number of values returned.  In the end, implementing a complete scoreboard is pretty simple.

 

Finally, let's take a look at the Cloud tab.

 

Cloud

 

Sometimes you just need to store "stuff" ( technical term there! ) in the cloud.  This is a key/value database stored at the game level ( more globally ) instead of the player or score level.  Most of the code here makes use of the /getGameData() and /setGameData() methods.  You can access the code behind this form in cloud.View.js.

 

If for example you click the Set Cloud Data, the value you pass is going to be written to the hard coded key "myData".  Perhaps the most interesting aspect of Scoreoid cloud storage is it supports JavaScript "dot" notation.  So for example, you can set data for monster, such as monster:orc, but also like monster.hp = 42.  Here for example are the current results in JSON format if you hit Get Monster from the cloud:

 

{"monster":{"alignment":"Lawful Evil","maxHitPoints":"42"}}

 

This makes storing structured hierarchical data easy.

 

So, that's the basics of using Scoreoid.  The API is remarkably consistent, so once you've made a single call you pretty much know how to use the entire API.  The rest is a matter of looking at the documentation for what parameters and results you can expect.  The rest is just a matter of parsing the results that are returned.

 

As I mentioned earlier, a REST based API is usable by any programming language capable of making programmatic web requests.  So far, I've entirely focused on JavaScript, but now I will give an example using a different programming language.  In this case, C# for the PlayStation Mobile platform.  The following example shows how you would access a scoreboard in a PS Vita application.  Since the PSM SDK doesn't included a JSON parser, but does include an XML one, I've gone with XML for the return value.

 

 

 

using System;
using System.Collections.Generic;
using Sce.PlayStation.Core;
using Sce.PlayStation.Core.Graphics;
using Sce.PlayStation.Core.Input;
using Sce.PlayStation.HighLevel.UI;
using System.Net;
using System.Linq;
using System.Xml.Linq;
using System.IO;

namespace Scoreoid
{
	public class AppMain
	{
		private static GraphicsContext graphics;
		private const string SCOREOID_KEY = "bde61648959d0c364b04b93e257035abd5ee3b26";
		private const string GAME_ID = "3e99cf43ab";
		
		public class ScoreEntry
		{
			public string Name;
			public string Score;
		}
		public static void Main (string[] args)
		{
			graphics = new GraphicsContext();
			UISystem.Initialize(graphics);
			
			var scene = new Sce.PlayStation.HighLevel.UI.Scene();
			var panel = new Panel() {
				Width = graphics.Screen.Width,
				Height = graphics.Screen.Height };
			
			
			var textOut = new Label();
			textOut.Width = panel.Width;
			textOut.Height = panel.Height;
			textOut.HorizontalAlignment = HorizontalAlignment.Center;
			textOut.Text = "High Scores Go Here";
			panel.AddChildFirst(textOut);
			scene.RootWidget.AddChildFirst(panel);
			
			var request = HttpWebRequest.Create (@"http://api.scoreoid.com/v1/getScores?response=XML&api_key=" +
			                                     SCOREOID_KEY +
			                                     "&game_id=" +
			                                     GAME_ID);
			request.ContentType = "application/xml";
			request.Method = "GET";
			
			using (HttpWebResponse response = request.GetResponse() as HttpWebResponse) {
				if (response.StatusCode != HttpStatusCode.OK)
					Console.Out.WriteLine("Error fetching data. Server returned status code: {0}", response.StatusCode);
				else {
					using (StreamReader reader = new StreamReader(response.GetResponseStream())) {
						var content = reader.ReadToEnd();
						if (string.IsNullOrWhiteSpace(content)) {
						System.Diagnostics.Debug.WriteLine("Scoreoid returned no results");
						}
						else {
							XDocument doc = XDocument.Parse(content);
							var scores = (from e in doc.Root.Elements("player").Elements("score")
							select new ScoreEntry {
								Name= (string)e.Parent.Attribute("username"),
								Score= (string)e.Attribute("score")
							}).ToList();
							
							string text = "";
							foreach (var score in scores) {
								text += score.Name + " " + score.Score + "\n";
							}
							
							textOut.Text = text;
						}
					}
				}
			}
			
			UISystem.SetScene(scene);
			
			while(true){
				graphics.Clear ();
				UISystem.Update(Touch.GetData(0));
				UISystem.Render ();
				graphics.SwapBuffers();
			}
		}
	}
}

 

If you run this code, you will see:

ScreenShot

 

If you look closely at the code, the actual Scoreoid calls take only a few lines of code.  You create a HttpWebRequest passing the URL as well as the parameters in the URL ( this time we are doing a GET request instead of a POST request ).  Then its simply a matter of getting the results using GetResponse().  The remaining code is about parsing the XML results and PSM specific display code.

 

 Other Info

 

There are a few downsides to outsourcing your game server that you need to be aware of up front.  What happens if something happens to your provider or you want to switch providers?  Here is Scoreoid's policy on data from their website:

With Scoreoid your data belongs to you, we respect that you retain ownership of your data. Scoreoid isn’t another game network taking away your most valuable asset your players and game data. Our bulk storage engine is MongoDB, our preferred method of returning your data to you is via zipped ‘mongodump’.

MongoDB is a freely available open source NoSQL database with binaries available on Windows, Mac, Linux and Solaris. 

The next most obvious question… what does it cost?

This one is a bit trickier to answer, as as of right now, the pricing hasn't been set.  The good new is, right now it's completely free!  There are a number of live games currently using Scoreoid.  That then leaves the question, what will it cost?  For that, we go to the FAQ:

How much will the pro accounts cost?

We're currently focusing on adding new features and we're still working on the pro account options of course there will always be a freemium option.

Scoreoid's mission statement is to provide a free version to every developer which includes updates and new features. We believe every game developer should have an option to use Scoreoid helping them save time and cost while allowing them to improve there game titles and brand.

As for pricing we will offer a number of plans that will fit every developers budget. Currently looking at having 3 main plans between $15 to $50 per month and then a 4th enterprise plan for big publishers and big game studios.

We're also looking at the possibility of have a $5/$8 month option for developers who use very little data or bandwidth.

Our goal is be very cost effective and help game developers, most users will be fine with the free or lower end plan. Transparence is very important to us especially with our pricing model we will notify all users in advanced before we active the pro options.

We also plan on doing active surveys before we activate the pro plans as we would like to get as much feedback as possible from our users giving you a chance for direct input and influence.

 

I have been using Scoreoid since it launched what will happen when pro accounts are activated?

All current users who are using Scoreoid for active games (who have at least one live game that is using Scoreoid) and decide to upgrade to a pro account will receive major discounts and additional benefits. We will also include you in our "loyalty program".

We will keep your current plan and limits for set time limit grandfathering you into a new plan sets. Don't forgot Scoreoid will always offer a freemium option.

 

So basically, the prices aren't set yet, they will be tiered from free on up and if you publish now you will get a discount once pricing goes live. Perhaps most important of all for smaller publishers, there will always be a free tier.

 

So if you are looking at adding server side functionality to your game and don't want to roll your own solution, consider checking out Scoreoid.

Programming , , ,

8. July 2013

 

We all start somewhere and for programmers that somewhere is often Hello World.

In the first GameFromScratch.com Project Anarchy tutorial, we are going to do exactly that.  If you’ve got no idea what Project Anarchy is, you can start here.  This tutorial assumes you’ve got Project Anarchy installed and nothing more.  This ultra simple project is going to simply display Hello World to the user.  Each following tutorial will assume you have read or are familiar with all of the details of the previous tutorial, so everything we have covered in detail here will only be briefly mentioned in subsequent tutorials!

 

In this tutorial we will cover:

  • Creating a new project
  • Creating a new scene
  • Creating a script
  • Running/stopping your application

 

Fire up vForge, the heart of the Vision Engine.  In the welcome dialog, select “New Project” or select File->New Project:

image

 

In the Create Project Dialog, pick a Project name (HelloProjectAnarchy) and Directory (C:\temp\HelloProjectAnarchy) then in Project Folders, select Scenes.  Click OK.

image

 

Now we need at lease one scene to include in our project.  Select File->New->Scene:

image

 

Name the scene (HelloProjectAnarchy) then press OK:

image

 

The wizard is going to ask you how you want the renderer to work.  These values can be re-configured later, for now the defaults are all fine.  Select Mobile Forward Renderer then click the > button.

image

 

The next dialog is to configure post processing effects.  These are applied after the scene is rendered but before it is presented to the user.  The defaults (nothing) are fine, simply click >.

image

 

The final dialog is the Light, Shadows and Time of Day.  None of these matter right now, and all can be changed after the fact, simply click >.

image

 

We are now done the new scene wizard, click OK.

image

 

 

On the left hand side, select Main Layer:

image

 

Then on the right, select the Properties Tab and locate Scripting->SceneScriptFile.  If properties is empty, you do not have Main layer highlighted.

image

 

In the empty space to the right, left click to select, then pull down and select New…

image

 

In the Create a script dialog, name it(helloScript) then press OK.

image

 

Locate the Script Panel.  If you don’t have a Script panel, select View->Panels->Script Panels.

image

 

At the top of the Script Panel, click the Insert a Code snippet button and select Scene and GameScript Callbacks->OnAfterSceneLoaded()

image

 

Edit the script with the following simple Debug:PrintLine() method.  Note, Lua is case sensitive.

image

 

This code will predictably enough, be evoked after your scene is loaded.  Now let’s run your application.  In the Engine View toolbar, click the Play button.

image

 

Your application will run.  The debug test will be displayed immediately.  Look quickly, it will go away.

image

 

As you can see, the Play button has been replaced with a Stop button.  Use this to stop your application from running.

 

Congratulations, you’ve just created your very first Project Anarchy application!  Stay tuned for the next tutorial where we make your application  a bit more impressive.  Remember, in following tutorials we will assume you have read all prior tutorials, so we will not go into anywhere near the same level of detail on those topics. 

Programming ,

6. July 2013

 

As the title says, us Toronto based game developers now have our own nascent  reddit.  Granted, it’s a lonely place right now, but all things start somewhere!

 

image

 

 

If you happen to be a game developer in Toronto ( or surrounding area ), come on over and join us!

 

For those of you that aren’t from Toronto, Toronto is quietly becoming a game dev hub, even though Vancouver and Montreal get all the glory here in Canada.  There are some large studios with offices in or near Toronto including Ubisoft ( Splinter Cell ), Rockstar ( Max Payne 3 ) and Digital Extremes ( Unreal, The Darkness 2, Warframe )just down the road at London ( … the place I was born! ).  It’s on the indie side that Toronto truly shines.  Chart toping titles like Sword and Sworcery, Mutant Blob Attacks ( and more recently from the same studio, Guacamelee ) and They Bleed Pixels, among many others were all created in Toronto. 

 

On top of that, Toronto has long been a hub for tool creation.  Alias, one half the Alias-Wavefront, were formed in Toronto.  In many ways the 3D graphics industry exists because of these two companies.  Ultimately Alias created Maya, which is now owned by Autodesk ( along with the rest of the 3D industry it seems ).  Side Effects Software is also based out of Toronto, the makers of Houdini…  granted, it’s used more in movies than games, but it was used in games such as Uncharted 3 and SSX. 

 

Toronto is also home to ToJam as well as the HandEyeSociety.

 

All told its a pretty swell place to be a game developer… well, except of course for the impending real estate crash that is… So, if you are in Toronto check out /r/TorontoGameDev, hopefully we can turn it into a thriving community.  At least pop in and say hi!

Totally Off Topic

3. July 2013

 

Now that Project Anarchy is out, I’ve decided to take a look at what you actually get.  If you’ve never heard of it before, Project Anarchy is a collection of Havok game development tools made available completely free for mobile developers.  In this post, we will look at exactly what those tools are composed of.  To get started, head over to the download page and download the installer.  The initial download is just a downloader, the actual install is a great deal larger, just shy of 5GB on my system.

 

 

When I started this post, I expected it to be rather short… boy was I wrong.  Let’s just say, you get a LOT in this package.  This post will give you a pretty good idea of what you get in Project Anarchy and should give you an idea of it’s capabilities.

 

 

Getting started and help contents

 

After installing, you should have a folder structure like this:

image

One important thing to keep in mind, to develop for iOS you need a Mac and need to perform a different download.  Also it is important to note that the vast majority of Project Anarchy’s tools do not run on MacOS.  So basically, you will need a Windows and Mac machine if you want to do iOS development.  That’s pretty much normal at this point in time though.

 

A bit of a warning, Project Anarchy isn’t the only thing you will need to install.  To do Android development on Windows, you will also need the Android SDK and NDK installed, Visual Studio 2010 or higher ( Express works, but lacks Android debugging), as well as the Java 1.6 JDK.  Notice again, 1.6, not the newest version!  Seems a common trend for developer tools to require Java 6 instead of 7.  If developing for iOS, you need to have XCode and the iOS SDK installed.  There is a document specifically about getting start with Android and iOS that walks you through the process in more detail.

 

Documentation and learning resources

 

The documentation shipped with Project Anarchy is in a word impressive.  A great deal of the documentation is installed locally.  The directories that will be of immediate interest to most developers are \Docs\Vision\windows, \Docs\Vision\android, \Docs\Vision\ios, although confusingly enough, they seem to contain only slightly modified versions of the exact same documents!  So, if you want to shave 600MB or so from your install, you can probably start here.    The VisionEngine_Documentation_platformname.chm file is the master index, pulling all the other documents together.  Project Anarchy includes the following documents:

 

image

 

As you can see, a pretty comprehensive set of documentation.  The Startup Guide is the most logical place to start.  It gives you an overview of the various tools, a short Lua scripting primer, etc.  Perhaps coolest of all, there is a full sample project with assets that you can play around with.  These assets are referenced multiple times in the documentation.  There are actually a ton of assets for anyone to get started with, especially if you dont have immediate access to Maya or 3DS Max.

 

In addition to the documentation installed locally, there are a series of video tutorials available, covering vForge, Animation and the basics of scripting.  The quality of the videos varies massively from very good to… not.  There are also a series of courseware, which you can think of like tutorials that are targeted towards school curriculums.  The course ware series all revolve around the sample project you can download here (direct link, 100mb in size).  Additionally they have a StackOverflow style question and answer page as well as a remarkably active forum, considering the age of the project.

 

All told, the information available is quite good.  That said, I’ve done a fair bit of jumping into the documentation and it’s a mixed bag.  It’s well enough written and generally useful.  That said, it has some serious legacy issues, as much of this obviously was inherited from Havok tools, and they’ve been around for a long time.  For example, I found configuration details for Metrowerks Codewarrior… a compiler that might be older than some of the people reading this right now!  So there is a huge amount of documentation, but figuring out which parts you need might be a bit of a challenge.  In the end though, it’s much better than I was expecting and a very well documented and supported SDK.  You can tell they put some focus on documentation/new user experience, and it shows.

 

vForge

 

In many ways vForge *IS* Project Anarchy, in the same way Unity Studio is Unity.  This is where you create your levels, write your scripts, create landscapes, etc.  Basically it’s the glue that holds all the other pieces together.

 

Here is vForge with the RPG project loaded and the Arena scene open.  FYI, the RPG project is available at Data\Vision\Samples\Engine\RPG

image

 

You can navigate around the scene using the mouse.  Aiming with mouse, left mouse button to move in the direction your are looking, right mouse button to change your look direction.  You can also configure it to use WASD keys for navigation if that is your preference.  See where it says “Default Layout”, this is where you can change the layout between the various things you might want to do in vForge, such as script editing, particles, etc.  You can also define your own custom layouts, or use almost every panel as undocked, which is nice on a multi monitor setup.

 

In Engine View, this is where you can place items in the scene.  Here for example, I instanced a BOSS shape from the Shape Creators tab by dragging and dropping onto the Engine View.

 

image

 

Press the Play icon in the Engine View toolbar, and your game will start playing, UI and all ( animated obviously… ):

 

image

 

So, vForge is where you place game objects, but that’s just scratching the surface.  There are a staggering number of tools embedded in here… see:

 

image

We will look at many of them shortly.

 

Script Editing and debugging

 

For example, opening the Script Panel, brings up a script window.  Here is the Boss script:

 

image

 

As you can see, the script editor has full intellisense support, well if that wasn’t a trademarked Microsoft term that is.  What’s the non-trademarked term… code hints?  Anyway… it has them, and I love ‘em.  It’s not as detailed as you might be used to in Visual Studio, but its a great help.  That ? icon to the right brings up context sensitive help too, so highlight a function name and click that button and it will open the reference help to that entry if found.  Handy.

 

Each of these floating panels can also be docked within the main editor, here is the script panel docked below the Engine View for example:

 

image

 

The script editor looks remarkably simple, but there is a great deal of functionality hidden in there.  For example, there is a full snippets library:

 

image

 

In addition to the Script Editor, there is also a full script debugger:

 

image

 

With all of the traditional components you would expect, breakpoints, watches, type inspection, it even allows you to connect to a remote device for debugging.

 

Perhaps coolest of all, by clicking the highlighted debugger, you can invoke the code profiler.

 

image

 

Allowing you to identify performance bottlenecks in your scripts. 

 

 

Terrain

 

Creating Terrain in vForge is a straight forward process.  In the Shape Creators tab, simply drag a Terrain over to your scene:

 

image

 

You will then be prompted with this dialog:

 

image

 

Then its a matter of configuring your terrain:

 

image

 

And presto, our landscape, using the default settings and sand texture:

 

image

 

Now fire up the Terrain Editor and you can raise, drop, smooth, paint, etc… your terrain.  Select the tool, and hold down SHIFT or CTRL and Left Click to paint.

 

image

 

And after playing around for a few minutes:

 

image

 

Obviously I am just playing around and using a fraction of the tools.  You can paint mesh (instances) directly on to the terrain, paint billboards ( textures that always face the user, useful for grass and similar effects ) as well as set up sky boxes including full day/night cycles.

 

In fact, there are dialogs for editing the sky:

 

image

 

Editing time of day, including the effect, sunset and sunrise times:

 

image

 

As well as fog editing and post processing effects ( glow and tone mapping, two settings you chose when initially creating your project ).  So the terrain editing tools are fairly comprehensive.

 

Particles

 

Of course, particles are a heavy part of almost every modern tool and of course, vForge includes a suite of tools for working with/ creating particle systems.  In the form of the particle editor:

 

image

 

This is one of those things I have always sucked at, so it was comforting to see the templates when I clicked the Create a new particle effect button:

 

image

 

The actual editor has a few hundred different settings for your particle system, if you create a particle system, then set it to your newly created system, you can press the play button and watch your change in real time.

 

 

Physics Integration

 

As you can see, Havok Physics is also directly integrated into vForge

 

image

 

Of course, that is only part of the physics equation…  the global part.  You are of course going to need to add physics to your scene.  This is accomplished by means of components.  Add an entity to the scene, define its model type, then you can add a component easy enough.  In this case, i’ve add an entity with a ball model.

 

image

 

Here we selected then entity then added the Havok Rigid Body controller.  As you can see, there are a number of parameters you can play with for Rigid Bodies:

 

image

 

Of course, rigid bodies aren't your only option when it comes to physics.  There are a number of constraints you can add as well ( under the Shape Creators ), such as adding a Terrain constraint to the Terrain object, which will then cause our Rigid Body Ball in interact with the terrain.

 

Mobile Helpers

 

Mobile development has it’s own special difficulties, two of which Project Anarchy has a nice solution to.

 

The first common issue is the deploy cycle.  Generally what you do (on Android) is create an APK, which is your application and all of it’s data bundled together into a single package.  So what happens when you change a few small things then want to test it on device?  Well, you create a new APK file and deploy it.  As your application grows in size, this process gets more annoying.

 

Enter vFileServe, which can either be run in vForge or as a stand alone application.

 

image 

 

Essentially it acts as a virtual file system.  You deploy an application to your device ( using the Prepare Devices Button), which then syncs files between your device and vFileServe using wireless.  This allows you to make changes and do rapid on device testing.

 

Another common problem with developing for mobile devices is emulating the controls.  Multi-touch and motion controls specifically are often difficult to replicate on a PC.  For this Havok provide the vRemoteInput plugin, which enables you to use a mobile device to control vForge.  It is enabled in code however, so there is very little I can show in terms of screenshot.  Basically once enabled, when you go into “play” mode, your game can be controlled using your devices touch screen and motion sensors.

 

Shaders

 

There are also comprehensive tools for dealing with shaders.  The first and easiest to use is the Visual Shader Editor:

 

image

 

This tool enables you to create shaders by linking items and operations together.  For those that prefer direct access to their shaders, there is also an editor:

 

image

 

On top of this, there are panels for creating and managing shader libraries, property inspectors and more.

 

Havok AI

 

AI is obviously a big part of game programming and the user is often left to roll their own.  Not so in Havok, Project Anarchy includes the Havok AI suite.  This is a combination of a set of tools integrated into vForge, as well as many AI related functions available to the programmer.

 

Here are global AI settings:

image

 

In vForge, you have the ability to set up Nav meshes, which consists of geometry that define the navigable portions of your game:

 

image

 

You also have the ability to makes paths ( bezier splines ) for AI to follow, triggers and more.  The majority of Havok AI seems to be on the developer side, with a large number of api calls for things like determining the best path, etc.  I need to look into Havok AI in greater detail later.

 

Havok Animation Tool

 

This is another entire application, seemingly for making animation state machines, so basically for “gamifying” your rigged animations.  Yeah, I think I made that word up.  Truth is, I am not an animator, so this is way outside my pay grade…  anyways, here is Havok Animation Tool running an included example project ( located at C:\Users\Mike\Documents\Havok\Havok Animation Tool 2013.1.0.0-r1\GameAssets\Hero on my PC ).  You can control the characters animations using a game pad.

 

image

 

Again… not my realm of knowledge, so I know very little about this tool.  I believe this was a good part of the product known as Havok Behaviour.

 

Other Tools

 

There are a collection of other tools that are part of Project Anarchy as well.

 

One is the Visual Debugger

image

In Havoks words:

The Havok™ Visual debugger (VDB) is a very convenient tool to monitor the physics representation of a scene in real-time. By watching the physics objects in the visual debugger, you can quickly locate any potential errors, which may not have been located by viewing the scene in vForge alone.

 

vFontGenerator

image

For creating fnt bitmap font files.

 

vSceneViewer for viewing scenes (outside of vForge)

image

 

vModelViewer the name pretty much says it all, for viewing Project Anarchy model files:

 

image

 

vAnimTool You can load a model and anim animation file preview and edit animation sequences:

 

image

 

Art Pipeline Tools

 

There are plugins for Max and Maya for exporting 3D content.  I don’t have either currently installed, so I can only show this screenshot taken from the documentation:

 

image

 

So then… what happens if you don’t have Max or Maya?  Well, you are out of luck.  There is a 30 day fully functioning trial available, but unless you are a student there is a 5000$ pricetag at the end of that trial.

 

Fortunately, that is just a temporary problem, from the ProjectAnarchy answers website:

 

Based off the community feedback we are currently working and testing an FBX importer. We realize that many users in the community use other modeling packages and the FBX importer will help those users with being able to get their assets in.

 

Once that importer is available you will suddenly be able to use tools like Blender, Cheetah, Poser/Daz, Silo, etc.  Basically any tool that exports FBX, which is just about every modern app.

 

Summary

 

There’s tons of functionality packed in this engine, and this is just looking at the tool side of the equation.  Of course there are dozens upon dozens of APIs behind the scenes as well.  In the future I will look closer at how you actually put it all to use.  Let me know if there is anything you specifically want covered.

 

I will say, I am a lot more impressed than I thought I was going to be.  I thought it would be a bunch of poorly documented tools mashed together with minimal documentation.  In reality, it’s a remarkably cohesive and powerful package that covers almost all of the bases.  They certainly have my interested piqued.  Good job Havok!

General, Design, Programming , , ,

2. July 2013

Back in March I reported that Ludei was bringing WebGL support to their HTML5 performance wrapper, CocoonJS.  Today I received the following email:

 

The latest version of our Cloud and Launcher is available now! 
The wait is finally over! CocoonJS1.4 is NOW available in Google Play! We are still pending approval with the Apple App Store, so please check daily for its debut! This version includes the following awesome features:

  • WebGL support is now available! For the first time ever, publish your 3D games to iOS and Android devices!
  • Convenient 1-click Publishing to 5 App Stores -- bundles generated for: Apple, Google Play, Amazon, Chrome Store, Pokki
  • Improved Configuration Options for the Ludei Cloud Compiler
  • Updated Third Party SDKs -- advertisements, social integration and in-app payments
  • Improved Resources Management
  • Improved Audio Implementation that supports more HTML5 features
  • Improved webview support allowing you to develop HTML5 web apps while still having all our extensions available to monetize and make your game or app successful
  • And much more!! Click here to read the blog post!

 

This means you can now develop WebGL games and use Cocoon to deploy them to iOS and Android.  I am not sure if you ever tried running a WebGL application in a mobile browser… it's appalling.  None of the official browsers support WebGL, and the few that do ( Dolphin? ) got abysmal framerates.  So, if you want to run a high performance WebGL based game on mobile devices, CocoonJS is about your only option.

If you've never heard of CocoonJS, it's basically a high performance, striped down browser optimized for gaming.  It acts as a host for your game, so you bundle your game and Cocoon together to create an App Store deployable application.

 

In the same release, Ludei also announced:

Ludei Secures $1.5M in Funding 
We just announced that we recently received $1.5M in funding from key venture capitalists and angel investors, further validating the increasing industry support of HTML5 development. Click here to read more.

So you don't need to worry about they going anywhere sometime soon!

News , ,

 

Month List

Popular Comments

November 2011
Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
2. November 2011

 

 

 

If you have left a comment recently and it appears to be gone, or if you get notification of a comment that when you check it doesn’t appear to exist, don’t worry you are not alone!   Something screwy is going on and sadly it is outside of my control as comments are handled offsite by disqus.  For some reason it isn’t consistently showing new comments, although old comments appear to be working fine.  Hopefully it will be resolved soon.

 

In the meanwhile, rest assured I can see all of the comments are in fact intact on disqus.com, so hopefully this is just a brief interruption.  If you want to contact me and comments remain down, you can email mike [@] gamefromscratch [dot] com.   Can you tell I’m sick of spambots? Winking smile

 

Hopefully this is a very short blip.

 

EDIT:  They appear to be back…. for now.

 

EDIT2: 11/6/2011, it's happening again.  Pay no attention to the comment totals at the top of a post, click into the post to see if there are comments.  IF you made a comment and it disappeared, do not worry, it's still there... somewhere.  I think I have erased two comments total since starting GFS, one was a racist diatribe and the other was a spam bot, so don't worry, I didn't erase it.

Totally Off Topic

 

Month List

Popular Comments