eterps

The Making Of, “The Bogstras: The Video Game”

 Projects  No Responses »
Jan 272012
 

 

I recently put up a website featuring a Flash game I’ve been working on for a few months.  It is entitled, “The Bogstras: The Video Game” and features several of my family members as characters.  My reason for creating this game is twofold: First, I wanted to learn more about game development and needed a hands-on project, and secondly, I needed a Christmas gift for my in-laws. The title was a no-brainer.  “Bogstra” is a portmanteau of “Terpstra” (my family name) and “Boger” (my wife’s family name).  After a few days of jotting down design concepts and cooking up a game plan, the journey had begun!

The object of the game is simple – pick a character, and complete a mission based around that character’s personal interests.  Complete each character’s mission and win the game!  It seemed like a simple enough idea when it popped into my head last September.  I set a goal to release the game the day before Christmas, and provide everyone featured in the game with a hard copy burned to a well-styled CD (with awesome cover art).  But alas, as with most software projects, “The Bogstras” fell victim to underestimated time requirements and the game was released in late January.  The good news is, my family didn’t mind too much.  They were still thrilled to see and play the game, and I managed to learn quite a bit about making games.

HOW

Choosing Flash and Actionscript 3 as a development platform was pretty much my only choice.  It’s the only language I’m comfortable with that is capable of building decent games.  Although even if I was an expert in C++ or XNA or whatever the hip new game platform might be, AS3 would still be the natural choice given the fact that the game is deployable via the web, and everyone has Flash Player installed.  I also happened to have a license of Flash Builder 4.6 available from my workplace.  And just so you know, a purchased license for Flash Builder allows for installation on 2 personal machines per user. Highly convenient.

With my base language and development tools already sitting in my lap, I went searching for a game framework to help me get started.  After reviewing many interesting  frameworks, I finally narrowed it down to Flixel and Flashpunk.  I’m not entirely certain why, but I chose Flashpunk.  After perusing the tutorials, and slapping together a couple prototype levels to test out the code myself, development was fully underway.  Flashpunk makes is super easy to get a simple game concept up and running very quickly, as it provides code for the game loop, containers (worlds), entities, collision detection, spritemaps, and so on…

My prototyped levels mainly consisted of little boxes moving around the screen shooting things and bumping into each other.  It quickly became clear that I would need some help with graphics.  I wanted the in-game characters to resemble the real-life people, so I decided to hire a pro for that. Nearly everything else was harvested from hundreds of Google searches.  Of course, no tile set or pixel art collection was ever perfect, so I had to do some pixel pushing myself.  I found an amazing free (shareware) tool called GraphicsGale.  It’s sole purpose is pixel art and animation.  It made working with spritesheets, tilesets, and other pixel-perfect graphics a breeze.  I know I only scratched the surface of possible features, but what I did use was invaluable.  Although there were times where I needed to do some complex layering, or had to work with large jpeg images.  For that, Paint.NET (also free) filled in all the gaps. With GraphicsGale and Paint.NET, I was never left wanting for any gfx editing features.

After smushing together some code and graphics, I was ready to start building levels.  Flashpunk has built in functionality to take advantage of grid-based tilesets, and there is a nice tutorial on the Flashpunk website on how to implement this functionality.  However, there was also a nice tutorial on how to take some severe shortcuts by using a tilemap generator – namely, Ogmo Editor. With this tool, it is a much simpler task to lay out repeating tiles and design levels from tilesets visually, rather than completely in code.  Ogmo exports the layout information in XML format, which is easily read and interpreted by Actionscript.  Using Ogmo was a tremendous time saver, and I highly recommend it for use with any 2d, tile-based flash game.

Since all of the background music was composed by talented musicians (not me), sound was pretty much an afterthought.  There were a few places were sound effects were necessary to enhance gameplay, and for that I turned to BFXR by increpare.  If you need a quick way to generate some bleeps, bloops, chimes, dings and zaps, then there is no better tool. Just keep clicking until you hear something you like, and save it as a .wav file.  The only hangup is that sounds must be in mp3 format to be embedded in a swf file, so Audacity‘s batch encoding feature was recruited for this task.  Incidentally, BFXR is a derivative project of SFXR by Dr. Petter, but adds quite a few new features, and comes in an installable Adobe AIR package.

A handful of other tools used in the project were subversion (svn) provided by ProjectLocker, WordPress, and good ol’ pencil and paper.

WHO

