OHM was awesome

OHM was awesome, I took a lot of notes and did some journal stuff that I’ll post later but for now I wanted to share a rough picture I threw together about how I felt at OHM.

 

OHM-Excitement

Burnout and Recovery: My eternal cycle

I’m an intense person. I hear that a lot. It’s the most common compliment and insult that I receive.

I get incredibly excited about something and spend all my time babbling about it to anyone that will listen, I spend a great deal of spare time on it.

Then I burn out.

Afterwards I build up a cycle of guilt and procrastination preventing myself from restarting it.

Later I may pick it up again or I may get incredibly excited about something new.

Luckily there’s a responsible part of my mind that gets me up every morning, and heads me off to work. This part of my mind makes sure that I pay my bills, exercise semi-regularly and eat semi-healthily. Once the necessities are taken care of I seem to be unable to regulate my free time. This year I was incredibly excited to finally be making games and getting on track with activities I’ve always wanted to do in my spare time.

I overdid it.

After a few months of constant activity with work heating up and lots of other things going on I burned out and fell back into old habits of spending my spare time with games, webcomics, tv shows, and anime.

I switched modes from creator to consumer.

I hate it when I do that.

Luckily I’m bursting out of my funk with spork in hand.

Heading off on Tuesday for OHM2013 a hacker/maker international festival in the Netherlands which I’m really excited for. I’m heading out tomorrow to pick up some starter kits for electrical engineering stuff to play around with in my spare time when I don’t want to look at a screen. I’m booting up Inkscape and FlashDevelop again to try to start up some projects.

The creative spirit is rising again.

It feels good.

MakingThings

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.

Steps to make vampire

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

TimeForProgramming

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

Custom_Spaceship

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!

BasicHero

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.

OrderOfTheStickCharacter

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

ScientistMad ScientistScavengerMilitaryWoman

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

Kaerno Load Screen

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!

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.