Skip to main content

News

Topic: Game Beginning (Read 10052 times) previous topic - next topic

0 Members and 2 Guests are viewing this topic.
Game Beginning
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?

  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
Re: Game Beginning
Reply #1
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.
If you use code to help you code you can use less code to code. Also, I have approximate knowledge of many things.

Sphere-sfml here
Sphere Studio editor here

Re: Game Beginning
Reply #2
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.

Re: Game Beginning
Reply #3
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.

  • Radnen
  • [*][*][*][*][*]
  • Senior Staff
  • Wise Warrior
Re: Game Beginning
Reply #4
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!
  • Last Edit: June 22, 2013, 03:25:19 am by Radnen
If you use code to help you code you can use less code to code. Also, I have approximate knowledge of many things.

Sphere-sfml here
Sphere Studio editor here

  • DaVince
  • [*][*][*][*][*]
  • Administrator
  • Used Sphere for, like, half my life
Re: Game Beginning
Reply #5
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).

  • Fat Cerberus
  • [*][*][*][*][*]
  • Global Moderator
  • Sphere Developer
Re: Game Beginning
Reply #6
@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.
neoSphere 5.9.2 - neoSphere engine - Cell compiler - SSj debugger
forum thread | on GitHub

Re: Game Beginning
Reply #7
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!

  • DaVince
  • [*][*][*][*][*]
  • Administrator
  • Used Sphere for, like, half my life
Re: Game Beginning
Reply #8

@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.

Re: Game Beginning
Reply #9
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?

  • DaVince
  • [*][*][*][*][*]
  • Administrator
  • Used Sphere for, like, half my life
Re: Game Beginning
Reply #10

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 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(x, y, scale, text) function. Note that you can't do this if you want to use Sphere's font.drawTextBox(), though, since there's no font.drawZoomedTextBox...
  • Last Edit: June 23, 2013, 07:49:52 am by DaVince

Re: Game Beginning
Reply #11
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.

  • DaVince
  • [*][*][*][*][*]
  • Administrator
  • Used Sphere for, like, half my life
Re: Game Beginning
Reply #12
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.

  • Fat Cerberus
  • [*][*][*][*][*]
  • Global Moderator
  • Sphere Developer
Re: Game Beginning
Reply #13
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.
  • Last Edit: June 24, 2013, 08:58:33 am by Lord English
neoSphere 5.9.2 - neoSphere engine - Cell compiler - SSj debugger
forum thread | on GitHub

Re: Game Beginning
Reply #14
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.