Posts Tagged ‘tutorial’

I haven’t been here in a long time. So I thought I would share this code I made with you and explain how it works (so people who don’t use Gamemaker can reverse-engineer it). Unfortunately I’m not taking part this time round, but I felt like helping those who are!

 

Gamemaker Script Code
Simply copy and paste these into two seperate scripts:

Ring Health Bars
//scr_health_ring(x,y,radius,thickness,maxsegments,segments,startangle,totalangle,direction,colour)

//argument0 = x
//argument1 = y
//argument2 = radius
//argument3 = thickness
//argument4 = maxsegments
//argument5 = segments
//argument6 = startangle
//argument7 = totalangle
//argument8 = direction
//argument9 = colour

anglechange = (argument7/argument4)*(pi/180)
i = argument6*(pi/180)

ax = argument0+(cos(i)*argument2)
ay = argument1-(sin(i)*argument2)

bx = argument0+(cos(i)*(argument2+argument3))
by = argument1-(sin(i)*(argument2+argument3))

repeat(argument5) {
i += argument8 * anglechange

cx = argument0+(cos(i)*argument2)
cy = argument1-(sin(i)*argument2)

dx = argument0+(cos(i)*(argument2+argument3))
dy = argument1-(sin(i)*(argument2+argument3))

draw_triangle_colour(ax,ay,bx,by,dx,dy,argument9,argument9,argument9,0)
draw_triangle_colour(ax,ay,cx,cy,dx,dy,argument9,argument9,argument9,0)

ax = cx
ay = cy

bx = dx
by = dy
}

Circle Health Bars
//scr_health_circle(x,y,radius,maxsegments,segments,startangle,totalangle,direction,colour)

//argument0 = x
//argument1 = y
//argument2 = radius
//argument3 = maxsegments
//argument4 = segments
//argument5 = startangle
//argument6 = totalangle
//argument7 = direction
//argument8 = colour

anglechange = (argument6/argument3)*(pi/180)
i = argument5*(pi/180)

ax = argument0+(cos(i)*argument2)
ay = argument1-(sin(i)*argument2)

repeat(argument4) {
i += argument7 * anglechange

bx = argument0+(cos(i)*argument2)
by = argument1-(sin(i)*argument2)

draw_triangle_colour(ax,ay,bx,by,argument0,argument1,argument8,argument8,argument8,0)

ax = bx
ay = by
}

 

To execute the scripts simply use:
scr_health_ring(x,y,radius,thickness,maxsegments,segments,rotation,angle,direction,colour)
or
scr_health_circle(x,y,radius,maxsegments,segments,rotation,angle,direction,colour)

 

Meet The Variables:

Ring Health bars

x,y = the coordinates of the center of the ring

radius = the distance from the center to the start of the ring

thickness = the thickness of the ring

rotation = at what angle is the zero mark of the ring?

angle = over how many degrees does the ring span?

max segments = how many segments the ring is split in to

segments = how many of those segments are visible

direction = which way is the ring drawn? 1 for anti-clockwise and -1 for clockwise

For the circle health bar the variables are the same except that thickness is not included.

Demo download

A demo (gif):

Circular Health Bars Demo

 

The demo is using two rings; one red and one green to simulate health.

 

What is this sorcery?
When a computer draws a circle, it is actually just a bunch of triangles arranged in the same way as slices of pie.

To find the coordinates of each triangle to be able to draw them we need a big steaming pile of math.

 

Specifically we need some trigonometry. Let’s start with which way is up:

Ring Health bars angles

Or in this case, which way is right: zero degrees.

A new temporary variable, i, will count our current angle as we sweep around the circle.

After each cycle in the loop it will change by the angle variable divided by the maxsegments.

Ring Health bars sections

 

Add to the mix our variables for radius and thickness and we can draw a triangle to work out our x and y coordinates for our triangles to draw!

Ring Health bars triangle

From this we can get the coordinates for the two points a and b. To get point b we simply add the thickness to the radius:

Ring Health bars triangle ab

 

Then we add the angle change to i, and get the variables c and d. Then we can connect the dots and draw one section!

Ring Health bars triangle cd

Ring Health bars section

Repeating this process for how many sections we want to draw will result in a ring!

This process is the same for the circle, except we only need points a, c, and the center for each triangle.

 

Good luck for LD 32! Hopefully this tutorial will come in handy.

I kinda rushed this. Hopefully you can understand it if you have a basic grip on maths.