Every great triumph has its cast of heroes.  The champions behind the aesthetic appeal of the Bogstras (which receives the lions share of praise) are true talents.  All nine of the characters, and their corresponding animations were hand drawn by Cecile Souza Santos, of Brazil.  I found her through the job postings section in the PixelJoint forums.  Her past work was very impressive, and her 16-bit RPG style was exactly what I was looking for.  Needless to say, she was a good fit for this project.  She is still active in the PixelJoint forums, and on DeviantArt with the handle Clest.

The music tracks were conceived and composed by Jordan B. Sanders – frontman for the Order of Týr.  Jordan is a co-worker of mine, and just happens to be an expert chiptune composer.  I’ve heard his music, both live and recorded, and knew that his work would be tip-top. And it was.

Last but not least are the countless individuals providing tips, tutorials, sample code, free images, and answered questions on the FlashPunk forums, StackOverflow, GitHub, and elsewhere on the internet.  If I were left solely with my own wits, this project never would have happened.  It is truly astonishing that I can shout a question out into the world, and no matter how technical or esoteric, I can be reasonably sure it will get answered.

Despite that the game was four weeks late, and has dozens of features left on the cutting room floor, I’m still pretty proud of it.  This was my first completed independent game project, and I think it turned out OK given the goals I began with.  I’m glad to have this done and behind me, but it also illuminated some interesting paths ahead.  There are definitely some game development concepts that need revisiting (A* pathfinding, pixel-perfect collision, Verlet integration, to name a few), and plenty of un-implemented ideas that could easily be retrofitted into a new game.  So enough jibba jabba, and back to work! (as soon as I catch that damn dog).

 Posted by eterps at 11:10 pm

BourbonBasement.com

 Projects  No Responses »
Jan 232012
 

A few months ago, I received an email from a friend of mine quoting a Scotch Whisky review blog:

…this Auchentoshan is our second sample courtesy of Saverio Schiralli Agencies Limited…

followed by a heavily emphasis on courtesy, aka free Scotch.  Convinced that we would be showered with hand-selected bottles of Scotland’s finest, we decided to start a whiskey blog.  However, given the fact that I live in Tennessee, and my friends live in Chicago, it was eventually decided that I would blog about interesting bourbons and other American whiskeys, whilst the Scotch reviews would come from the Windy City.  This made sense, as nearly every brand of bourbon under the sun is available in Memphis, while Scotch from small or unknown distilleries are impossible to come by around here.

Around April of 2011, I rolled up my sleeves, pulled the lowball glasses off the shelf, and got to work.  As soon as I had a shelf full of nearly full bourbon bottles and a scratchpad full of tasting notes, it was time to start the blog.  Once again, WordPress was my weapon of choice.  There’s no better way to get a nice looking blog online than with WordPress.  I found a  nice, flashy theme while browsing SmashingMagazine, and did a little PHP-fu to fit it to my needs.  Although the theme was originally intended as a media portfolio, it works just as well for reviews.  I’m able to get four featured reviews, six recent reviews, and a blog post all above the fold without things feeling cluttered.  The slidey panel things are pretty snazzy, too.

What I learned the most from this project is that blogging is hard.  Technically, getting the site up and running was pretty straightforward.  Just a little bit of copy and paste to move some theme elements around, and a smattering of CSS did the trick.  The real effort came in writing the content.  I burst out of the gate with 4 or 5 solid entries and felt pretty confident.  I could almost taste the free bottles of whiskey.

After a couple weeks, though, I hit a wall.  It took ages to get another clever, original post out of my brain.   I kept at it, branching out from reviews to create a few general blog posts, and even a stop-motion-video to keep things fresh.  But as soon as another project popped up and took priority, things came to a grinding halt.  That, and I really don’t drink that much bourbon.  I enjoy a pinch or two on the weekend, but rarely imbibe on a weeknight.  With the lack of time and drinking, BourbonBasement entered into a blog purgatory.  It’s not quite dead, but not really alive either.  This is OK, though.  Whiskey itself ages slowly, and remains undisturbed for months at a time.  It refines itself as the months pass, and emerges years later with maturity and distinction.  In other words, there’s no rush.

 Posted by eterps at 12:00 am

Count the occurrences of an item in a List or Array

 Resources  No Responses »
Nov 012010
 

So I came across a situation where I had a whole bunch of items in a collection, and I needed to know how many of each kind there were.  In other words, I needed to know the number of each unique element in an IList, Array, ArrayCollection, or what-have-you.  I looked for some help online, and fiddled around and got it working.  Then a few weeks later I had to do the same thing, and darn near forgot how I did this.  Here is the trick – SORT!

