Spherical forums

Sphere Development => Sphere Support => Topic started by: AlexandrTheGreat on June 21, 2013, 11:25:00 pm

Title: Game Beginning
Post by: AlexandrTheGreat on June 21, 2013, 11:25:00 pm
Alrighty, I'm not really sure where to start with my game. I think I'd like to start on something that I can see results as I work on it. I don't have the story nailed down yet, but I do have a lot of mechanics in mind that I'd be happy to work on.

Any suggestions where to begin?
Title: Re: Game Beginning
Post by: Radnen on June 22, 2013, 12:06:41 am
Start with the MapEngine, creating a map, getting a person to walk around. Then add NPC's, and dialogue. Perhaps yes/no boxes. These will be important for your story. Then build up from there: items, menus, shops, and then do the battle system last.
Title: Re: Game Beginning
Post by: ninjasword on June 22, 2013, 12:20:12 am
the user interface is a good place to start, how to draw information on the screen is going to be invaluable to u when u want to start debugging. maybe try making a miniture project that has a UI in it... or single out a feature that u like on ur game and try to make a miniture project with just that one feature.
Title: Re: Game Beginning
Post by: AlexandrTheGreat on June 22, 2013, 12:50:26 am
Hmmm.... I think starting a UI would be my first choice. I know how to make sprites, a map and the rest of the "basic game" tutorial.

For the UI, how would I start that? What commands and such, or a small demo so I can start with it and change it from there?

Or for the map, is there a way to make it a grid similar to how the character in a pokemon game moves? I'm not sure if that's the design I'll stick with, but I wouldn't mind knowing how to do that.
Title: Re: Game Beginning
Post by: Radnen on June 22, 2013, 03:17:30 am
What do you mean by a "grid smaller"? By default the map uses 16x16 sized tiles which will emulate the size used by Pokémon games.

For the UI you'll want to draw shapes and images. For a UI over a map you'll need to know how to set a render script. The functions that'll come in handyy for you:

Code: (javascript) [Select]

Rectangle(x, y, w, h, color);
FilledCircle(x, y, r, color, anti-alias);
OutlinedCircle(x, y, r, color, anti-alias);
OutlinedRectangle(x, y, w, h, color);
Point(x, y, color);
Image.blit(x, y);
Image.blitMask(x, y, color);
Image.rotateBlit(x, y, radius);
SetClippingRectangle(x, y, w, h); // useful for minimaps or picture-in-picture stuff
SetRenderScript(script);
SetLayerRenderer(layer, script);
Font.drawText(x, y, text);
WindowStyle.drawWindow(x, y, w h);


You can only set one RenderScript at a time, so usually the simple method is to attach a single render method to the render script and then from there render everything you need. Like so:

This tutorial will draw a rectangle to screen at (0, 0) with 100 pixels width and 12 height. This can simulate a health bar for example.
Code: (javascript) [Select]

function game()
{
  // ...
  SetRenderScript("MyRender();");
  // ...
  MapEngine("your map.rmp", 60); // make sure this is called last
}

var Red = CreateColor(255, 0, 0);
function MyRender()
{
  Rectangle(0, 0, 100, 12, Red);
}


Notice the render scripts do not require the use of a FlipScreen call. This is because the map engine will do it for you anyways. Now, to get it to react to health takes a tiny amount of math:

Code: (javascript) [Select]

var Red = CreateColor(255, 0, 0);
var White = CreateColor(255, 255, 255);
var Black = CreateColor(0, 0, 0);
var Font = GetSystemFont();
var hp = 50;
var maxhp = 50;
function MyRender()
{
  Rectangle(0, 0, (hp / maxhp) * 100, 12, Red);
  Font.setColorMask(Black);
  Font.drawText(1, 1, hp + "/" + maxhp);
  Font.setColorMask(White);
  Font.drawText(0, 0, hp + "/" + maxhp); // will be drawn on top of the hp gauge
}


Then if you minus numbers from the hp variable, the healthbar will shrink from 50 pixels down to 0. Notice it also displays the numbers too!
Title: Re: Game Beginning
Post by: DaVince on June 22, 2013, 07:40:39 am
Do you have down how your game is going to work? What functionality you want, what they are going to look like? Thinking about these and sketching them out a bit before you begin helps you make concrete how things will ultimately end up working.

But yeah, after that, I'd start with GUI elements, too. Well, after having set up a simple test map (or other environment), of course. Also, some preparation of the game systems/mechanics you want to have by writing some basic code for them (and determining what kinds of functions and objects you'll need to make in order to make these mechanics work).
Title: Re: Game Beginning
Post by: Fat Cerberus on June 22, 2013, 11:32:08 am
@Radnen
He said a "grid similar to Pokemon", not sure where you got 'smaller' from. I know what he means, he's talking about tile-by-tile movement, as opposed to Sphere's pixel movement.
Title: Re: Game Beginning
Post by: AlexandrTheGreat on June 22, 2013, 01:28:52 pm
Yes! Tile-by-tile. I wasn't sure how to phrase it. Thank you Lord English.

@Radnen: Thanks for the coding examples, that'll come in useful definitely.

@DaVince: I have a pretty good idea how I want things to work. I know I'm going to need a lot of menu options (jobs, talents, items, etc.) which is why I wanted to start with the UI. The sprite-set I'm not too worried about right now as I can setup basic ones and improve them later. I'm assuming you can import sprites from another program like Paint rather than have to draw all of them in the Sphere box?

I know it's a lot of questions, but I'm really thankful for all the help!
Title: Re: Game Beginning
Post by: DaVince on June 22, 2013, 02:04:19 pm

