Home > Tutorials > Fury > Making a Simple Game
Making a Simple Game
[header]Introduction[/header]
This picture-heavy tutorial is aimed at new users of Fury². It'll teach you, step by step, how to make a simple 'game'. By the end of this tutorial you'll (hopefully) learn how to create maps, tilesets, and sprites for your Fury² masterpiece. You'll still need more to create a real game, but I hope you'll be able to learn the basic stuff after reading it.
[header]Contents[/header]
1. Downloading Fury²
2. Making the game and configuring it
3. Making a tileset and a map
4. Making a sprite, the hard way
5. Making a system script
6. Finishing touch
[header]1. Downloading Fury²[/header]
This part is easy, check the Download page, and download the newest engine and editor files, plus the examples setups. The examples are the best way to learn more about Fury².
[header]2. Making the game and configuring it[/header]
The first thing you need to do is to launch Fury² Editor. You can do that from the programs menu, or by going to the location where you installed Fury² and running ngIDE.exe.
Once Fury² Editor is open, click File on the menu bar, then move the mouse over the first option (New) and click Game from the menu that pops up. This is how you create most 'new' things such as maps or sprites.
You'll encounter a window that asks you to browse for folder. Attack it with level 2 thunder spell and take the right... Err, um, never mind. Here is where you specify where you want your game files to be saved. Just make a new folder wherever you like and click OK. You'll get a nice notice at the bottom of the screen:
It asks you to open some game.f2config file. Do that by clicking "Open game.f2config" (duh!). You can also open it from the Filesystem panel at the right side. If you don't see the Filesystem panel, you can show it by pressing F8, or going through the View menu and then check Filesystem under the Panels menu. It's a very useful panel, because it allows you to view files, rename them, delete them, etc. Anyway, open game.f2config!
The file game.f2config holds many default settings for your game. You can change the screen resolution, get rid of the configuration dialogue that pops up when you run the game, change the default font, window skin, icon, map, and much more. For now, however, all we'll change is the game's title. See the line with Title:Untitled Game? Add your game's name after Title:, for this example I'll call the game My Game. Once done, make sure to save your changes by either clicking one of the save icons on the toolbar, or saving from the File menu. Before moving to the next section, we need some resources for the simple game. We mainly need a sprite for the player and a tileset for the map. To make it easy, just copy the ones in Basic example that comes with the examples download to your game's folder. Or you could just download them and save them in your game's folder:
[header]3. Making a tileset and a map[/header]
From the File menu, create a New Tileset. A tileset is a collection of tiles, and tiles are what makes maps. Some other game making applications like making up their own names, so you might also know tilesets as chipsets. Anyway, you'll get a Create Tileset window.
There are only 4 options here, so I'll explain them:
Filename
The filename of the image that holds the tiles. Remember Town.png[/img] that you copied or downloaded just a moments ago? You can browse for it (by clicking the dots) or type its name here.
MatteColor
Also known as the transparent color. This color won't show up when mapping. There are two ways to get transparent colors in Fury²: One is to specify a matte color, and the other is by having alpha information built-in the image. The tileset we're using already has its alpha values defined (by an external program like Photoshop), so we don't need to care about MatteColor for now.
TileWidth
The width of a single tile. In the tileset we're using, each tile is 16 pixels wide.
TileHeight
The Height of a single tile. In the tileset we're using, each tile is 16 pixels high.
Since the default width and height in Fury² are 16, and because we're not using MatteColor for this game, you only need to browse for the tileset file, and click OK.
There's nothing to change here. You can view the tiles through the Tiles tab, but other than that just save the tileset (from the file menu or the toolbar). I'll save it as town.f2tileset.
Now we move to learn the sacred art of map making. It takes year of practice to master this art, but with me it only takes 9 screenshots. First, we create a new Map from the File menu. A 'Create New Map' menu will be shown.
You don't need to worry about the tileset stuff, Fury² allows you to quickly create tilesets without saving them as f2tileset files. But it's often better to create tileset manually like I did. Just set the map's height to 15, and width to 20 (16 pixels per tile * 20 tiles per map = 320, 16 * 15 = 240, so we get a map that is just as big as our screen resolution). Also set the number of layers to 3, and give the map a nice name like My Map. When you're done, click OK.
This is the map editor, the place where you'll spend the next few years in your life trying to make maps for your pokemon fan game. Maps are made of layers, which define what goes over what, as well as other things. To put it simply, some tiles will be drawn below the player, NPCs, and other tiles, like grass for example. Others would be on the same level, like a wall for example. Finally, you have parts that go over the hero, like a bridge or a the top part of a tree. We'll start with the first layer, which we'll call 'Under'. The 3 layers are listed to the right part, under 'Layers'. Initially they are all named 'Untitled'. To change a Layer's name, click on it and then click on the Layer tab, which is also to the right, under all the layers, and next to the Tileset tab. When you click it, you'll get many options for that layer, for now we'll just change the Name to Under. After that, click on the Tileset tab (next to Layer).
We want to use the tileset we made; this is done by importing it. See the little folder icon under the Tileset tab? (I've marked it with a red circle) Just click it and browse to the town.f2tileset you've created. You'll be able to see all the tiles in the box under the Import Tileset icon, you can now start making the map by selecting a tile and left clicking on the map to place it. Make sure the Under layer is selected, and only place ground tiles that are always under everthing else. You can use some neat tools like Flood Fill and Rectangle to make it easier. You should have something like this when you're done:
Now we move to the second layer. This is the layer where the player sprite will be, and also where stuff that are over the ground are. You can have walls, tables, monkeys, and whatever you want on the second layer. Since everything on this layer is on the same level as the hero (although tiles will still be drawn under hero), we'll rename it to Same. Another thing we have to do is to tell Fury² that this layer can have transparent tiles, which is done by setting the layer's Effect to F2LE_Alpha (or F2LE_Matte if you used MatteColor for the tileset).
Import a tileset the same way you did for the first layer, then start placing tiles on the map. For example, place a house and part of its roof on the map. I said 'part of the roof' because I plan to have a part that is drawn over the hero, but let's save that for the third layer.
The tiles in the third layer will be drawn over the hero. Note that you can have as many layers as you like, what goes over the hero and what goes under him/her/it depends on where the hero sprite is drawn. We'll get to that when we write the system script, but for now just rename the third layer to Over and set the layer Effect to F2LE_Alpha to enable transparency (actually, alpha blending) on this layer. Then just import the tileset and draw the top part of the roof, which will hide the hero. I've toggled on the Ghost Non-Selected Layers button in the following screenshot to show you what part I edited. This button is very useful and can be found under the layers list.
Now we move on to editing the blocking of the map. Basically, this refers to what parts of the map the player and other sprite can go over and what parts are solid. To start working on map blocking, click on the Blocking Tab.
Blocking in Fury² is mainly done on a per-map basis. You define what parts are blocked and what parts are passable by drawing lines and boxes on the map. In our example, the player can't go over the house (aside from a small part at the top, which goes over the player), so we draw a box around the house. You could either use the pen tool or the box tool (on the vertical toolbar to the left) to do it, make sure you're on the Same layer and draw a box around the blocked area.
That's it! Save the map as town.f2map and we're done! Now you've mastered the sacred art of map making, and are ready to face your next challenge: The Seven Eyed Blue Dragon Of The Black Tear. Good luck adventurer, you'll need it.
[header]4. Making a sprite, the hard way[/header]
There are various ways to make sprites in Fury², the easiest ways being importing sprites that use the format of RPG Maker 2000. You can also use the Sprite Importer which helps you import sprites by specifying a few options. Both of those importers could be found under the Tools menu, or on the toolbar. Both tools create sprite collections, which you can also create manually. This is what we're going to do, create a sprite collection for the player sprite without using any easy shortcuts. It takes more time when we do that, but if you understand the hard way using the easier ways is... Easy!
The first thing you do is create a new sprite collection, this is done through the file menu, New, and Sprite Collection. A sprite collection can hold many sprites, but the one we created now is just empty. Let's add a sprite for the player by right clicking on the empty area on the right and then clicking on Insert New.
Once the new sprite is created, you'll need to edit a few options for it. There are tons of options to edit, but for now edit the following:
AnimateWhileMoving
Should the sprite animate when the sprite is moving? Sure! Set it to True.
Class
What type of sprite is this? A player is a party member, so set it to F2SC_PartyMember. Effect
Like Tiles, you can either use MatteColor or alpha values, set it to F2SB_Alpha for the latter. Name
The sprite's name, let's call it Player.
Solid
Does this sprite block other sprites from passing it? Does it follow map's blocking lines? Set it to True.
Now we move to the hard part: editing poses and frames. Sprites in Fury² are composed of states such as normal, injured, ghost, etc. Each state has a set of poses, which are things like up, left, jumping, eating, etc. Each pose is composed of a set of animation frames, which are often looped to show some sort of animation. The first thing we need to worry about are poses, we're going to make a pose for every direction, that's 4 in the case of this sprite. Fury² directions should be ordered starting from 'looking up' and going clockwise; in our case, up, right, down, left. So, we work on the pose for 'up' first. To create a new pose click on the Poses tab, then right click on the blank area below and Insert New pose. Edit the pose' options so that its name is 'Up', and the loop mode is F2LM_Restart.
Click on the Frames tab, then right click on the blank area under it and Insert New. The first frame is the Stopped Frame by default, it's the frame used when the sprite isn't moving. Under option, set Filename to /player.png[/img] (the player sprite image) or browse for it.
You need to tell Fury² where the frame is located on the image, this is done by clicking on the Rectangle tab (between Options and Alignment) and either manually drawing the rectangle that specifies the frame, or entering a value in the (x1, y1) - (x2, y2) format in the text box at the bottom. You can also drag the rectangle by right clicking it. For better results, I prefer to input the values manually. Keeping in mind that each frame in this sprite is 16 pixels wide and 32 pixels high; the rectangle for the stopping frame when the sprite is looking up is (0, 32) - (16, 64).
Click on the Alignment tab next to Rectangle. The alignment of the frame specifies where the origin of the sprite is. It's used to position the frame on the map. Most of the time it should be at the horizontal center, and vertically at the sprite's feet. Just set it to 7.5, 31.
Right click the white area where you added Stopped Frame and Insert New. This will be Animation Frame 1. Repeat the same steps for stopped frame (select it's filename under options, set its rectangle and alignment). This could get boring, so you could just right click Stopped Frame and duplicate it (or copy and paste it), then edit the Rectangle to (16, 32) - (32, 64). Another way is selecting all the frames (shift or ctrl and clicking on each frame) you want to edit and editing their information at once, this is called multiselecting. You'll have to make 3 other frames for this pose. The rectangles of this pose (Up) are:
Stopped Frame: (0, 32) - (16, 64)
Animation Frame 1: (16, 32) - (32, 64)
Animation Frame 2: (32, 32) - (48, 64)
Animation Frame 3: (48, 32) - (64, 64)
Animation Frame 4: (64, 32) - (80, 64)
Now we move on to edit the Blocking of the sprite. Like the map, there is a part of the sprite that is solid, other sprites can't move over this part, and it's also used to check collision with the map's blocking lines. Blocking is part of the pose, not the frames. So click on the Blocking tab right next to Frames.
You need to draw a rectangle that specifies the blocking or solid area of this pose. For now just use the value 14x16. That's it for the Up directional pose, next is right, down, and left, you can duplicate or copy and paste other poses. The main thing you change in all frames and poses is the rectangles. It could get boring, but that's why this is the hard way! You can also use the Sprite Importer from the Tools menu, or just copy player.f2sprites from the Basic Example, I'll just do the latter!
When you're done with pose editing, click on the States tab (next to Overview), there will be a state named New State (or Normal if you used player.f2sprites), set DirectionalPoses to 4 and name it Normal. A state is a set of poses, normally you'd have one state for every sprite. But you could have a different state such as injured, with blood covering the sprite's face, and use scripting to switch to that state when the character's HP is low. I can think of many other uses, but for now let's use one Normal state.
Now you need to specify which poses are part of the Normal state. Click on the Poses tab and select all the 4 directional poses by clicking on the first and dragging to the last pose.
Yay! You're done with sprite editing! Save the sprite collection as player.f2sprites and prepare for the next level... Scripting!
[header]5. Making a system script[/header]
You probably think you're all big and have mastered all the elements of the art of Fury², but you're wrong! To really master this sophisticated art, you need to get dirty. Yup, that's what I mean; you need to take the path of the nerd... Good luck!
Fury² allows you to use scripting to shape your game. You'll use scripts to make a title menu, a battle system, cutscenes, and everything you can think of. Scripting gives you great control on how you want your game to be, but at the same time you are provided with tons of easy to use functions that makes it much (MUCH) easier than programming your own game from scratch. Fury² supports different scripting languages, such as Python and Ruby. But for this tutorial we'll be using vbscript, a simple scripting language based on Visual Basic. A nice vbscript tutorial can be found here.
Anyway, the script you'll write is the system script, it's so called because the file name must be system.f2script, and is read by the engine when loading your game. To add a new script, use the file menu (File > New > Script). You'll get a blank text file where you can enter your code to hack the world.
I'm lazy so I'll just borrow the code from the Basic example game:
If you're lazy too, copy and paste the following:
Code:
Dim Controller, PlayerSprite
Sub Engine_Start()
' Keep the camera from scrolling off the map
Camera.ConstrainToMap = True
' Load the player sprite
Set PlayerSprite = LoadSprite("/player.f2sprites", 1)
' Place it on the map
Map.AddSprite PlayerSprite, 2, 160, 120
' Create a keyboard controller attached to the player sprite
Set Controller = F2Controller(PlayerSprite, Camera)
' Install the controller
HookEvents Controller
End Sub
First we declared two variables to hold the player's sprite, as well as a controller (controllers respond to player's input and move the sprite -and optionally the camera- depending on it). The subroutine named Engine_Start is called by Fury² when the engine starts! Inside that sub we constrain the camera to the map so that it wouldn't scroll past the map's edges. Then we load the player's sprite by calling the LoadSprite function and passing the sprite collection's file name as well as the number of the sprite we want to load (sprite collections can have more than one sprite, remember?). We add the sprite to the second layer, with x position as 160 and y as 120. Finally we create a controller and attach it to the player sprite, we also have to install the controller. This isn't really a scripting tutorial, so you should check the Engine Documentation for more information. Anyway, save the script file as system.f2script.
[header]6. Finishing Touch[/header]
Anyway, we're almost done. All we have to do now is tell Fury² which map to load on start up. Remember game.f2config? Open that file again (using the filesystem panel) and change the line with Default Map: to Default Map:town.f2map (or whatever name you saved the map as). When you're done, save the config file.
And that's all! Just click on the green Run Game button, press F9, or go through the Game menu and click on Run Game. There you go, this is our epic masterpiece. Play around with mapping, sprites, and scripting to turn your game into the next Final Fantasy 7 fangame. If you have questions or suggestions, you can edit the talk page of this tutorial. I hope you found it useful!
 |
|
Details
|
|
Tutorial:
|
Making a Simple Game |
|
Date Listed:
|
2008-06-03 |
|
Author:
|
RPG
|
|
Total Hits:
|
4499 |
|
 |
Submit Your Article
Guild Wars 2 Forum
RPG Maker VX.com