Sort the items in the array (alphabetically, numerically, chronologically, etc…) so that unique items are grouped together.  Then simply loop over the collection counting identical items, and when a new item occurs, make a note of how many you have of the first item, and start counting again.  Below is a quick example.  Click “Generate” to create a list of 50 items, where each item is going to be a fish, cat, dog or pony.  Then click “Count” to count the number of each one.  Also notice how the original list is now sorted so all the ‘dogs’ and ‘cats’ are together.

Sorry, either Adobe flash is not installed or you do not have it enabled

Here’s the meat of the code:

sortedList = new Array();

//Sort Newlist Alphabetically
newList.sort();

/*  Create an object to keep track of each unique item in the array. For example
*   { Name: 'cat'
*     Value: 7  }
*/
var countObject:Object;

//Create a var to store the previously examined item in the list.
var previousItem:String;

//Loop over all the items in the newArray
for each ( var currentItem:String in newList )
{
//If the current item in the list is different from the previous item, then create a new countObject and start counting the new item.
if (previousItem == null || currentItem != previousItem)
{
//Create a new object
countObject = new Object();

//Set the name to the current item in the loop
countObject.name = currentItem;

//Count this item
countObject.value = 1;

//Put the object in the sorted list so we can see it later
sortedList.push(countObject);

//Done. Set the current item to the previous item.
previousItem = currentItem;
}
else  //Otherwise, we haven't switched to a new item yet, so keep counting the current item.
{
/*  Find the last countObject in the sortedList, then add 1 to the value of that object.
*   For example, if we have looped over 3 cat items in a row, and the current item is also cat, then:
*   { Name: cat, Value: 3 + 1 }
*/
sortedList[sortedList.length - 1].value += 1;
}
}

and Full Source for the above example.

 Posted by eterps at 4:39 am  Tagged with: , ,

A Fountain Of Color – AS3 Animation Example from Foundation Actionscript Animation Book

 Resources  No Responses »
Sep 072010
 

If you are remotely interested in Actionscript, Flash, computer animation, games, or pretty stuff on computers – go get Kieth Peters’ book, “Foundation Actionscript 3.0 Animation: Making Things Move.”  Then check out
Keith Peters blog (but really his other sites).  After reading parts 1 and 2 of the book, which cover basic animation, I felt compelled to take one of the examples a bit further.

In Part 2: Basic Motion, the concepts of moving pixels programatically around the screen by shifting the x and y position every frame is introduced.  A ‘veloctiy’ is assigned to both the x and y values to determine how many pixels the object moves per frame.  The fountain example in the book demonstrates these concepts by shooting a bunch of colored balls from the bottom of the screen, with slightly random values for the x and y velocity.

I added some controls, just for fun.  Use the up and down arrow keys to increase or decrease the height, and use left/right to change the direction.  Also, if you look at the code, I changed the concept of x and y velocities to speed and angle. So rather then setting a velocity value for the x and y values of each ball, I set a speed and angle, and use this information to update the balls’ positions.  The original code remains in comments for reference.  Take a look.

FOUNTAIN DEMO |  SOURCE CODE

 Posted by eterps at 10:10 pm  Tagged with: ,

Petfinder.com App with Flex / Swiz Source Code

 Projects  1 Response »
Apr 032010
 

It was necessary for my well being in recent weeks to learn as much as I can about the Swiz micro-architecture for Adobe Flex.  Lucky for me I had a simple Flex app sitting around just waiting to be converted from a giant mish-mash of mxml and ActionScript 3.0 to a nice, well organized micro-architected piece of software.  After much trial and error and gnashing of teeth, a successfully compiled application written with Swiz emerged, and is now posted for the enjoyment of whomever enjoys cats and coding.

A few caveats to remember when viewing the app and its source:

  1. The source is not exactly ‘code-complete’ – I’m sure there are bad practices in spades.  Kind criticism welcome.
  2. There is no real service call made by this app.  Rather than throwing my Petfinder.com API key out for everyone to gawk at, I’m using a static XML file that was spit out by a previous API service call.
  3. This is currently using a beta version of Swiz 1.0.
  4. This was originally written with Flex Builder 3, but ultimately released with Flash Builder 4.
  5. I had help.  Thanks a million to Jordan Sanders for a few handy pointers and putting up with my questions.  Also, thanks to David Tucker, Ben Clinkenbeard, Brian Kotek, and Richard Lord for instruction and examples.

PETFINDER APP DEMO |  SOURCE CODE

If people actually look at this post and are interested, I may be inclined to add more explaination, do follow up posts, develop the app further, etc… If you are interested in using the source code for whatever purpose, go right ahead.

 Posted by eterps at 12:34 am  Tagged with: , ,

HouseOfMews.com

 Projects  No Responses »
Feb 132010
 