Hexagonal Grids!

Posted by (twitter: @theupgradezone)
Wednesday, November 12th, 2014 5:10 am

So, I did the maths on how to draw a perfect hexagon. Now, using the same logic from that
tutorial, in this tutorial I will show you how to make a hexagonal grid!

Maths:
Let’s say we have a hexagon with width a and height b.
(If you used the last tutorial, then the value of a from the last tutorial becomes twice that
value in this tutorial)

HexGrid_001

Now we generate a bunch of hexagons to fill up the screen area.
For this example the point of reference is in the center of the hexagon.

Each hexagon will be 3/4*a to the side of the last one, and b above or below:

HexGrid_002

Remember to keep a and b as whole numbers!

So the screen should look like this: (grey = hexagon, dark grey = overlap)

HexGrid_003

But we need every 2nd column to go up a bit, so that the hexagons interconnect properly.
So we use this equation, where x and y are the coordinates of the center of each hexagon:

HexGrid_004

Now your screen will look like this:

HexGrid_005

Excellent!

Now we can code it!

Pseudo Code:

Initialize:
width = (width of hexagon)
height = (height of hexagon)

Creation Loop:
create hexagon
x = x + (3*width)/4
if edge of screen is reached {
go back to starting edge of screen
y = y + height
}

Creation code for each hexagon:
y = y + mod(sin((90*(x/width))*height/2)

 

 

And there you have a hexagonal grid!

And this is the last of my little group of tutorials :3
Thanks for the comments on how to refine the logic and code of previous tutorials :)

How to draw a perfect Hexagon!

Posted by (twitter: @theupgradezone)
Tuesday, November 11th, 2014 9:55 am

So I did that maths of drawing a perfect octagon. Now, for a perfect hexagon!

Maths:

First, we must imagine a rectangle with width a and height b.
You must now choose which side, a or b, you want to specify.

Hexagon_001

If you specified a, to find b you must use this equation:

Hexagon_002

 

 

If you specified b, to find a you must use this equation:

Hexagon_003

Which can also be written as:

Hexagon_004

Remember to round to the nearest number!

 

Drawing:

Once you have a and b, we need to specify the 6 coordinates.
For this example, the frame of reference is the center of the rectangle.

The top and bottom two are b/2 up or down and a/2 to each side.

Hexagon_005

The two sides are a to the side.

Hexagon_006

Then you draw lines between the coordinates.

Hexagon_007

And there you have a perfect hexagon!

 

Pseudo Code:

Initialize:
// Let’s say we specified the width, a
width = (width of imaginary square)
height = 2 * width * sin(60)

Loop:

coord_1x = x – width/2
coord_1y = y + height/2
coord_2x = x + width/2
coord_2y = y + height/2
coord_3x = x + width
coord_3y = y
coord_4x = x + width/2
coord_4y = y – height/2
coord_5x = x – width/2
coord_5y = y – height/2
coord_6x = x – width
coord_6y = y

Hexagon_008

//draw_line(from_x,from_y,to_x,to_y)
draw_line(coord_1x,coord_1y,coord_2x,coord_2y)
draw_line(coord_2x,coord_2y,coord_3x,coord_3y)
draw_line(coord_3x,coord_3y,coord_4x,coord_4y)
draw_line(coord_4x,coord_4y,coord_5x,coord_5y)
draw_line(coord_5x,coord_5y,coord_6x,coord_6y)
draw_line(coord_6x,coord_6y,coord_1x,coord_1y)

 

And that’s how to draw a perfect hexagon!

Coming soon: Hexagonal grids!

How to draw a Perfect Octagon!

Posted by (twitter: @theupgradezone)
Tuesday, November 11th, 2014 4:45 am

I did some maths while I was bored, and I calculated a way to draw a perfect octagon.
I thought this might come in useful for some of you :3

Warning! Maths ahead!

 

Maths:

Imagine a square, with side length a.

001

Our octagon will fit in this square.

We will call the length of a side of the octagon b.

002

 

Now you put a into this equation:

003

Which can also be written as:

004

And you get b.

Now, round b to the nearest number. We can’t be dealing with fractions of pixels now, can we?

Now you have b, we can draw the octagon.

 

Drawing:

For this example, our reference point will be in the center of the octagon, which is also the center of our imaginary square.

005

Our first 2 co-ordinates will be a/2 up and b/2 to either side.

006

007

