Kyatric’s Bomberman-Inspired Construct 2 Game Tutorial

I just ran across a great tutorial from Kyatric with step by step video’s for creating a Bomberman inspired game in construct 2.  He does an excellent job of explaining the process. 

image

Check it out at http://gamedevelopment.tutsplus.com/series/construct-2-bombing-chap–gamedev-12711

Game On Event Demos

I had a FANTASTIC time at the “Game On” event last Saturday (06/15/2013). I hope all the attendees had as good a time as I did, and if you missed it, don’t fret.  All the content is available on demand

GirderGary

In my first session on creating assets I showed how to use tools like Sfxr, Audacity, Soundation, InkScape and Gimp to create sounds and graphics for your games.  In addition I gave links to a number of other great web resources for both sounds and graphics including:

2dgameartforprogrammers.blogspot.com
OpenGameArt.org
office.microsoft.com/images

and

freesound.org
pdsounds.org

If you want a copy of the slides and demos from my sessions you can grab them here:

Find and Create Free Game AssetsVideo

Putting It All TogetherVideo

2D Graphics and Sound Tools for Game Developers

 

I’ve been “playing” quite a bit with 2D game development for Windows 8 and Windows Phone lately.  HTML5 Game Creation tools like YoYo Games’ GameMaker, and Scirra’s Construct 2 make Windows 8 game development accessible to developers at all skill levels.  And of course, as a developer there isn’t an API we can’t handle.  But games are just loops and if-else branches.  The best games have great sounds and graphics as well. And coming up with those types of game assets isn’t always easy for developers.  Or is it?  I think most developers underestimate their creative abilities, and that if they were to dive in and try creating sounds and graphics for themselves, they might just be surprised at how good they do.  Even if the sounds or graphics don’t end up making it into the final version of the games you publish, they can help you form the tone, feel, and play of the game as you go. 

Following is a list of the various tools I use for creating graphics and sounds for games:

Vector’s vs. Bitmaps

Bitmap Graphics

The various graphical elements in your games (sprites, backgrounds, environmental art, etc) are almost always bitmaps.  With bitmap graphics, each individual pixel in the graphic is a assigned a specific color (and possibly opacity).  PNGs, JPGs, GIFs, BMPs, etc are all common file formats for storing bitmap images.

image

Graphics processors know how to draw bitmaps quickly, and with control over each individual pixel you have amazing control over how the image looks at a specific size.  However, they don’t scale up very well at all.  As you make a bitmap larger, or zoom in on it, the individual pixels become obvious and the image begins to look blocky.  To make a bitmap smaller, new pixels have to be added and the color of those new pixels must be “guessed” or “interpolated”.  In addition, editing bitmaps can be difficult depending on what needs to be done.  For example, if I wanted to move the hat on my character below, I would have to first select all the pixels for the hat, and move them to a new location in the image.  I would then have to replace the pixels it held previously with new colors.

image

 

Vector Graphics

Vector graphics on the other hand describe the images using “Vectors”.  Each vector describes the shape, points, fill color, line color, thickness, ends, etc of each line in the graphic.  They can be edited, re-shaped, moved, rotated, skewed, scaled up, scaled down, etc without using quality.  AI, SVG, CDR, & EMF are all common file formats used to store vector images.

image

These give you a ton of control over creating an image without having to commit to the placement of a specific pixel.  However, because they are really mathematical descriptions of your image, they can’t be processed as rapidly by graphics processors and are thus not a great choice for the assets in your games.  So, what to do?  Well, create your graphics in a vector image editing tool (Like InkScape, Illustrator, or Corel Draw) and then export the graphic as a bitmap at the specific size you need for your game!  You can even export it in different poses, and at different sizes!  Cool!

image

Graphics Tools

Gimp (aka.ms/gimp)

image

There are a number of great bitmap editors out there, Adobe PhotoShop is probably the premier tool, but it comes at a price.  For my money, you can’t go wrong with Gimp.  It has as much capability as you need for creating 2D game graphics, and the price is hard to beat (free). 

InkScape (aka.ms/inkscape)

image

InkScape is the vector graphics tool I use.  Like Gimp, it has all the power that I need for creating 2D game graphics, and is free.  Just as Adobe PhotoShop is sort of the premier bitmap tool, Adobe Illustrator is the premier vector tool, but is again pretty pricey.  Another popular tool is Corel Draw, and you can get the Corel Draw essentials tool relatively in-expensively. 

