Do you know how to use SDE?
This tutorial will tell you how to create the 'Legend of now' game by me; Flik.
PART ONE:- MAKING THE GAME PROJECT AND SCRIPTING A SIMPLE FUNCTION AND RUN IT
Okay.
First thing I did was opened SDE... (editor.exe)
I selected File > New Project
I called the project name 'Legend of now' and the game title 'Legend of now'.
I was then presented with a window with the title:- Project [Lengend of now]
With the following writing as a options / folders list:-
|-Game Settings
|-Maps
|-Spritesets
|-Scripts
|-Sounds
|-Music
|-Fonts
|-Window Styles
|-Images
|-Animations
Okay. First you right click on scripts.
It will say 'Insert...'; click on 'Insert...'
It now says 'scripts' subdirectory does not exist, create?
With a Yes, No dialogue. Click Yes.
You'll be presented with a Open dialogue.
Ignore this and click Cancel.
Then goto File > New > Script.
It now gives you a Untitled * script file which we can write in.
This is where we type our startup script:-
EvaluateSystemScript("time.js"); // for Delay
function game()
{
GetSystemFont().drawText(0,0, "hello");
FlipScreen();
Delay(500);
}
Now goto Save and call this file 'game.js' in the 'File name' box and click 'Save'
Then goto Script > Check Syntax.
You should get a dialogue called 'Sphere editor' saying something like:-
'Script is Valid'
Now before we play this so called game.
We need to goto Project > Refresh.
Which should change the Project [Legend of now] options / folders list to this:-
|-Game Settings
|-Maps
|-Spritesets
+-Scripts
|-Sounds
|-Music
|-Fonts
|-Window Styles
|-Images
|-Animations
Click on the new + sign.
|-Game Settings
|-Maps
|-Spritesets
--Scripts
||-game.ss
|-Sounds
|-Music
|-Fonts
|-Window Styles
|-Images
|-Animations
Now click on Game Settings in the Project Window.
It gives you a dialogue box saying:-
Game Title:- example game
Main Script:-
Screen Width:- 320
Screen Height:- 240
All you do here is click on the drop down box next to 'Main Script' and select 'game.js'.
Click 'OK'.
Now the game is ready to be played.
Which we can do from the sde, just goto Project > Run. Or click on the lightning arrow.
You should get a screen saying 'Hello' for about half a second.
PART TWO:- CHANGING THE MAIN SCRIPTS GAME FUNCTION SO IT LINKS INTO THE MAP ENGINE
In the list of folders / options in the project window, right click on 'Maps'.
Answer 'Yes' to the 'Insert...' dialogue.
Then answer 'Yes' to the 'Maps subdirectory does not exist, create?' dialogue.
Then in the 'Open' dialogue click 'Cancel'.
What we what to do is make a map called 'Frey' a quite little country town.
File > New > Map.
Now you get a tileset window and an 'Untitled *' window with the 'Map' tag selected.
We'll save this map:-
File > Save.
In the 'File name' box type 'Frey.rmp' and click 'OK'.
Now goto:- Project > Refresh.
Now open up game.js again.
Change:-
function game()
{
GetSystemFont().drawText(0,0, "hello");
FlipScreen();
Delay(500);
}
To:-
function game()
{
MapEngine("frey.rmp", 60);
}
Now check it is valid:-
Script > Check Syntax.
Now believe it or not you actually have done it.
You've created 'Frey.rmp' and changed the script so it loads 'Frey.rmp'.
But if you run this you'll be disappointed.
All it is so far is a blank screen.
PART THREE:- MAKING SOME GRAPHICS AND CREATING A SIMPLE VILLAGE CALLED FREY
Now open up 'Frey.rmp'.
It should look something like this:-
|----------------------------------------------------------------| |----------|
|Frey.rmp | |Tileset |
|----------------------------------------------------------------| |----------|
||-----|---------| | | |
|| Map | Tileset | | | |
|----------------------------------------------------------------| | |
|-----------|ST | | |
|| || | | |
|-----------| | | |
| | | | |
| | | | |
| | | | |
| | | |----------|
| | |
| | |
| | | |-------------|
| | | |Tile preview |
| | | |-------------|
| | | ||-----|-----||
| | | ||Play |Stop ||
| | | ||-----|-----||
| | | |-------------|
| | |
| | |
|----------------------------------------------------------------|
Okay, to get round the problem of the screen being blank we'll create our own tiles.
To start of with move your mouse over towards the tileset window.
Once there right click in the window, and click 'Insert Tile'.
You now have another tile.
Now just under the title of the map there are two tabs 'Map' and 'Tileset'.
Click on the 'Tileset' tab and you go into the tile editor.
|----------------------------------------------------------------| |----------|
|Frey.rmp | |tileset |
|----------------------------------------------------------------| |----------|
||-----|---------| | | |
|| Map | Tileset | | | |
|----------------------------------------------------------------| | |
| | ||---------------|| | |
| | || | || | |
| | ||-------|-------|| | |
| | || | || | |
| | || | || | |
| | C ||-------|-------|| | |
| | O || | || |----------|
| TILE DRAWING | L || | ||
| AREA | O ||-------|-------|| |-------------|
| | R || | || |tile preview |
| | S || | || |-------------|
| | ||-------|-------|| ||-----|-----||
| | || | || ||Play |Stop ||
| | || | || ||-----|-----||
| | ||-------|-------|| |-------------|
| | || | ||
| | || | || |----------------|
| | ||-------|-------|| |swatch |
|----------------------------------------------------------------| |----------------|
|----------------------------------------------------------------| |File Default |
|----------------|
| |
| |
| |
|----------------|
There's a scroll bar at the bottom of the 'Frey.rmp' window now.
If you move this bar along it scrolls though the tiles in the map.
Scroll to the second tile.
Now this is where you create your own grass tile.
I'll give you a little advice, try to use one base green, then add other greens to add texture.
What I did was selected a random green from the swatch window.
Used the 'Fill' button.
Then selected one or two more greens from the swatch and put dots of them onto the grass tile.
Now select the 'Map' tab that's just under the title 'Frey.rmp'.
And in the tileset window click on the new grass tile and it'll get a purple outlined square when you do.
In the map area where the 'ST' is left click to draw a tile.
Contine this process til you have a small area of grass drawn into the map.
Save the map and run the game:-
File > Save.
Project > Run.
Okay now, right click on the grass tile in the tileset window and select 'Append'.
Select that new blank tile by clicking on it and then press the 'Tileset' tab.
Now this time I want to draw a wall tile.
Now to do this select a brown from the color picker or the swatch.
Then use the 'Fill' button to fill the tile with that color.
Choose a darker brown.
Then draw some evenly spaced out horizontal lines along the tile.
Then draw some vertical lines inbetween the horizontal lines to create a wooden wall effect.
Click the 'Map' tab and draw a block of wooden wall tiles.
Draw about five by three so that it could be the front of a house.
Then select the grass tile and draw round the house so it has no nearby blank tiles.
Then, right click on the wooden wall tile and select 'Properties'.
The properties dialogue has a button saying 'Obstruction editor'; click on it.
You'll have the obstruction editor with the wooden wall tile in it.
By left clicking on the tile you'll draw a obstruction.
This wooden wall tile is to be completly obstructed so click on the 'Presets' button and select 'Blocked'.
Then click 'OK' in the 'obstruction editor'.
Then click 'OK' in the 'Tile Properties' dialogue.
Save the map and run the game:-
File > Save.
Project > Run.
PART FOUR:- GIVING YOUR GAME A CHARACTER
Goto the project window and right click on 'spritesets'.
Click 'Insert...' and answer 'Yes' to:- 'spritesets' subdirectory does not exist, create?
Then in the open dialogue browse your computer for a spriteset, e.g. "aegis.rss"
Bare in mind that if you import a different spriteset the below script will have to be changed slightly.
Now to add in our game character we have to edit the start-up script.
Open up the 'game.js' script.
Change:-
function game()
{
MapEngine("frey.rmp");
}
To:-
function game()
{
CreatePerson("aegis", "aegis.rss", false);
AttachInput("aegis");
AttachCamera("aegis");
MapEngine("frey.rmp", 60);
}
Check the script then save it.
Script > Check Syntax.
File > Save.
Run the game and enjoy:-
Project > Run.
PART FIVE:- USING LAYERS TO PRODUCE EFFECTS AND CODING IN A MENU
Okay, coding the menu is simplier so we'll do that first.
First open your "game.js" script again and change:-
function game()
{
CreatePerson("aegis", "aegis.rss", false);
AttachInput("aegis");
AttachCamera("aegis");
MapEngine("frey.rmp", 60);
}
To:-
function game()
{
CreatePerson("aegis", "aegis.rss", false);
AttachInput("aegis");
AttachCamera("aegis");
BindKey(KEY_ESCAPE, "Map_Menu()", "");
MapEngine("frey.rmp", 60);
}
So that we bind the key escape to run the function Map_Menu() when escape is pressed.
Although we haven't made the Map_Menu function yet, we'll make that now.
EvaluateSystemScript("menu.js");
EvaluateSystemScript("screen.js"); // for ClearScreen
function Map_Menu()
{
ClearScreen();
var menu = new Menu();
menu.addItem("Keep Playing", function(){});
menu.addItem("Quit Game...", Exit);
menu.execute(16, 16, 96, 32);
}
Whooa, lots of code there. Don't worry it'll be explained in more detail on the scripting tutorial. :)
But really, the only thing there that is new is the Menu object.
Check the script then save it.
Script > Check Syntax.
File > Save.
And test it in the engine;
Project > Run.
Okay, layers...
Open up your map ("Frey.rmp") and you notice that you already have one layer.
Your one layer is your map at this point in time.
You want to add other layers ontop of it so that you can use alpha layers in your tiles to create shadows.
Okay, on the left hand side of the map, there's a column just below the 'Map' tag...
It's marked 'X' on this diagram:-
|----------------------------------------------------------------| |----------|
|Frey.rmp | |Tileset |
|----------------------------------------------------------------| |----------|
||-----|---------| | | |
|| Map | Tileset | | | |
|----------------------------------------------------------------| | |
|-----------|ST | | |
|| X || | | |
|-----------| | | |
| | | | |
| | | | |
| | | | |
| | | |----------|
| | |
| | |
| | | |-------------|
| | | |Tile preview |
| | | |-------------|
| | | ||-----|-----||
| | | ||Play |Stop ||
| | | ||-----|-----||
| | | |-------------|
| | |
| | |
|----------------------------------------------------------------|
That box represents your one layer that you already have.
Right click on it to reveal this menu:-
Visible
Base Layer
Insert Layer
Delete Layer
Properties
Move Down
Move Up
Fill
Select "Insert Layer" and it creates a layer that it places below the current layer.
Right click on this new layer and click "Properties" and give it a name like "shadows".
Okay, now right click on your "shadows" layer and select "Move Up" to move it up.
Now goto the Tileset window and "Append" a tile to it.
Click this new tile and click the "Tileset" tab located just above your "shadows" layer.
Select the color black and use the alpha level scroll bar to select how transparent your black is. I recommend about alpha level '100'.
Select "Fill Alpha".
Now go back to the map and draw this tile in places where there should be shadow. Like in front of buildings.
Hint:- Make sure you've selected your "shadows" layer, so that you draw that tile to that layer.
When your done, click back to layer 'X' which we didn't even bother giving a name, which is why I'm calling it 'X'.
This using layers for rendering is a nifty technique, but it might be bad if you over use it.
Advice:- Try not to use more than 5 layers in total.
PART SIX (A):- ADDING REFLECTIONS
Open Frey.rmp and click on the 'Tileset' tab.
Click on the last tile in the seperate 'Tileset' window, and right click, "Append Tile".
Now goto the last tile in the tileset you've create and draw out an ice tile.
Select some relevant alpha level, like '122' and click 'Fill Alpha'.
Switch back to map mode (click the 'Map' tab) and draw the ice tiles in somewhere.
Then click on the layer called 'base' and choose properties.
Tick reflective.
Save your map, and run the game.
File > Save.
Project > Run.
Thats it for now:-
Tell me what you want to know next.