Who: The House of Mews in Memphis, TN

What: A brand, spanking new website built from scratch.

Why: The House of Mews proprieter often complained that it was too difficult to sort through the hundreds of emails generated from forms on the old website.  It was also a pain for vounteers to update the adoption listings.  To view a list of available cats, site users had to navigate away from the House of Mews site and onto petfinder.com  Drupal 6 and Adobe Flex fixed these problems, and then some.

How:

Drupal 6 was used to convert the old HTML site to a CMS.  Also, site visitors can now register on the site to submit rescue requests, and rather than having that info clog up the email inbox, it goes into a searchable list (thanks to Views and CCK).

A similar method is in place to accept volunteer applications, but since these are rare, email notifications are sent out whenever one is completed. This was done with the Rules module for Drupal 6.

The real-time cat browser on the homepage pulls in data from Petfinder.com and creates an easily navigable listing of adoptable cats.  Volunteers who are used to uploading cat information to Petfinder don’t have to learn new software, and site visitors no longer have to leave the HoM site to view cats up for adoption. Win!

The cat browser was created with Adobe Flex 3.  It was amazingly simple – in fact, it was the very first Flex/Actionscript app I’ve ever created.  FYI – I’m currently converting this app to use the Cairngorm framework, and will be releasing the source code on this website some day.

 Posted by eterps at 3:09 pm  Tagged with: ,

Use Balsamiq to show website ideas to people that don’t know anything about making websites.

 Resources  No Responses »
Sep 202009
 

So I’m currently working on a project for the House of Mews in Memphis, TN.  It’s a volunteer project, and kind of a long story on how I got wrapped into it – so I’ll save it for another time.  Anyway, a problem I’ve run into is how to effectively communicate ideas to the House of Mews proprietor.  Using words like content management system, web services, and flex app only draw blank stares.  Bumbling through a long discription of site features elicits some nodding, but the only response I get are questions like, “Can we keep the same music from the old site?”

Argh.

Enter Balsamiq.  The folks at Balsamiq Studios were nice enough to give me a free license since I’d be using it for a non-profit project.  I can’t be more grateful.  This app blows visio out of the water.  It’s so ridiculously easy to use. I cranked out a handful of wireframes in about an hour.  Since it’s all drag and drop, it appeals to the whole ‘instant gratification’ thing.  And when you’re done, you have this neat drawing that looks like you drew it yourself on a piece of paper.

Showing this to the ‘client’ avoided comments like, “that’s the wrong font,” and “that shade of red needs to be lighter.”  Instead I get, “Ohh, so you can click on the little pictures, and the cat’s bio appears. Great!”

Smile.

Here’s an example of a ‘first draft’.

Neat, right? Too bad it looked like crapola when I built it.  So I started over.  After shuffling things around, adding new ideas (and subtracting new ideas), I wound up with this – the mighty ‘work in progress’.

Go try Balsamiq.

 Posted by eterps at 2:35 am  Tagged with:

Artistslink.org

 Projects  No Responses »
Jan 092009
 

Problem:  Artists Link needed a website that included a member directory that listed its members in alphabetical order with thumbnails next to each person.  Clicking the person brings up the bio, with a full size pic.  Additional pics are optional.

They also needed the usual organizational website stuff, like info pages, news and events, and contact us.  All of this had to be woven together in a nice tidy package that is dead simple to edit and update.

Solution: Drupal 6 with heavy use of CCK and Views.  Big thanks to the Color Wall theme. Views Slideshow provided the nifty image cycle on the front page.  It randomly selects images from each persons profile and prominently displays them on the front page.  Since the Member content type and member list view were already set up, all I had to do was install the Views Slideshow Module and toss a slideshow in a block.  Easy!

ImageCache saved me tons of effort by creating 3 different sizes of each profile pic.  Combined with lightbox2, ImageCache is pretty darn powerful.  All sorts of clicky functionality can be applied just by uploading one pic. Neat!

 Posted by eterps at 10:35 pm  Tagged with:

Learn All About WordPress Themes FAST!

 Resources  No Responses »
Oct 142008
 

A great way to get a blog or simple website up and running very quickly is to use WordPress.  Blogging couldn’t be easier when using WordPress, as it provides a handy interface for writing and categorizing posts, adding features via widgets, creating RSS feeds for syndication, and allowing for static pages.  Another insanely useful feature is the ability to change the look and feel with the click of a few buttons using themes.

Themes allow your blog or site to take on a look of its own.  There are literally thousands of WordPress themes available for download. Many (most, even) are available directly on the WordPress website.  Searching Google for wordpress themes will get you a few million results, but many websites simply repost the free sites available on wordpress.org and wrap advertisements around them.  Premium themes are also available for purchase at many places, but again, some sites are more reputable than others.