Waveforms vs. Sequences

Waveforms

Waveforms and sequences are two methods for working with sound data, much in the same way as bitmaps and vectors were different ways of working with image data. Wave forms are a digital representation of a sound.  The digital data is captured at a specific “sample rate”.  The higher the sample rate, the more samples there are per second. With a waveform editor, you really modifiying the collection of samples much in the same way as you edit individual pixels in a bitmap.  They are easy to edit with filters, etc if you want to affect all the sounds in a certain time range, but they can’t help you easily change the bass guitar sound from an electric bass to an upright bass for example.  MP3s, WAV, OGG, are common file formats for storing wave forms:

image

Sequences

Sequencer’s are like the “vector’s” of the sound world. The give you a way to describe a specific sound (guitar, keyboard, bass, drum, etc) to play, at a specific pitch and volume, at a specific time and duration. They often come with complete libraries of sounds and even some pre-built “loops” (looping sequences that can repeat).  They give you ultimate control over the sounds you make, but much like vector graphics, require too much processing for real-time game play.  So, you will typically create background music, etc, in a sequencing tool, and then export the music out to an MP3, etc.

image

Sound Tools

Audacity (aka.ms/audacity)

image

Audacity is a great open source waveform editor.  Using even a basic microphone (of course better is better) you can record sounds using audacity, process it with some effects (“GVerb”, “Change Pitch”, and more) and get some pretty respectable audio for your games. This is great for sound effects like the click’s, pops, whirs,whooshes, bangs and booms in your games.  Just pretend you are a kid again and playing cops and robbers in the back yard.  You know you’ve made a sound effect or two in the past, come on!

OpenLabs’ StageLight (aka.ms/stagelight)

image

StageLight is an in-expensive (like $9.99) music sequencing tool.  It helps you create songs that you can use for the soundtrack in your games.  Even if you aren’t musically inclined these tools can help you create a simple beat, and possibly even a basic melody that you can play in the background of your games. 

Resource Links:

Michael Palermo’s GameMaker Resources: http://aka.ms/4gamemaker

Jeremy Foster’s Media Page: codefoster.com/media

Chris Hildebrand’s 2D Game Art for Programmers Blog: 2dgameartforprogrammers.blogspot.com/

Bret’s Character Template: aka.ms/bsct

InkScape Game Character Templates

I’ve been “playing” with games lately.  Creating them that is. One of the problems with games is that you need graphic assets.  I’m not a world class artist, although I do enjoy playing with graphics quite a bit. As I searched the net for help on creating my own game characters, I came across Chris Hildebrand’s excellent “2D Game Art for Programmers” blog.

I have played around with the information he shares in his Creating a game character and Character Animation blog posts.  I find that I always seem to start over from scratch.  To help cut down my time to creating new characters, I have created some templates that I can use in InkScape.

Character Template:

ct

Is a fully segmented character that you can start with and customize.  In addition, I created a version of the character walking:

cwt

that when animated looks like this:

Walker283

You can use these templates to create your own “side-view” characters.

These are just starting points, and I’ll add a tutorial later on using them, but I needed to post this now so I could share it at an event!

Grab them here: http://aka.ms/isctzip

Windows 8 Game Development Tools

I presented a session  at the Microsoft Store in Fashion Valley last night (12/05/2012) on creating games for Windows 8.  In that session I covered a TON of resources to help game developers.  In this blog post I link to a number of tools and resources that can help you kickstart your Windows 8 Game Development!

For folks that love to get their hands dirty in code:

If you are a C++ coder and need ultimate performance out of your game, you can develop your game using C++ and Direct X.  If this is your first game though, C++/DirectX will likely be overwhelming.

If you like the power of DirectX, but don’t want to dust off your C++ dev skills, you might be interested in SharpDX.

I had looked into XNA a fair amount on Windows Phone 7, but it turns out that while XNA is still supported on Windows Phone 8, it isn’t supported in WinRT.  But fear not, there is an excellent open source implementation of XNA that WILL run not only windows Windows RT, but also Windows Phone 8, as well as iSO, Android, Mac OS X & Linux!  Want to know more, check out MonoGame from Xamarin!

