Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

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.

 

image

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 ).

 

image

 

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.

 

 

 

image

 

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:

 

image

 

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:

 

image

 

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:

 

image

 

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:

image

 

 

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 192.168.2.103:80

 

Set the server name to your servers name, or if you haven’t got DNS configured ( such as yourserver.yourname.com ) 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 192.168.2.103

 

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 # http://httpd.apache.org/docs/2.2/mod/core.html#options # 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.

image

 

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:

 

image

 

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

 

Read tutorial 2

Programming , ,

3. June 2012

 

I mentioned Cocos2d-html a few days ago, a HTML5 port of the popular Cocos2D game library, they released a tech demo showing the game in action, Moon Warriors.

 

 



I'm not sure how well that will embed within my blog software, so if you have trouble playing you can open it directly here.  You can control it using the standard WASD keys, simply click the app to start ( or reload this page to stop ).  It was released under the GPL and you can download the full sources here.

 

 

As you can see, it’s a capable library and if you are interested in HTML5 game development, is certainly one to consider!

News ,

31. May 2012

 

 

Alright I admit it, something shiny and new came along and of course I am attracted to it!  As I mentioned a few days back, the Cocos2d-x team released Cocos2d-html, an HTML5 port of theCocos2dHTML5 popular Cocos2D iPhone game library.

 

I have never worked with a Cocos2D library yet, although Sony’s GameEngine2D is based heavily on it.  So I jumped in to the HTML5 version and I have to say I am extremely impressed so far.  Therefore I am going to do a (simple?) tutorial series on using Cocos2D-x to create HTML5 games.  I am not sure exactly how much detail I am going into but it should be kind of fun.  Expect a setup and Hello World tutorial post anytime.

 

Don’t worry though, I am still working on new PlayStation Suite tutorials, still intend to do an HTML5/RPG tutorial ( although whether I use HTML5, or a library like Cocos2D-x is up in the air, working with a library is so much nicer! ) in the near future and yes, I am going to finish my C++ game tutorial too.  What can I say, I love juggling projects.

 

So, if you are interested in developing 2D games targeting HTML5 web browsers be sure to keep an eye on this space, something will be coming soon!

 

If on the other hand, you are a Cocos2D veteran and you seem me doing something stupid, please let me know!

 

Smile

General ,

30. May 2012

 

There was an interesting ( to me anyways… ) topic on Reddit today about making games that are accessible to the blind or visual impaired.  After thinking about this for a little bit, I though that there might be a remarkably easy way to add text to speech to a console based game.  Turns out I was correct.

 

 

The following is a C# app that makes heavy use of the .NET System.Speech libraries, however it does appear to be available in Mono, so it should work across platforms.

 

In the end the process is remarkably simple, all I am doing is redirecting Console.Out ( StdOut ) to my custom class, which converts the text to speech.

 

Let’s take a look, this code is across two classes.  One is our exceedingly simple game:

 

using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace AudibleTextAdventure { class Program { private static StdoutToSpeech speechOut; static void Main(string[] args) { speechOut = new StdoutToSpeech(); Console.SetOut(speechOut); Console.WriteLine("You are standing in an open field west of a white house, with a boarded front door."); Console.WriteLine("There is a small mailbox here."); bool done = false; while (!done) { Console.Clear(); Console.WriteLine("What would you like to do?"); string currentCommandString = Console.ReadLine().ToLower(); string [] tokens = currentCommandString.Split(new char[] { ' ' }); string currentCommand = tokens.First(); switch (currentCommand) { case "volume": { if (tokens.Length > 1) { if(tokens[1].ToLower() == "up") speechOut.VolumeUp(); if(tokens[1].ToLower() == "down") speechOut.VolumeDown(); } break; } case "quit": done = true; Console.WriteLine("Thank you for playing, Goodbye"); break; case "help": Console.WriteLine("Sorry, you are beyond help"); break; case "changevoice": speechOut.NextVoice(); break; default: Console.WriteLine("I don't know the work \"" + currentCommand + "\""); break; } } } } }

 

 

Most of that code is the skeleton of our “game”.  The majority is just getting and displaying strings as well as parsing and handling the commands our game accepts. The only lines of any real consequence here are:

speechOut = new StdoutToSpeech(); Console.SetOut(speechOut);

 

