Richard Ramsden

(2.1) Introduction to Gosu

Now to kick part II off I've decided to switch from Zelda to a more traditional RPG game. It's your decision to choose what tileset/sprites suite your game needs. The only reason I decided to switch was because there's so many independent Zelda games out there that there's no real point in re-inventing the wheel. We should do something unique and original with our GAMENAO game series.



If you reading this part it means:

• Ruby is installed and working
• You've written your first "Hello World" game

Now to get things started we need to setup a new game directory if you haven't already.

Download and extract the game directory http://www.gamenao.com/download/shiningforce.zip

C:/Game/controllers/
C:/Game/media/
C:/Game/models/
C:/Game/views/
C:/Game/main.rb

You directory root should look something like the above. Why is there a controllers, models, and views folder? We're going to use something called the MVC (Model Viewer Controller) Framework. Many of todays games use this framework to separate and modulate program logic. In todays example will create a player controller which will have functions for a players movement eg. (Left, Right, Up, Down). The model will have a base structure for our player which will include his/her stats and position on the screen. Finally the views folder will hold map data for our game. It's simple if you think of MVC as what I just decsribed above, we're just modulating our program instead of sticking it in one big file (which would get messy). To learn more about MVC read http://en.wikipedia.org/wiki/Model-view-controller

Now that we have our little directory setup it's time to start programming! If you open your "main.rb" you should see the following

begin # In case you use Gosu via RubyGems.
  require 'rubygems'

rescue LoadError
end
 

require 'gosu'
 

class MyWindow < Gosu::Window
     def initialize
         super(640, 480, false, 20)
         self.caption = 'Shining Force: Legend of Ruby'
         @song = Gosu::Song.new(self, "media/music/castle01.mp3")
         @song.play(true)
     end
end
 
w = MyWindow.new
w.show

Now i've highlighted some lines that I want to bring your attention too. At the top we have our few lines that
include the Gosu game engine.

The first line:

class MyWindow < Gosu::Window

What you see here is a class defined with the name "MyWindow". Gosu has their own Window class which we will be extending onto using "< Gosu::Window"
Now for those who don't know what a Class is it's a simple structure for holding user-defined functions for example:

class MyClass
  
  def initialize(name, age)
    @fullname = name
    @age = age
  end
  
  def printName
    puts @fullname
  end
 
  def printAge
    puts @age
  end
 
end

If you write the above to a file, let's call it example.rb and open up "irb" and type require 'example.rb' it should load the class into memory.
Now let's create the class object by typing

irb(main):011:0> myobject = MyClass.new("Richard", 21)
irb(main):011:0> myobject.printName
Richard

As you can see we create the class by using .new() and store the object it creates in myobject. To call the function we simple type myobject.printName

The second line:

super(640, 480, false, 20)

This one is a bit easier, super() modifies variables in the Gosu::Window class (Remember the class we were extending?). This class holds the width, height of our screen. the syntax you see here is

super([screen width], [screenheight], [fullscreen], [framerate])

The third line:

@song = Gosu::Song.new(self, "media/music/castle01.mp3")
@song.play(true)

It's also pretty straight-forward, as you see we're using Gosu's Song class Gosu::Song.new() what might be a little unclear is what we're passing it (self, [song]).
Now if you lookup the Song() class in Gosu's documentation http://code.google.com/p/gosu/wiki/RubyReference

class Gosu::Song

• initialize(window, filename)
• play(looping = false): Also used to resume paused songs.
• pause
• paused?
• stop
• playing?
• volume, from 0..1.
• volume=(vol), with vol from 0..1

As you can see we're passing the Song class the current window self and the MP3 we want to play

Lastly:
w = MyWindow.new
w.show

Obviously this creates our window object and starts up the window.

Moving on

(2.2) Creating the player model

That's right! It's time we start drawing stuff to the screen! The most exciting part you've all been waiting for
First we need to define the player objects structure inside the model directory. Go ahead and create an empty file for our
player model called "models/player.rb" inside this file we can workout the basic shell for our player.

NOTE: @y += 4 is a short form for @y = @y + 4

