My first 48 hour game jam

Last weekend I had the chance to participate in my first 48 hour game jam for Mini Ludum Dare #41 which was a lot of fun.

My entry is here: http://www.ludumdare.com/compo/minild-41/?action=preview&uid=19985

Beginning

The first thing I did on Friday was to check the Ludum Dare Website to make sure it was happening.  I was surprised to read this post and find out that not only was it happening but it had started for some on March 11th.  Oh well I wanted to do the 48 hour challenge in any case to train myself for the big Official Ludum Dare 26.

My first task of course was to come up with a concept that I would be able to carry out in the time limit.  Thing is, I know myself.  I can’t just grind endlessly on something over a weekend, I knew that real life pops up, I knew that I might get lazy, and I knew that everything always seems like less work than it will be.  With this in mind I decided to start with a simple prototype story.  I would use Inkscape to create graphics to complete a short story arc and then code a screen switcher to swap between screens.  Once I had this protoype working I could add in a game portion that would be required to advance the storyline.

Inkscape

Friday night I sat down at Inkscape determined to get all the graphics hammered out the first night so I could focus on my game mechanics for the rest.  The first character came together very quickly.  I don’t have the original here but for fun I thought it would be fun to show how the vampire was built with an evolving photo.

Step 1: Create the basic shape, in this case simply a circle, big rectangle, then two small rectangles for shoes.  I used a stroke size of 2 for the face and the shoes with 4 for the cloak so it would have a thicker outline for a trim.

Step 2: Create the face.  An oval for the eye then duplicate and shrink it and pick the color, then copy and shrink again and place it to finish the eye.  Next just select the 3 elements and group them (Ctrl+G), then we can just duplicate them (Ctrl+D) and mirror it for the second one.  Another circle for the mouth but this time we’re going to convert object to path and move the nodes around until we get a good looking mouth.  A simple triangle for the tooth, then move the nodes again to make it tooth like.  In recreating this I spent way too much time before it looked alright to me.  I actually like how the teeth turned out in the game better.  That’s the danger of creating art you can end up tweaking things forever.

Step3: The cloak was the last big change it was a little more tricky.  I converted it from object to path then started adding new nodes like crazy and pulling them out to make the shape of the cloak, luckily I like the sharp look for the cape so I didn’t have to twiddle them too much.

Step4: For the inside line of the cloak I just used the Bezier pen and changed the stroke to 4 to match the cloak.  I ended up not finding the red deep enough so I changed the color on both the cloak and the bezier line.  The final step was the shoes, again just converted to a path and deleted both to nodes and stretched out the bottom nodes to create the arc for the shoes.

As you can see for me it can take a bit of work to get your art done, for me I ended up being a bit too slow and/or picky.  Between that and some anime procrastination I didn’t end up hammering out all the images the way I wanted them until Saturday night.

Code Blitz

(Side note, this picture took me way too long to make, it was meant to be a quick throw together and did not work out.  It is meant to be my place of programming but due to the lack of furniture ends up looking kind of like a school…)

Finally the time came for programming.  I put on my programming hat and sat down to code the story switcher.  A few hours later I was looking at a lovely story.  It was Sunday around noon and all I had was a story, lovingly illustrated and coded.  Unfortunately I wasn’t entering a story contest but a game contest, it was time to hack together a game portion and get it in as fast as I could.  My blood boiled and I heard the distant cries of war and havok.  It was time to code an rpg in just a few hours.

I ripped into action coding a character, generic enemy class, and all the functions I would need for combat.  Combat ended up being directly hacked in on the attack button with a timer then auto linking to the enemy turn after the player had time to see the damage done to the opponent.  It worked flawlessly! Just kidding, I spent an hour or so debugging all the various mistakes I had made, luckily most of the stuff was easily solved.  There was just one difficult bug which frustrated me.  When that was out of the way I had a finished game.

I looked at the clock: 2am.  My deadline was 3am. Do I want to try to hack in a third combat?

My sense of self preservation kicked in and I submitted my game.

(This account does not include various breaks for eating, drinking, running around like a maniac, watching anime, typing emails to people, doing exercise, playing with the cats, looking at cute cat pictures, and all the other various activities that fill a weekend.  The project probably took me altogether around 10-15 hours of “real” work.)

Epilogue

This was my first code jam and it certainly won’t be the last.  I’ve been having trouble getting motivated recently and there’s nothing like the molten fire of a deadline burning through your veins for inspiration.  It also loved that I had to come up with a simple Idea, execute it and release in such a small amount of time.  It led to me making quick decisions and making things work rather than getting bogged down in perfectionism and analysis paralysis.  I’m really excited for Ludum Dare 26!

Edit:

Published my 48 hour game jam game on both Kongregate and Newgrounds. If you have an account and want to give me a rating, or if you haven’t seen it yet the two links are below:

http://www.kongregate.com/games/silkenshadow/the-adventures-of-bloopy-blood

http://www.newgrounds.com/portal/view/614869?updated=1

Inkscape: One programmers journey towards art

So over the last little bit I’ve fallen in love with Inkscape.

Allow me to explain.

Software Developer(Definition):

An odd creature created from a blend of artist and scientist.  Thrives best in environments that contain powerful creation tools.  Depending on the the variety of developer habitat can include light airy offices or dark sanctums.  Can be dangerous to disturb this creature when in “The Flow”.  Can be surly or affectionate depending on how it is approached during relaxation time.  Pay attention to it’s scientific and artistic dichotomy as neglect of either side  may cause it to wander away in search of other challenges.

Inkscape

An open source vector graphics editor

Why it’s awesome

For me I think better with numbers and the ability to break things down into parts and modify how they fit together.  Inkscape lets me do this.  I can approach building a graphic in the same way that I approach building a program.

My Story

I love the time designing a program and bringing it to life with code, I’ve spent a lot of time studying software design and feel confident in my ability to bring most reasonable plans to fruition.  However the websites and games that I built unfortunately  looked like crap.

When I decided to tackle game development I realized that unless I could hunt down and capture an elusive graphic specialist I was going to have to figure out a way to make some decent graphics for myself.

Enter Inkscape.

I’d tried before, I really had, with GIMP, Photoshop, MS Paint, and other rascals. This time however I stumbled across a mention of a great open source program called Inkscape.

I was intrigued.

Our first encounter was somewhat tenuous.  I created a few basic placeholder graphics for my game.

“Hmmmm” thought I “Not a bad tool”

My graphics however (If one can call them that) disagreed, my spaceship was made up of ugly chunks of color vaguely reminiscent of a beetle.

Once the code was mostly done I realized to my disappointment that no mythical hero had emerged from the mists to provide all my graphic needs.  I was going to need to actually sit down and try to make something halfway decent.

As mentioned in this post I made my way through a few tutorials the best of which introduced me to gradients.  Ahhh gradients, such lovely things.  With their help I was able to transform my game and my next ship became a shiny triangle of doom!

This also allowed me to shiny up the rest of my game as is demonstrated by the before and after versions of the game in the link above.

I had a tiny taste of how Inkscape could provide someone like me with opportunity despite my undeveloped artistic talent.  I decided for my next game I would tackle the human form.  Stick figures are of course the beginning of any artistic venture into humanity so I found a wonderful tutorial and got to work.  This tutorial works on advanced stick figure building based off a talented webcomic artist’s comic: Order of The Stick. It was a long tutorial but great, and by the end I had my first character.

I was pretty happy with her but besides some minor modifications she was still based on a design from a tutorial and I wanted something original so I set off for the next goal: To create my own unique characters

With my creative powers burning I was able to create the following characters over the course of a week

I’ve also been working on the design for a login screen for my next game: Kaerno Labs

I’m sure that as my art continues to evolve these graphics will quickly be surpassed but for now they represent an unimaginable leap into the art unknown for me.  I’m excited to see what the future will hold.

If I can do it, anyone can, so why not get started?

Flash to PHP to mySQL using FlashDevelop

The goal: A connection from a flash project to an external database

The method: From what I’ve read an AS3 -> PHP -> MySQL connection is simple and easy

The challenge: translating tutorials meant for Flash CS3 to FlashDevelop and generally understanding and absorbing the new skills and tools

Letttttttt’s go! Ganbatta Masu! (I’m going to do my best in Japanese… been watching too much anime recently)

A tutorial to provide guidance

So for starters let’s find a tutorial to base our experiences off of… hmmm this one looks good

Installing WAMP