Here we declare our StdoutToSpeech object we are about to define in a second, and replace the standard output stream with it.  Now lets look at StdoutToSpeech:

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Speech; using System.Media; namespace AudibleTextAdventure { class StdoutToSpeech : System.IO.TextWriter { static System.Speech.Synthesis.SpeechSynthesizer synthesizer; static SoundPlayer soundPlayer; static System.IO.TextWriter origOut; static int currentVoice = 0; static List<System.Speech.Synthesis.InstalledVoice> voices; public StdoutToSpeech() { // Grab a reference to Stdout before it's overridden origOut = Console.Out; synthesizer = new System.Speech.Synthesis.SpeechSynthesizer(); // Will bork if no voices found voices = synthesizer.GetInstalledVoices().ToList(); synthesizer.SelectVoice(voices.First().VoiceInfo.Name); // Slow it down a bit synthesizer.Rate = -1; synthesizer.Volume = 5; soundPlayer = new SoundPlayer(); } public override void WriteLine(string value) { // We still want text to show... origOut.WriteLine(value); using (System.IO.MemoryStream mem = new System.IO.MemoryStream()) { synthesizer.SetOutputToWaveStream(mem); synthesizer.Speak(value); soundPlayer.Stream = mem; soundPlayer.Stream.Position = 0; soundPlayer.PlaySync(); } } public void VolumeUp() { if (synthesizer.Volume < 10) { synthesizer.Volume++; this.WriteLine("Volume increased"); } } public void VolumeDown() { if (synthesizer.Volume > 0) { synthesizer.Volume--; this.WriteLine("Volume reduced"); } } public void NextVoice() { currentVoice++; if (currentVoice >= voices.Count) currentVoice = 0; else { synthesizer.SelectVoice(voices[currentVoice].VoiceInfo.Name); this.WriteLine("Voice changed"); } } public override Encoding Encoding { get { throw new Exception("If you are trying to use this as text, you are in for a world of hurt!"); } } } }

 

In our constructor we create our System.Speech.Sythensis.SpeechSynthesizer, set a voice, default speed and volume for it.  We also instantiate our SoundPlayer which is going to actually play the sound file our synthesizer um… synthesizes.

 

The key to this class is that it inherits from System.IO.TextWriter, this is the only type that we can set standard out to.  Our class must implement the Encoding:Get method, which if anyone actually called would cause all kinds of problems, so we throw an Exception if it is actually called. In the constructor we take a snapshot of the original standard out, so we will still be able to print to text.

 

Otherwise most of the work happens in our WriteLine overload.  First we print out to the original standard out, otherwise our command prompt would become audio only!  Next we create our memory stream that our synthesizer is going to record to.  We then render whatever speech was printed via a Console.WriteLine() call, set it as the active stream and play it using our soundPlayer.  We using PlaySync() to make sure it finished playing before continuing execution.  You could use Play(), but it would only render the most recent sentence if a couple lines where written at once.   Also note, we only overrode WriteLine(string), so if you do Console.Write, Console.WriteLine(char[]) or any other version, nothing will happen.  If you want to support more versions, you need to implement.

 

Otherwise the rest of the code provides a simple interface for increasing and decreasing volume, as well as changing between voices.  Keep in mind though, if you are using Vista or Windows 7, you probably only have on voice installed.  You can however add additional voices ( including different languages ), I download one from here for example ( copy the dlls to your debug folder if you get an error ).

 

 

Now when you run the application, you can use the following commands:

quit – exits the “game”

volume up – increases the voices volume

volume down – decreases the voices volume

help – displays a help string

changevoice – changes to the next installed voice, if you have any.

 

 

Obviously in a real game you would do substantially more.  In a real game you would also add a great deal more error checking too, as this is just a proof of concept I slapped together!  Obviously use at your own risk, as I offer no warranty.  Then again, I never offer a warranty…

 

 

And here it is in action:

Text to speech adventure in action

Programming ,

30. May 2012

 

 

As some of you may have noticed earlier today, the site was displaying a configuration related error message.  I am frankly a bit confused at what the cause was, as when I modified my web.config to show me the error, it went away!

 

Also, if you’ve gone to use the contact me form, you may have noticed I added a captcha to the form.  I hate to do this, as I hate captcha’s.  Unfortunately I have a script kiddy attacking the site as a result of my comments about C++.  ( sigh )  His/her attack script was resulting in an annoying number of emails being generated and thus… the captcha.

 

As a result of all of this, I’ve decided to take today to apply all the outstanding updates.  This unfortunately means a bit more downtime.  So if you have a bit more trouble today accessing the site, this is why.  Hopefully when I am done we will have an all around happier, more secure and quick GameFromScratch.com.

 

Again, sorry for the outages.

 

 

EDIT:  Had another outage, so I did a bit of investigating and found out why.  Apparently our intrepid hacker friend had two other friends who more or less have been slamming the server all day with hacking scripts.  GameFromScratch is actually hosted on pretty solid servers with a good sized pipe so we can survive this.

 

What we cannot survive however is running out of disk space.

 

Oops.

 

Apparently the hack attempts grew the log files quite a bit which was resulting in running out of disk space causing the error.  The log files weren’t actually filling up the space ( that was my screw up, I automatically back up a database daily… didn’t realize that database was up to 2GB in size! So I pruned a few dozen 2GB backup files and now a 200mb log file wont do a thing), but they illustrated that I was running out of disk.

 

That said, this was just slapping a band-aid over the problem, so I’ve gone one step further.  First off, I implemented firewall level blocking, so all of these addresses are now blocked.  Next I put in intrusion detection that will automatically reject people making too many connections.  The threshold is pretty high, you have to try pretty hard to trip it if you aren’t a bot, but if you receive a 403 message, this is why.

 

Hopefully this doesn’t cause any of you problems.  If you do have connection problems to this site, please let me know!

 

It’s a shame I have to do this stuff at all.  Some people take their programming languages FAR too seriously.

Month List

Popular Comments