For the sides, it will be a/2 to the side and b/2 up or down.

008

Then, draw lines between the co-ordinates to finish the octagon.

009

And there you have a regular octagon!

 

Pseudo code:

Initialize:

size = (length of side of square)
oct_side = round((size*sqrt(2))/(2+sqrt(2)))

Loop:

coord_1x = x – oct_side/2
coord_1y = y + size/2
coord_2x = x + oct_side/2
coord_2y = y + size/2
coord_3x = x + size/2
coord_3y = y + oct_side/2
coord_4x = x + size/2
coord_4y = y – oct_side/2
coord_5x = x + oct_side/2
coord_5y = y – size/2
coord_6x = x – oct_side/2
coord_6y = y – size/2
coord_7x = x – size/2
coord_7y = y – oct_side/2
coord_8x = x – size/2
coord_8y = y + oct_side/2

010

//draw_line(from_x,from_y,to_x,to_y)

draw_line(coord_1x,coord_1y,coord_2x,coord_2y)
draw_line(coord_2x,coord_2y,coord_3x,coord_3y)
draw_line(coord_3x,coord_3y,coord_4x,coord_4y)
draw_line(coord_4x,coord_4y,coord_5x,coord_5y)
draw_line(coord_5x,coord_5y,coord_6x,coord_6y)
draw_line(coord_6x,coord_6y,coord_7x,coord_7y)
draw_line(coord_7x,coord_7y,coord_8x,coord_8y)
draw_line(coord_8x,coord_8y,coord_1x,coord_1y)

 

And that’s how to draw a perfect octagon!

Coming soon: How to draw a perfect hexagon!

 

To those interested in the maths involved to get the equation:

Maths

 

I originally calculated this to be able to draw the Aperture Science logo by hand, but I also saw the use of it on the computer!

How to Play Icarus Crisis

Posted by (twitter: @rojomojogogo)
Tuesday, August 26th, 2014 12:29 pm

My jam entry is rooted in board games, which makes it more complex than some people may be used to.  Since the in game help is limited I thought I would make a quick tutorial video.  If you have questions don’t hesitate to ask!

Play Icarus Crisis

http://www.ludumdare.com/compo/ludum-dare-30/?action=preview&uid=29998

New 3D Game Art Tutorial – Modular Walls

Posted by
Tuesday, May 13th, 2014 11:40 am

As promised, a new tuesday, a new 3D Quick Game Art tutorial ^^ This time around I’m doing Modular Walls 😀 I’ll be covering all asssets needed for a imple Dungeon Crawler game (Including Character and Weapons)

Let me know what you guys think \o I’ll release a new one next tuesday covering some decoration asset for the dungeon 😀

Projectile physics for dummies [WARNING: MATH!]

Posted by (twitter: @KatamoriENG)
Wednesday, April 23rd, 2014 2:02 am

I can still clearly remember, how many problem I had with making smooth-moving bodies  in my games back in the day, but I’ve improved a lot since, so I feel I have to share this knowledge.

The amazing fact that only midschool math needs for this stuff, so you are goddamn lucky, if you didn’t play Fruit Ninja or 2048 constantly during math classes. 😛

#1 the basic knowledge

Calculating the motion of any bodies needs to be able to calculate its positions in space. A coordinate-system is perfect for this, and you already get one all the time when you have a proper window on-screen. (my only experiences about it are Java and LÖVE2D, but I’m pretty sure it’s also true for every similar programming languages & environments)

In most cases, the (0,0) point on this is the upper left corner of that window.

#2 straight moving

So you have a window, and a body with some (x,y) coordinates. The texture that marks the body is displayed at (x,y) on the screen.

If you wanna move this body left, you have to substract a number (whatever you want) from X. To move right, you have to ADD a number  to X. Doing the same with Y makes the body move up (in case of substraction) or down (in case of addition).

It’s also the initial point of WASD moving in case of player characters: you have to give these commands to certain keys – giving special tasks for key-pressing actions vary on programming  languages & environments.

#3 straight moving, in any angles

Yeah, that’s fine yet, but if you want to move on a way that changes both X and Y, then you have to call the angles!

There’s a cool stuff that helps us called trigonometry. To use its rules, we need a triangle: the first one is (x,y), the second one is a random point that lies on that line your body will also lie while moving; the third one is that makes a right triangle from these points.