So I’m working with Windows 7 64 bit so I’m going to head over to the WAMP(Windows, Apache Server, MySQL, PHP) website and download it for local database/php testing. I’m given four choices so I ended up picking the newest versions I could find for 64 bit which was Apache 2.4.2 – Mysql 5.5.24 – PHP 5.4.3 XDebug 2.1.2 XDC 1.5 PhpMyadmin 3.4.10.1 SQLBuddy 1.3.3 webGrind 1.0 (Not sure why this was the second choice listed instead of the first but meh, I’ll hope for no problems.

First  install WAMP, then click on start all services, (NOTE: If you run Skype in the background like me you should know there is a port conflict and WAMP will not work while Skype is running, exit Skype and run all services on WAMP) (If you care enough I’m sure there are relatively easy workarounds, feel free to let me know about them)

Setting up the database

Next step, setting up a database. (Also yes this is totally out of order of what their tutorial does, I’m mostly just browsing through it for information to fill out my own workflow)

Setting up a database, you can do this through the GUI by clicking on the WAMP Icon and using phpMyAdmin or if you’re like me and prefer to work with databases on the command line then click MySQL and select MySQL Console.  Either way it’s a good idea to have scripts setup so you can recreate your database in the future.  I’m creating a very basic login table for starters.

CREATE TABLE user
(
userID INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(255),
password VARCHAR(50)
);

next I’ll add in a basic user

INSERT INTO user (username, password) VALUES (‘user’, ‘pass’);

Setting up a PHP -> MySQL connection

Ok done with user table for now, let’s click on WAMP again, select “www directory” where WAMP keeps it’s PHP files and create a new php file called databaseConnection.php.

We’ll open that up in an editor (I use Notepad++ but I suppose if I end up doing a lot more PHP work I may look for a more full featured IDE) and put in some basic code to test that we can make a PHP -> MySQL connection, we’re going to use the code from the tutorial but we should probably go back later and convert it to use the PDO extension since it supports prepared statements which are pretty useful for sanitizing user input.

Anyway for now we just want to verify it works so we’ll use:

<?php

$db_name = “loginTest”;
$db_username = “root”;
$db_password = “”;
$db_host = “localhost”;

mysql_connect($db_host, $db_username, $db_password, $db_name);
mysql_select_db($db_name) or die (mysql_error());

echo ‘success’;

?>

Save it to your www directory, pop open your browser and head to http://localhost/databaseConnection.php to see a little success message.  Excellent.  We’ve got mysql->php action so we’re a third of the way there.  Before we go further let’s remove that success echo so it won’t break the next part.  Great, now let’s move on.

Creating the POST PHP page for AS3 to connect to

So in order for AS3 to be able to pass variables to PHP we’re going to need to make a post page.  I modified the one in the tutorial and named it loginTest.php:

<?php
// Connect to database
include_once “databaseConnection.php”;

// Get username and password passed
$username = $_POST['username'];
$password = $_POST['password'];

// Check that it was called from flash
if ($_POST['systemCall'] == “checkLogin”) {

// Create query
$sql = “SELECT * FROM user WHERE username=’$username’ AND password=’$password’”;

// Run query
$query = mysql_query($sql);

// Count response
$login_counter = mysql_num_rows($query);

// Handle response
if ($login_counter > 0) {
$response = “Success”;
} else {
$response = “Failure”;
}
//Send response
print “systemResult=” . $response;
}
?>

Bonus Section: Converting it to PDO in order to have access to prepared statements

It seems that PHP mysql queries are generally not a great way to work with your database since you’ll need to clean up and sanitize your user input by hand.  From what I’ve read PDO seems to be the way to go.  I took a look at this tutorial and converted my PHP script to use PDO, this isn’t required but if you’re also interested the modified code is below:

<?php
// Connect to database
$db = new PDO(‘mysql:host=localhost;dbname=loginTest;charset=UTF-8′, ‘root’, ”);

// Get username and password passed
$username = $_POST['username'];
$password = $_POST['password'];

// Check that it was called from flash
if ($_POST['systemCall'] == “checkLogin”) {
// Create query
$query = “SELECT * FROM user WHERE username=’$username’ AND password=’$password’”;

// Run query
$stmt = $db->query($query);

// Count response
$rows = $stmt->rowCount();

// Handle response
if ($rows > 0) {
$response = “Success”;
} else {
$response = “Failure”;
}
//Send response
print “systemResult=” . $response;
}
?>

Creating a FlashDevelop project

So I’m going to stick to the basics for this project so we’re just going to create a new AS3 Project and we’ll just use the main method to trace information to create a AS3 -> PHP connection.  So here is the code for the main class:

package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.net.*;

/**
* Testing a mysql connection
* @author William Drescher
*/
public class Main extends Sprite
{
public function Main():void
{
if (stage)
init();
else
addEventListener(Event.ADDED_TO_STAGE, init);
}

private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point

//Set up the URL
var url:String = “http://localhost/loginTestControl.php&#8221;;
var phpFileRequest:URLRequest = new URLRequest(url);
phpFileRequest.method = URLRequestMethod.POST;

//Set up the variables to pass
var phpVars:URLVariables = new URLVariables();
phpVars.systemCall = “checkLogin”;
phpVars.username = “user”;
phpVars.password = “pass”;
phpFileRequest.data = phpVars;

//Set up retrieval
var phpLoader:URLLoader = new URLLoader();
phpLoader.dataFormat = URLLoaderDataFormat.VARIABLES;
phpLoader.addEventListener(Event.COMPLETE, showResult);
phpLoader.load(phpFileRequest);
}

public function showResult(event:Event):void
{
trace(“data: ” + event.target.data);
trace(“systemResult: ” + event.target.data.systemResult);
}
}

}

 