Another approach could be to use HTML/JS/CSS and the ever powerful HTML5 Canvas to create your own games.  Dan Wahlin has some great blog posts and Pluralsight content about HTML5 canvas.

Want to make a game, not write a bunch of code?

There are a number of excellent game generation tools in the market already, and there are more on the way!  Here are the ones I have checked into so far:

YoYo Games has “GameMaker: Studio” family of tools.  The free version allows you to create both Mac and Windows DESKTOP apps (not Win RT) apps.  However, for just $49.99 you can create games that can be published into the Windows 8 store.

GameSalad is another popular came creation tool called “GameSalad Creator”.  In order to publish to the Windows 8 store, you need to purchase the Pro version for $299/year, but the free version can get you into the tool so you know you can be successful building a game before you pay for the Pro version.

Scirra’s Construct2 allows you to create Windows 8 store apps with the FREE version!  If you want to publish apps for iOS and Android then you’ll need to upgrade to their Personal or Business editions.

Unity3D is a more advanced game creation tool focused on 3D game creation, and may be something you look at after becoming familiar with one of the 2D game creation tools mentioned above.

Tools for graphics and sound?

I like to create my game art using vector graphics first, and then I export those vector images as bitmaps.  To create the vector images I use InkScape.  If I need to edit the bitmap images that are exported, I usually clean them up using Gimp.

For sounds, you need to create them somehow, I have used MusicLab from ClubCreate to make game loops before. OpenLabs has a new tool called StageLight that sells for just $9.99 (a demo version is available), or you might consider buying pre-made sounds from sites like beatport.com .

Once you have sounds you like, you can edit them (or create your own) using Audacity.  Audacity is a great sound editor that has all the functionality a budding game developer would need!

I can’t draw or play music!

Don’t worry, there are a number of places that you can get assets (graphics, sounds, etc) for your games.  My teammate Jeremy Foster has collection of them listed on his blog, but there are two that relate directly to games:

OpenGameArt.org is a great place to get art for your games.  Even if it isn’t the art you end up using in the long run, it may help you get rolling!

Freesound.org is a great place for various sound samples, again this may not be the sounds you use at publish time, but they will serve a purpose.

With both OpenGameArt.org and Freesound.org, make sure to pay attention to how the assets you choose are licensed if you plan on publishing your game to the Windows Store.

What are you waiting for?  Get Started!

Converting “Cut the Rope” to an HTML5/JS game

In my HTML5/JS game journey today, I ran across a great article on how the Microsoft IE, Pixel Lab, and ZeptoLab teams ported the “Cut the Rope” application from an iOS app over to an HTML5/JS app.

 

Read the rest of this entry »

Getting started with Windows 8 Metro Style HTML5/JS Games…

I spent a fair amount of time over the past few months working with Windows Phone games using XNA.  With Windows 8, we now have the option of creating metro style games using HTML5/JS.  My recent history has focused more on XAML/C# apps using mostly Silverlight.  Although I have been working with HTML and the web since the beginning I’m not a very experienced JavaScript developer, and this will be my first attempt at creating Windows 8 Metro Style HTML5/JS apps of any kind.

I have a problem of wanting to blog things only after I have figured them out.  This time, I’m going to try a different approach and blog as I go.  That means I’ll probably have to correct myself at some point in the future.  But if you want to learn along with me, then you’ll have to experience the bumps and sharp turns with me as well. 

For this blog post I am just going to list links off to the resources I am using as I go through the learning process.  From my initial review, I think I will start looking at creating an HTML5/JS game using the “JavaScript and HTML5 touch game sample” from Microsoft.  Once I have completed that, I plan to start over using “EaselJS” which is part of the “CreateJS” suite.

Read the rest of this entry »

Microsoft Developer Day at the Game Developers Conference

Going to the Game Developer’s Conference?  Check out Microsoft Developer Day. At this event Microsoft will introduce developers to the future of games and entertainment.  With technology deep dives focusing on Xbox LIVE and Windows 8, lean about how you can build great experiences by capitalizing on Microsoft’s vision for connected entertainment!

When it is?  Tuesday March 6th from 10:00am to 5:30pm.

Where Is It? At the “Game Developers Conference” at Moscone Center in San Francisco.

image