@DaVince: I have a pretty good idea how I want things to work. I know I'm going to need a lot of menu options (jobs, talents, items, etc.) which is why I wanted to start with the UI. The sprite-set I'm not too worried about right now as I can setup basic ones and improve them later. I'm assuming you can import sprites from another program like Paint rather than have to draw all of them in the Sphere box?

Yup. Both copying image data and using plain (PNG) images should work just fine. A Sphere project's just a collection of files, after all.
Title: Re: Game Beginning
Post by: AlexandrTheGreat on June 22, 2013, 11:47:16 pm
Alright, I've gotten a good (albeit, small) start on my UI. I'm wondering how math (multiplication, division) works in Sphere. I've read the tutorial about variable adding/subtracting, but I was wondering if there was a simpler way to achieve x/y rather than using repeated subtraction. Ideally, I'm looking to display HP Percentage.

I've also noticed that some characters (+, %, etc.) turn pink when entered. Is there a function list for them?

I've created a hand-drawn UI as a guide for what I want, as per suggestions. It's fairly simple: bank of HP bars, current local time, Activate Button, Menu/Cancel Button, and a D-Pad (modeled for touch screens/mouse clicks - to be linked to a keyboard input as well).

I'm also curious how to change the font size?
Title: Re: Game Beginning
Post by: DaVince on June 23, 2013, 05:08:39 am

Alright, I've gotten a good (albeit, small) start on my UI. I'm wondering how math (multiplication, division) works in Sphere. I've read the tutorial about variable adding/subtracting, but I was wondering if there was a simpler way to achieve x/y rather than using repeated subtraction. Ideally, I'm looking to display HP Percentage.

Oh geez, that was never even in the tutorial? * is for multiplication, / for division. You can also do variable *= 2 to multiply the variable by 2, for example.

As for %, it's modulo - it gives you the remainder of a division. See this page (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators) for details.

Quote
I'm also curious how to change the font size?

There's two ways depending on what you want.

I'm not sure about Radnen's editor right now, but in the default editor provided with the engine, there's a tool to convert Windows fonts into Sphere fonts. (File > Import > Windows font to Sphere font). You can set the font colour (white is recommended because you can easily change that into any colour in the game!) and font size in there.

The other way is to use the font.drawZoomedText (http://wiki.spheredev.org/API:Font/drawZoomedText)(x, y, scale, text) function. Note that you can't do this if you want to use Sphere's font.drawTextBox (http://wiki.spheredev.org/API:Font/drawTextBox)(), though, since there's no font.drawZoomedTextBox...
Title: Re: Game Beginning
Post by: Flying Jester on June 23, 2013, 06:12:19 pm
You can use drawTextBox on a surface, and then zoom blit that.

Code: (javascript) [Select]


function drawTextBoxZoomed(font, x, y, w, h, offset, text, factor){
     var surf = CreateSurface(w, h, CreateColor(0, 0, 0, 0);
     surf.drawTextBox(font, x, y, w, h, offset, text);
     surf.CreateImage().zoomBlit(x, y, f);
}



I didn't test that, but it is definitely possible.

Alternatively, you could also use the font.wordWrapString (which returns what font.drawTextBox would write, each line as a string in an array) and font.drawZoomedText together.

I would also like to say that I rather dislike how font.drawZoomedText scales text (a perfect doubling of size has some distortion). That's why I like the surface.drawTextBox idea better. Plus, you could hold onto the resulting image and keep using it until was not needed anymore.
Title: Re: Game Beginning
Post by: DaVince on June 24, 2013, 05:10:46 am
I didn't know you could draw text on a surface like that, but it's nice to know that it is possible that way! You'd have to keep in account that the text box dimensions scale with the surface, of course.
Title: Re: Game Beginning
Post by: Fat Cerberus on June 24, 2013, 08:56:09 am
Yeah, that's how I implemented the textboxes in Spectacles, draw the text on a surface.  This allowed me to just draw a sliding translucent box over the text on the surface to reveal it while still allowing the main box to be translucent (difficult to explain), makes for a much smoother effect than just showing it character-by-character.

The only thing I don't like is that Sphere doesn't have a method to dispose the surface, and I'm not sure if the garbage collector actually frees it or just the JS object, so I try to use surfaces sparingly.
Title: Re: Game Beginning
Post by: Flying Jester on June 24, 2013, 09:29:14 pm
The GC should free the underlying surface. Having not actually looked at the code, I know that one reason Kyuu preferred spidermonkey to V8 was because it was a little loopy how you set the callbacks in V8 compared to spidermonkey.

Plus, TurboSphere spent a little time without freeing things like surfaces when the handle was GC'ed, so I know what that would look like. You'd run out of memory really quick if it didn't free the surface.

That said, you should also always reuse the same surface when you can for things like this. It makes things easier on the garbage collector, means you don't have to draw the same stuff onto a new surface every frame, reduces the number of script-to-native code calls, reduces the number of arguments to parse out of script, and means that Sphere doesn't have to recalculate the line breaks every frame.
Title: Re: Game Beginning
Post by: Fat Cerberus on June 24, 2013, 10:41:05 pm
Yeah, I already do all that stuff (reusing the surface, etc.) I would never even think of creating a new surface every frame, just the thought of that makes me cringe! (likely my C++ background talking here though)  Also, I use wordWrapText to pre-calculate the line breaks before even showing the box.  The main thing I was worried about was unfreed surfaces piling up over the long term, like after the game was running for several hours.  If the GC frees it along with the handle though, I'll stop worrying about it.  I guess I could always look at the Sphere source if I had to. :)