Let’s be more precise: make a body that follow the mouse cursor. Then you get (x,y) – the body – and (mouseX, mouseY) – the mouse. Two points CLEARLY defines a line; it’s gonna be the track of your body. To make it move, you have to know the slope of this line.

And THIS is where you need a triangle – the third point is (mouseX, y), and this with the line I mentioned forms a right triangle. And well, the slope of the line equals to the tangent of the angle at the body!

But hey, we have formulas to calculate it by division! It’s gonna be the Y distance between mouse and the body / the X distance between mouse and body. Okay, it’s a tangent value, but in the 21 century, you can easily calculate a tangent value back into degrees.

After that, moving the body on its track is not that hard – even understanding is kind of easy, but I suck at English, so I definitely wouldn’t try to explain it: add cos(slope) to body’s “x”, and also add sin(slope) to body’s “y” – I mention again, that the result of the division is NOT the slope itself, only its tangent. Theoretically, you can calculate sin and cos from tan without exchanging back into degrees, but I haven’t experimented with that.

TLDR; TO MOVE A BODY ALONGSIDE OF A CERTAIN LINE:

a) GET THE SLOPE
A number in degrees/radian (I guess it matters only in LOVE2D) that has the next tangent: (mouseY – y) /( mouseX – x), assuming that all of them are positive numbers.

b) IN ANY STEPS IN WHICH YOU WANT TO MOVE THE BODY AWAY:

add the cosine of slope to “x” (body’s x coordinate)
add the sine of slope to “y” (body’s x coordinate)

#4 wind, gravity, and other vectors

I quickly realised that even without serious knowledge of linear algebra, you can simply use vectors. They are used in physics to show the amount and the direction of forces. They have 3 properties: an “x”, an “y”, and a “length”. x and y shows, where it pushes stuffs away, while length (which is calculated from x and y) shows, how strong it does that. in fact, I didn’t use it, because direction was more important for me.

Yeah, right, that’s fine, but how to use them? Well, it depends on that what do you want? In case of linear moving, without acceleration, just simply add VectorX to BodyX and also add VectorY to BodyX.

Example use: wind (though in my test I used acceleration for this, just for fun… :P), where WindVector has an y=0, and some x, that you have to add to or substract from BodyX. You already know the difference.

In case of acceleration, you have to store the increasing…ehm…”speed”. Well, yes, you actually store the speed.

Example use: gravity, where GravityVector has and x=0, and some y, and in every frame you have to do the next:

GravityAmount = GravityAmount + GravityVectorY
BodyY = BodyY + Gravity ( + sin(slope) of course)

In this case, there are two forces on your body: one that makes it move algonside a certain line, and one that does it in a straight down direction. The result is a parabola track and a mathematically (I guess?) precise implementation of vertical or oblique projection.

#5 endnote

I may be wrong in many aspects; one thing is sure: this method works amazingly well for me. I even hope that I used the right words; sadly I’m not familiar with “mathematical English”. Also, thanks for reading and have a successfull Ludum-ing!

– Katamori

Handy GameMaker tutorials

Posted by (twitter: @csanyk)
Tuesday, April 22nd, 2014 4:14 am

Handy tutorials for GameMaker developers

Posted by (twitter: @csanyk)
Wednesday, December 11th, 2013 7:14 am

Once again, to help anyone who might need it, here are some handy tutorial articles I wrote up on using GameMaker, for anyone who needs to brush up on their skills or take a crash course:

  1. Leveling Up as a GameMaker dev.  A guide to your progress as you learn the tool.
  2. Position and Motion Tutorial.  The basics of moving objects around the room.
  3. Wave Motion Tutorial. Getting that nice sine-wave sway.
  4. String Handling and Drawing Text.
  5. Draw Rich Text. A handy script for more powerful formatting of text  you draw to the screen.
  6. Building a GameMaker extension. How to write your GML for reusability, and how to use the GameMaker Extension builder.

And, if you’d like a whole book on GameMaker development, I helped out with editing HTML5 Game Development with GameMaker, ©2013 Jason Elliott, Packt Publishing, and can recommend it as a worthwhile book that will teach you some useful things, particularly the new Box2D Physics engine features.

Tutorial

Sunday, April 28th, 2013 2:31 am

So, now I have something that at least can be played. Classic tutorials are boring, so here some billboards.

gameinstruc

First Ingame Screen

001

002

004

 

PD: I was able to record some development in poor quality, sorry, the broadband connection here is really bad. If you still want to see a little of the development of this level you can check here: www.twitch.tv/vladimirdlc

 