However, if you want to graduate past premade themes and make your site completely unique, you need to learn how WordPress themes are created and make your own.  This may seem like a daunting task when viewing the WordPress.org documentation, but I stumbled upon a little gem that can’t be beat.  Go directly to Wpdesigner.com created by a young man named SmallPotato and view his tutorials.  The site is now defunct, but the tutorials remain, and are priceless.  There are actually two tutorials, one as HTML, and another as an eBook in 3 parts:

After reviewing these tutorials and referencing the WordPress Codex a few times (for widget code in WP 2.5 and 2.6), I was able to construct my own WordPress themes from scratch.  There are tons of WordPress tutorial sites out there, but this is by far the best place to start (IMHO).  Good luck!

 Posted by eterps at 3:21 am  Tagged with:

KarenKTerpstra.com

 Projects  No Responses »
Oct 102008
 

My very first project was for my very own mother.  I created a site for her a very long time ago in Macromedia Fireworks (I think), and it fit the bill for a number of years.  However, it was impossibly difficult to update for her, and a real pain for me.  The time finally arrived when a new solution was needed.  Luckily, I recently learned the ins and outs of WordPress, and found a nifty little plugin called NextGen gallery.

First and foremost, NextGen gallery was installed.  Without this amazing and wonderful piece of software, I would be lost.  NextGen is relatively easy to manage, and provides spectacular display options, flash plugins, and slideshows to enhance the display of photos on a website.  The lightbox2 (or highslide) integration alone is worth its weight in gold (if it weighed anything, that is). In order to create the actual gallery, I started with pages.  One page was created for each gallery (earthenware, stoneware, etc…).  Then, two pages were created for the albums that categorize the galleries (My Work, and UWL Photos).

I created galleries for each set of photos in NextGen, then placed the NextGen tag in each page.  The album tags went into the album pages. For example, to create the Porcelain gallery, I created a page in wordpress with the title Porcelain.  I then created a gallery in NextGen, filled it with pictures, and found that it had an ID of 3.  I then went back to the Porcelain page (Manage>Pages>Porcelain) and inserted the gallery=3 tage as the content of the page. Other plugins I decided to include were:

  • Akismet – For spam filtering (included with WordPress)
  • All in One SEO Pack – This site needs to appear in the search engines when people search for “Karen Terpstra” so I installed this plugin and inserted the keywords “Karen Terpstra” wherever I could.
  • cFormsII – A good form creation utility, although probably overkill for a simple “Contact Me” webform.
  • Folding Pages Widget – Used to create the collapsing menu out of WordPress pages.
  • pageMash – Drag and drop pages into their correct order. Much better than the built in method of page ordering provided by WordPress.
  • WordPress.com stats – just for fun (for now)
  • WP Super Cache – I don’t expect much traffic to this site, but it seems like a good idea.

The Theme

Here’s where things got interesting.  My mom specified that she wanted a ‘home page’ that was just a large photo of one of her works.  She sent me three possibilities.  She also wanted a dark background, which is fairly standard practice for showing off a large number of photos on the web. Once I decided that I was only going to use pages, and wasn’t going to bother with posts, categories, or generally any other ‘normal’ wordpress feature, I felt I needed a simple theme that I could do some major surgery on.

I selected the Neonglow theme from luna-media.  I was intrigued by the use of transparency, and it was nice and simple.  After a few hours of hacking away (with the help of Firebug), I ended up with a decent, simple theme for the entirety of the site, except for the Home page. To create the Home page, I needed to put together an entirely new theme.  Why a new theme you ask? Well, to take advantage of the Page Template feature of WordPress.  I copied page.php (the main theme) to a file called customhome.php.  Then the necessary bit of code required to make it show up in the Page Template field when writing a new page.

View the documentation, or a helpful forum post on WordPress.org to get an idea of what I’m talking about (I’ll add a more detailed tutorial soon). Once I was able to apply my new theme file to the Home page, I pretty much removed everything from customhome.php aside from the code that displayed the content of the page (no title, header, footer, or anything).  I also left the sidebar so the menu would show up, and referenced a nearly identical .css file, only without a background image. The changing image is simply a NextGen gallery set to slideshow mode.  I have as the only content in the Home page.  That’s it, no fancy javascript, no extra flash plugin, just that one little NextGen tag and a seriously hacked up WordPress theme.

 Posted by eterps at 10:27 pm  Tagged with:
 Older Entries
© 2012 Eric Terpstra Suffusion theme by Sayontan Sinha