class Player
  
   def initialize(window, x, y)
         @x, @y = x, y
 
         @player  = Gosu::Image.load_tiles(window, "media/down.png", 47, 47, false)
         @up       = @player [0..1]
         @right   = @player [2..3]
         @left      = @player [4..5]
         @down   = @player [6..7]
    
         @cur_image = @down
 
     end
 
     def walk_up
         @cur_image = @up
         @y -= 4
     end
 
     def walk_right
         @cur_image = @right
         @x += 4
     end
 
     def walk_left
         @cur_image = @left 
         @x -= 4
     end
 
     def walk_down
         @cur_image = @down     
         @y += 4
     end
 
     def draw(offset_x, offset_y)
         img = @cur_image[Gosu::milliseconds / 500 % @cur_image.size]
         img.draw(@x - offset_x, @y - offset_y, 0, 1.0, 1.0)
     end
 
end

Let's jump into the complicated stuff!

@player = Gosu::Image.load_tiles(window, "media/down.png", 47, 47, false)
@up = @player[0..1]
@right = @player[2..3]
@left = @player[4..5]
@down = @player[6..7]

As you can see here your loading the picture media/down.png and slicing it up into 47x47 blocks when you do this
an array of 47x47 block pictures will be stored in @player


[0].......... [1]........ [2]...... [3] ......[4] .......[5] ......[6]....... [7]

As you can see,
@up corresponds to @player[0..1] (0 through 1)
@right corresponds to @player[2..3] (2 through 3)
. . .
etc.

Only one last thing to explain:

img = @cur_image[Gosu::milliseconds / 100 % @cur_image.size]

You're probably wondering what this line does? Simple, it's going to alternate through our two images every 100 milliseconds
@cur_image.size would be how many pictures were in the array for it to alternate between. I'll go over modolus for those who haven't taken
University mathematics courses yet in a later tutorial for now, just remember this is going to alternate between 0 and 1 every 100 milliseconds

Finally img.draw() draws our player to the screen, now before we can see this Player class in action we have to include it! Open up main.rb and
add the following lines:

begin # In case you use Gosu via RubyGems.
  require 'rubygems'

rescue LoadError
end
 

require 'gosu'

require 'model/player'

class MyWindow < Gosu::Window
  def initialize
    super(640, 480, false, 20)
    self.caption = 'Shining Force: Legend of Ruby'
    @song = Gosu::Song.new(self, "media/music/castle01.mp3")
    @song.play(true)
   
    @player = Player.new(self, 320, 240)   
 
  end
 
  def update
    @player.draw(0,0)
end
 
end

Now because this class extends Gosu::Window the function def update is visited every game tick. Which means its going to loop through drawing and re-drawing our character on the screen. This is how a video game works, it's a big continuous loop checking updates.

Execute and run your main.rb file and see if you get the character walk animation working ( If it doesn't work, try to find out where the error is, Ruby will give you a filename and line number). Now let's trace our steps, what exactly is Gosu doing to create this walk animation:



(2.3) Creating the player controller

Now it's time to make our player move! Will have to make a few changes to the main.rb file to
setup the controller for our character.

class MyWindow < Gosu::Window
  def initialize
    super(640, 480, false, 20)
    self.caption = 'Shining Force: Legend of Ruby'
    @player = Player.new(self, 50, 50)
    @controller = Controller.new(self, @player)
    @song = Gosu::Song.new(self, "media/music/castle01.mp3")
    @song.play(true)
  end
 
  def update
    @player.draw(0,0)
    @controller.update()
  end
end

After adding the controller class to main.rb we have to create it! Change the directory to controllers/ and create a file called player_controller.rb

class Controller
  def initialize(window, player)
        @window = window
        @player = player
  end
 
  def update
        if @window.button_down? Gosu::Button::KbUp then
                @player.turn_up()
        elsif @window.button_down? Gosu::Button::KbDown then
                @player.turn_down()
        elsif @window.button_down? Gosu::Button::KbLeft then
                @player.turn_left()
        elsif @window.button_down? Gosu::Button::KbRight then
                @player.turn_right()
        end
  end
end

I hope this is pretty self-explanatory to you. You can see Gosu::Button::Kb refers to the current key you press down on your keyboard and the if/elsif/else structure just means

if something?
     do something

else if another thing?
     do something

else if another thing?
     do something

else nothing worked?
     do something

Anyway that's it! Launch main.rb and you should have a walking character if you don't. Feel free to download this part from download location
http://www.gamenao.com/download/shiningforce_ii.zip

Any this concludes part II, the next episode i'll be covering how to create a map!