Free Live Class on making game with Construct 2

Posted by
Saturday, March 30th, 2013 1:08 am

Hey there! o/

Kyatric and me will be holding a free online class on uReddit

We will teach the basis of construct2 by following more or less closely the making of this little demo

There will be a live session each saturday evening (GMT+1) for 4 weeks from Aprils 6th to April 27th.

If you can’t attend, don’t worry, they will be recorded and replayable on scirra’s twitch and youtube.

You’ll be able to directly interact with us during the live, and indirectly through our subreddit

 

So please, feel free to enroll and spread the word (:

New Udacity course HTML5 Game Development

Posted by (twitter: @tristan_lasty)
Tuesday, February 5th, 2013 7:32 pm

A new Udacity course has just begun, which may be of interest to (future) HTML5 game programmers.

https://www.udacity.com/course/cs255

(Or Watch the short intro video:  https://www.youtube.com/watch?feature=player_embedded&v=F3JeV756B7w )

The course has only just begun so there is not much content yet, just Unit 0 and Unit 1.

Free to sign up and participate.

There are other courses too, ranging from beginners to advanced (python mostly, and even non-computery courses like physics, statistics, algebra)

 

Slopes For Dummies

Posted by
Wednesday, August 29th, 2012 3:32 am

I’m kinda disappointed at the sheer lack of platform games with slopes in them which aren’t Game Maker / Unity hackjobs. So, I’ll explain how they work in Cave Wanderer and to some extent This Is Totally About Evolution.

As I’ve coded both of these games in assembler (Z80 for CW, 68000 for TITAE), and in neither case have I had a floating point unit, I’ve been slightly cheap wrt slopes, simply not affecting the X coordinate.

Anyhow, the most important detail: tile types.

Each tile type has these two values:

  • flags – Flags
  • clampy – Maximum in-tile Y clamp value

And of course, flags is a bunch of boolean true/false values typically stored as a bit mask in some byte/doublebyte/quadbyte integer. (Not using the term “word” – that’s CPU-specific.)

So what we end up doing is a chain of functions doing something like this:

void tile_do_step_1(tiletype_t *tt, int *x, int *y)
{
  if(tt->flags & TF_STEP1)
  {
    /* apply step 1 here - f(v) */
    tile_do_step_2(tt, x, y);
    /* mathematically unapply step 1 here - g(v) */
  } else {
    return tile_do_step_2(tt, x, y);
  }
}

Note, x and y are the x,y coordinates relative to the top-left corner of the tile. Or whatever corner you choose for practicality. Anyhow, those are *pointers* to x and y, mostly because you want to screw with them all the way up and then all the way down again.

Heck, if you really wanted to, you could make them global variables “col_x” and “col_y” or whatever sane name you want to give them. Just be very careful if you decide to start multithreading stuff. Or you could just, y’know, pass the entity along instead.

Having a mathematical inverse is absolutely crucial here – in other words, for every vector v, g(f(v)) = v (or at the very least g(f(g(f(v)))) = g(f(v)) if you can’t ensure that (EDIT 2013-08-19: adjusted the latter constraint)). All inverses I’ve used in CW and TITAE are very straightforward. Let’s list them.

  • TF_SWAPXY: f(x,y) = <y,x> = g(x,y)
  • TF_INVX: f(x,y) = <tile_width-1-x,y> = g(x,y)
  • TF_INVY: f(x,y) = <x,tile_width-1-y> = g(x,y)
  • TF_SLOPE1: f(x,y) = <x,y+x>; g(x,y) = <x,y-x>
  • TF_SLOPE2: f(x,y) = <x,y+x/2); g(x,y) = <x,y-x/2>

Of course, if you want a physically-accurate slope, you’d probably want to then divide the inverses there by some numbers I can’t quite recall the values of, but are basically the lengths of whatever the hell kind of vectors you want to shove in there.

I was experimenting with that in CW but the experiments proved to be a pain in the ass so I just went with what you see above (minus TF_SLOPE1, of course).

Anyhow, the final step is just this:

void tile_do_step_last(tiletype_t *tt, int *x, int *y)
{
  if(*y >= tt->clampy)
    *y = tt->clampy;
}

…that really wasn’t hard, was it?

Of course, you then need to know what to do with these values. Simple: you give an entity and some relative coordinate to a function that goes a little something… like this:

void apply_tile_collision(entity_t *e, int rx, int ry)
{
  int bx = (e->x + rx) % tile_width;
  int by = (e->y + ry) % tile_height;
  int x = bx, y = by;
  tile_do_step_1(get_tile(x/tile_width, y/tile_height), &x, &y);
  e->x += x - bx;
  e->y += y - by;
}

Call that a bunch of times for any point you like, and… that’s it really. Although you can then send across some special flags for each point, like “this is on the bottom therefore I should be counted as on the ground and able to jump”. TITAE uses 8 points for the player: bottom middle, top middle, left middle, right middle, all 4 corners.

Anyhow, the way the tiles are done in CW is something like this:

  • There are “top” (TF_INVY) and “bottom” (no flags) tiles. clampy is about half way down the tile.
  • There are “left” (TF_SWAPXY) and “right” (TF_SWAPXY,TF_INVY) tiles. clampy is 0.
  • There are “clear” (clampy=tile_height*2) and “solid” (clampy=0) tiles.
  • Slopes are denoted with TF_SLOPE2, have selected clampy values, and tend to have TF_INVX in one direction and not in the other.

And that’s Slopes 101. Any questions?

Graduating from Programmer Art

Posted by
Saturday, July 7th, 2012 2:00 pm

As I discussed in my previous post, my largest perceived weakness going into an event such as Ludum Dare was my graphic-making abilities. This past weekend, I took my first step toward exercising that particular skill. Prior to this weekend, I had never created a sprite in my life (that wasn’t entirely one color). Heck, I never even doodled in my notebook in middle school.

Where to Start?

At first, I really didn’t know how I would go about improving myself. Isn’t the designing of sprites just art? Isn’t visual artistic ability just something you’re born with? My brain is so imbalanced to the left hemisphere that I’m constantly falling into traffic. What kind of fool’s errand am I going on here? However, throwing doubt to the wind, I set out to build a sprite.

The first task I gave myself was to pick a graphics tool. I tried some of the ones list in the Ludum Dare Tools section, but didn’t see anything that struck my fancy. At one point I was on Chapter Two of a PyGTK Tutorial in the hopes to build my own tool. Luckily I shut down that bit of insanity. Eventually, I decided to just work with good ole’ Gimp, which worked better than expected.

Next, I went scrounging for tutorials. I didn’t think I’d actually find anything worthwhile, but I was badly mistaken. If you’re a programmer looking to get started with Pixel Art, you MUST read Derek Yu’s Pixel Art Tutorial. It breaks things down step-by-step, which is extremely helpful. Don’t be afraid by Derek’s amazing looking image, the ideas transplanted just as easily into my practice images.

I started very simple: following the tutorial to create a dead-simple picture (a machete). It wasn’t too shabby, but it was also a pretty simple image to begin with. So I decided to go with something a little more advanced to really test myself. I already had some sprites pulled from the NES Game “1942” to use for graphics in a game I’m screwing around with, but maybe I could replace them with some sprites of my own. So, I would use the tutorial’s lessons to create my own sprite of a fighter plane.

Step One: Draw a Concept

Some Clip Art I found to use as inspiration

For me, step one was to get an idea of what I wanted to draw. For Derek, this is Part Three (yeah, I’ve purposefully renumbered the steps to make things confusing for you). First, I googled for a top-down view of a plane, and found something to use as a concept. Next, I tried to draw with pencil and paper a likeness of this plane. I’m not really sure why I decided to do this (after all, I already have some concept art in front of me) but it just felt right. Later I decided that this worked pretty well, as the image I drew was something that I knew I could at the very least draw, which gave me a boost of confidence. It also allowed me to customize the image a bit more to what I wanted. Now to be sure, my drawing abilities are very sub-par (and fortunately for you, I didn’t scan the image I drew), but by studying the original image part by part, I was able to get something decent.

Step Two: Pixel an Outline

I created a new 64×64 pixel image in Gimp, and prepared to embarrass myself. Finally, I ended up with the following:

Some things to note about this:

  • Although you don’t see it in the screenshot above, when working in Gimp I made sure to enable the grids so I had lines separating pixels.
  • There are some jagged lines. While I did heed the tutorial’s warning, I felt that there wasn’t much I could do about some of the jaggedness, particularly near the back of the wings. I hoped that they would come out later in the process.
  • Learning how to use the various Gimp tools to draw/erase/etc in a straight line is pretty helpful. Particularly, it is faster to use this method to draw a line rather than placing every pixel with the pencil tool. Even lines that are drawn at strange angles will give you pixels to start with, and you can just fine tune the resulting line with either the pencil or erase tool
  • Speaking of the erase tool, you’re obviously going to need to set it to “Hard Edge”.
  • One tip is to have a second view open to see what the image looks like in it’s actual size. After you’ve opened your Gimp window and have zoomed in on the image so you can work with the pixels, click “View -> New View”, and Gimp will give you another window that you can set to a different zoom (which is probably best to keep at the default zoom)

Step Three: Add Color

The next step was to add color. I bucket-filled the areas. This was actually pretty nice, since I have always been under the impression that if you bucket-fill a sprite it’s going to look terrible, and the only way to get something decent is to color each pixel individually. You’ll also see that I decided to add a propeller blade to the front for no particular reason.

These are just three colors that I randomly picked. Some day I might actually learn about color theory and all that, but I’ll save that lesson for some other day. Already, I’m pretty darn impressed. I would be happy with this! However, there is more that can be done.

Step Four: Shading/Lighting

The next part is what really makes the image “pop”.

I’m not sure if I got it “right”, but I did get… something. Notes on this step:

  • The basic idea, as explained in the tutorial, is to pretend that there is a source of light, choose the direction it’s coming from, and draw where the shadows should go. Also, lighten where the light hits directly. I sort of changed my mind up half-way through where the light was, so I might be kind of all over the place. Especially on the right side of the tail section. However, it should be pretty clear that the light is above the plane’s vertical axis, and to the left.
  • Here, the dodge/burn tool is your friend. The dodge will lighten, and the burn will darken the pixel you click. Remember to set the tool to “Hard Edge” or else it will affect multiple pixels!
  • Although it might be obvious to some, this wasn’t to me: if you have the default color for the pixel and you dodge (lighten) it, then decide you’d rather keep it at where it was, doing a burn (darken) will NOT get you back to your original color. You’ll need to undo, or just redraw the pixel
  • I reread the tutorial after I was done, and one tip was to do the shadows (darken) first. You’ll end up drawing more shadows this way, which sounds like a good thing. Think about it: with a single point of light, you will have more areas with less light (shadows) than you will being directly hit by the light. I’ll have to keep this in mind next time.

Step Five: Selective Outlining

As you can see, the pixels that I drew for the outline back in Step Two have been dulled down to the colors that are surrounding them. This makes the image less “hard” (or using Derek’s words, “less cartoony”).

  • I made use of the “Smudge” tool. As with the other tools, I made sure to set the “Hard Edge” option so that I would be affecting one pixel at a time. The way the “Smudge” tool works is you click and hold your mouse button on one area (i.e., a blueish pixel in the cockpit window ADJACENT to a black “outline” pixel in the cockpit window), and then drag the cursor INTO the black “outline” pixel. You can think of it as smudging your finger across the page, pushing some of the blue onto the black. Really, what this means is that you get some blend between the dark black and the light blue, without needing to manually pick the dark blue color. The cockpit glass is where it’s most noticeable, but I did it for the majority of the outline pixels.
  • Unlike the other tools, the Smudge tool requires a bit more finesse, since you have to “drag” color from the correct source pixel into the correct destination pixel. Obviously, this can be a pretty long process for all of the outline pixels. If I knew that there would be a large group of pixels in a row that would all have the same smudge source color, then I would smudge one of them. After, I would use the Color Picker tool to select the new color that was created, and use the pencil tool to draw that color onto other pixels that would do the same thing. This was especially effective for those long, straight lines of outline pixels.
  • One thing I could have concentrated on more was to do the selective outlining a bit lighter on the very outside edges of the sprite, as suggested. I played around a bit with the smudge settings, but could have gone even further by using the dodge tool to lighten up these pixels even more.

I Survived!

It’s by no means worthy of the video game hall of fame, but it’s better than stick figures. Some final thoughts on this entire process:

  • In total, it probably took me a bit over an hour for this one sprite. I imagine I can cut this time down by knowing the keyboard shorcuts for gimp, which I was only partially familiar with. Another was the fact that I did this using the trackpad on my laptop. A mouse on a desktop would probably be faster.
  • While Gimp has great toolage for messing around with a single image, I can imagine creating animated sprites would be difficult. On the one hand, Gimp has nothing built in to animate the sprite as you’re creating it. On the other hand, it would not be too hard to write a program that simply animates the sprite for you that you can stick into one corner of the screen while Gimp is open.

Comments/criticism welcome!

How To Write Music For Video Games

Posted by (twitter: @RobProductions)
Thursday, February 2nd, 2012 3:10 pm

So one of the most important parts of game development is getting the music to fit the game. In this post, I’m going to show you how to write your own music from scratch while still giving some tips for advanced composers.

This tutorial focuses mainly on Garageband users, so forgive me if some of the terms are incorrect for different programs.

Software

  • You don’t need costly software to write music, some of the most default programs can do the job.
  • Garageband is recommended for Mac users.
  • A good alternative is Noteflight.com, which can write music the… professional… way. You can save it to a wav. file.

 

WARNING TO GARAGEBAND USERS – DO NOT USE MUSICAL TYPING FOR RECORDING, use the SCORE EDITOR
A – Region Name field: Type a new name for the selected region in the field.

B – Region Pitch slider and field: Drag the slider to transpose the selected Software Instrument region up or down by up to 36 semitones.
You can also type the number of semitones in the field.

C – Velocity slider and field: Drag the slider to change the velocity of selected notes.
You can also type the velocity value in the field.
A note’s velocity reflects how hard the key is pressed when you play the note.

D – Zoom slider: Drag to zoom in for a closer view or to zoom out to see more of the track.

E – Graphic/Notation View buttons: Click to change the editor to graphic view or notation view.

F – Note Value button: Click to choose the note value for notes you add.

G – Fix Timing button: Click to fix the timing of notes in the selected region, or notes selected in the editor, so that notes move to the nearest grid position.

H – Beat ruler: Shows beats and measures for the area visible in the editor.

I – Playhead: Shows the point in the project currently playing.

J – Notation display: Shows the musical events of Software Instrument regions in standard music notation.
You can move notes to adjust their pitch and where they start playing, and change how long they play.

K – Scroll bar: Drag the scroller to move to a different part of a track.

Chord Progression

  • To start off writing your piece, you need a good chord progression.
  • Pick a tune you think can be repeated for the entire song.
  • If stuck, choose four whole notes that descend or ascend.
  • Place the rest of notes in the chord.
  • Try placing a note that’s two steps away to complete the chord.

Adding Other Instruments

  • If you want your song to slowly gain instruments over time:
  1. pick a short tune that can be played to the measures of your chosen chord progression.
  2. One by one, add the instruments with their short tunes until the climax of the song.
  3. This is where the lead comes in.
  • If not, add all the instruments at once at the beginning of the song.
  • There should be only one or two instruments playing the lead in a simple song.

Writing The Lead

  • The lead should have its own instrument(s).
  • Pick a tune that fits the chord.
  • The lead will not have a repeatable tune.

Increasing your song’s intensity with EQ

  • In Garageband, you can edit the instrument’s EQ levels under “Edit Instrument”.
  • EQ levels are the different frequencies of normal sound.
  • Each instrument should have a different EQ frequency.
  • Bass instruments should have a higher base and lower treble.
  • Lead instruments should have a higher treble and lower bass.
  • Feel free to mix these last two up for variation.
  • An example of the lead instrument’s EQ
  • Notice how the lead instrument’s EQ is not that extreme. For background instruments, extreme EQ can be a good thing.

Variations

  • Note that all songs don’t follow the same pattern, this is just one way of writing a song.
  • To make your song sound different or catchy, think of it like making a movie, or a level.
  • Introduce the background instruments first, then show the listener your lead instrument.
  • During a change from loud to soft in music, have a common tune play before the change.
  • If it happens several times, the audience knows that whenever you play that tune, the sound level will drop.
  • Let the audience expect what is going to happen next, so that it becomes catchy.

Obviously I didn’t go into the more advanced note placement tips, or note timing instructions, but this is just a general tutorial.

Good luck writing music in the future, and hope to see more music in Ludum Dare games! :)

If you want to see an example of a Garageband project, see my Isolated Assault Piece (from Ludum Dare 22).

And if you crack open the Isolated Assault Source Files, you can see the same song under Assets/Sound/LD22Track.mp3

One final note: You learn best from experience, so out there and make a song!

How I made a game in 3.5 hours

Posted by
Friday, July 8th, 2011 1:09 am

It’s quite some read, but it might be of interest for you, especially when you want to participate a LD48 for the first time. I wrote some lines about how and in what order I created a tiny math game for a mobile device.

[cache: storing page]