Everything should work for you and you should see the result Success but in case it didn’t… I had a few bugs to work out that I’ll run through in case you have the same problems, first I had extra whitespace before the <?php tag in my included databaseConnection.php file and AS3 apparently doesn’t like that. Check for trailing whitespace as well as that can give errors as well.  That’s the reason I have the two trace statements, event.target.data can give extra useful information if your variable is returning undefined.  It can also be helpful in confirming that you’re actually getting a response, I had a typo in my loginTest.php file and it took me a little while to catch.

Well good luck to you, I’m hoping that I helped save some time and effort for you.

Best of luck!

Published!

Ok So I’ve published my game on Newgrounds and Kongregate if you want to give me a review or just check it out the links are here:

Newgrounds

also up at

Kongregate

Release Version

First the new version is here (Edit: Had to change the name since there is a game on Kongregate called Square Shooter already):

Square Combat: The Shooter – First Release Version

New source code is here:

Square Combat: The Shooter – Github

So I’ve been thinking about it a lot and I’ve decided that this version is good enough for a release.  I’m going to work on getting it posted on Kongregate and NewGrounds this week and will hopefully have releases on both of those sites up by next week.  I’ve done a lot of tweaking, changed the player and enemies size, changing the sounds, cleaning up the code, etc.   That said I feel like I’m drawing out this game rather than advancing right now so after this release I’m planning to start another short game.  I joined One Game a Month and am going to try to keep to their schedule of getting out a game every month even if it’s not necessarily a great one.  I think I need to get a few more projects under my belt and learn some new skills before I develop this game further.  That said I’m going to try to focus on a different area each month, I’ll pick a game type and a technology that I would like to get in there.

After I get Square Shooter released I’ll run through a few ideas for February’s game and pick one.  I’m actually pretty excited to work on something different for awhile.  When I’ve decided on something I’ll post my original design here.  It will be interesting to see how much it changes.  I’ve been working on Square Shooter for months and ended up creating a much simpler version than I originally intended.  We’ll see if my next idea ends up being more realistic.

Programming Contests

So after reading this article about how the indie game Faster Than Light  used game contests to keep them inspired, I started thinking about the importance of keeping up a little more with game news as well as entering contests myself.  I certainly don’t have anything worthy of contests yet but I thought in order to try out some new game ideas as I continue to develop Square Shooter I would look at some 48 hour game contests.

The two big names in 48 hour game contests are:

Global Game Jam – Jan 25-27 – 48 hour game jam – (Just checked the location close to me is unfortunately already sold out)

Ludum Dare - Unannounced usually 4 times a year, next one should be in April

I’m going to keep my eyes out for other contests that I may be able to get involved in as I go, but currently the plan is to use Ludum Dares to divide the year into quarters and use those as hard release dates.  I’m in the middle of some clean up on Square Shooter as i mentioned in my last post and then am planning to make a small release (I’m looking at Kongregate and Newgrounds as possible sites to release on).  After that I’m planning to work on a second version to be released again before the April Ludum Dare.  I figure that’s a good way to keep myself from biting off more than I can chew, I dream big but right now I’m trying to make sure I can actually turn my ideas into finished games.

As they say in software Release early, release often

Edit: Just found out about this great site that shows currently active game development events: http://compohub.net/

Complete graphic overhaul

So first for those of you that would like to skip right to seeing the new version of the game:

New Game Version

and for comparison

Old Game Version

With the game fairly stable as well as turning my attention to sound I also started to realize just how bad the graphics I was using were, and decided to do something about it.

I jumped into my hover car… ahem… sorry, I mean browser and fired up a few tutorials for Inkscape, which I had already been using to create basic graphics.  The most influential one that I used was this one on how to create metallic gears in Inkscape.  With just enough knowledge to be dangerous I plunged into a frenzy of metallic creation with gradients as my weapon of choice.  There is still an enormous amount that I need to learn about how to properly manage them in Inkscape but I was able to throw together some designs that at least are a huge improvement on the previous programmer graphics.  Hmmm I suppose the new ones are still programmer graphics just a little less ugly, heh.  I’ve never been that good at design stuff so it has been a lot of fun to be able to find a way to get my foot in the door and start making some things.  I’m definitely going to keep running through some more tutorials as well as some research into how to use Inkscape better.

The next project is going to be back to be a lot of cleanup.  The source code is looking pretty bad right now since I’ve been just shoving things in with graphics and sound so I’m going to have to take a look at it and maybe do some cleanup and refactoring.  After using the game a great deal for testing with the new graphic changes as well as showing it off to a few friends, it became clear to me that while it’s great to have the sounds in, they definitely could use some cleaning up.  I’m going to be looking into evening out sound volume, making the voice less muffled, and maybe adding some other sound effects in.  In graphics I would like to have the buttons react when you mouse over them, I’m also not sure about the new bullet design.  Lots to do, but it’s starting to come together a lot more, it’s a pretty exciting time for me.

Hope everyone has a great new year, let’s make this next year one to remember!