ID:91199
 
Welcome to part one of the decent game design series. This series expects you to have a basic knowledge of the BYOND Interface, and to have read the Making skins in BYOND 4.0 series by Lummox JR.

Please keep in mind, the integrity of the series may be undermined by the fact I'm absolutely horrible at graphics. Just be aware that where my graphics are terrible, hopefully, others wont be, and thus the tricks and tips that so very few people seem to know and use will not only help you advertise within BYOND, but also outside of BYOND.

First and foremost, let's look at at what most games that aren't taking advantage of the skins look like to the casual new user. To avoid offending users, I've recreated the look I get when I joined the better most of games.



As you can see, rushed appearance of my graphics aside, that is pretty poor. There's a lot of information on that which really doesn't need to be there. If I was some random new player who found your game outside of BYOND, I probably wouldn't give it the time of day. Let's break down what's wrong with it.

Unnecessary Stat() Tabs:
Let's face it, I haven't made or loaded a character yet. So there's absolutely no reason why I should be able to see it's name, race, inventory and other stats (hp, mp, exp etc). This stuff is utterly useless. Remove it.

Unnecessary Verbs:
Much like the stats, I'm not in a character, so I shouldn't have access to verbs like "Chop Wood" or even, "say". You can argue the OOC tab possibly, but to be honest, how many games have you played outside of BYOND that allow you communicate with the users before you've entered the game. None I'm aware of (there's probably a small few, but we're going with majorities here). This just looks tacky and, if you haven't actually protected any of your verbs from misuse, can lead to bugs in your games.

Load/Create/Delete/Quit Verbs:
These are buttons on the map itself. Completely pointless having these in view like that. You might as well have not included the splash screen itself, all it appears to be is a pretty (ugly...) face to an otherwise ugly layout.

So, let's work on improving this. Firstly, what does that interface screen actually have? A background picture and three buttons. Seems easy enough. To give you an example, we'll make this work in a new project, you can later adapt it to your own projects if you want.

So, make an interface file. We're given a set of default marcos, a default menu and a default window. The default window is where the tricky stuff is going to happen.

Setting up your default window:
  1. Rename the default window to window_default.
  2. Place a child control on very top left of the window, name it "child_main" and use the "Fill Window" button. Also set it's anchors to Top Left and Bottom Right.


Now we have the basis of our main window done. Now we need to make two new windows in the interface, we're going to set them their ids "pane_splash" and "pane_main" respectively, do this now. Remember to check the "This is a pane" checkbox.

Setting up your splash pane:
  1. Edit the pane and set it's background image to our splash screen image.
  2. Add a button to the splash pane. Give it the ID "button_new_character" and set it's text to "New Character". Change the button type to "Push Box" and check the box "Flat". Then set it's command to "NewCharacter". Be sure to set any background images necessary.
  3. Copy the above button and past it two more times. Editing the values of the pasted buttons to "button_load_character", "button_load_quit" and add their respective text values and commands.


Setting up the main pane:
  1. Add an output control to the pane and set it's id "output_default" and check the "default" check box. Resize it to take up a majority of the window and set it's anchors to "Top Left" and "Bottom Right"
  2. Add an input control to the pane and set it's id to "input_default" and check the default check box. Resize it to take up the minority of the bottom of the pane and set it's anchors to "Bottom Left" and "Bottom Right".


Now we have our splash screen and main pane done.



Now it's time to write the code for this little beauty. We'll need two code files (well, one, but I believe in being neat). These will be named "datum_entry.dm" and "client". Each one reflects what they're going to contain. "datum_entry.dm" will contain the code to make this splash screen stuff work and "client.dm" will contain any code relating to the client.

To setup the code files, they'll look like this:
// client.dm
client
New()
. = ..()

// datum_entry.dm
player_entry
verb
NewCharacter()

LoadCharacter()

QuitGame()


For starters, we need to edit the client file so they can view the splash screen and set the proper window specifics as we want. To do this, we'll use winset(). For starters, we don't want the user to resize the window, nor do we want it to have a title bar, a status bar, any menus or any macros. We also want the user to have access to the verbs we made (or will make) for player entry.

This is all pretty basic stuff:
client
New()
. = ..()
winset(src, null, {"
window_default.child_main.left = "pane_splash";
window_default.can-resize = "false";
window_default.statusbar = "false";
window_default.titlebar = "false";
window_default.macro = null;
window_default.menu = null
"}
)
src.verbs += typesof(/player_entry/verb)


Now we want to configure the datum_entry.dm to handle the logins of player mobs and whatnot. As well as change the splash screen. Character handling comes in Part 2 of this series, so we can pretty much skip this part and just use some generic interface altering code.

player_entry
verb
NewCharacter()
generic_interface_changing_code(usr.client)

LoadCharacter()
generic_interface_changing_code(usr.client)

QuitGame()
del usr

proc
generic_interface_changing_code(client/C)
winset(C, null, {"
window_default.child_main.left = "pane_main";
window_default.can-resize = "true";
window_default.statusbar = "true";
window_default.titlebar = "true";
window_default.macro = "macro";
window_default.menu = "menu";
"}
)


When this is executed, we get the following result:


Both the New Character and Load Character buttons do the same thing at the moment, mostly because I wanted to beak this tutorial up into parts.

Now you have a basic understanding of writing a splash screen in BYOND. Your tasks for the end of this lesson is a rather simple one: Centre the window. Who ever heard of a splash screen appearing in some random place on the users screen? As such, your job is to centre the window using whatever means you deem necessary and wherever you find necessary.

Part 2 will contain methods to handle character creation. For a clue at what I'm getting at, think of every game that uses input() to create characters, and imagine how much you hated that process.
Hopefully the new programmers that are new to BYOND or DM, as well as using the skin customization ability. If they read it though.

If they do, we'll be able to see attractive, unseen skins rather than the usual skins.
I have two question on this.
First of all, wouldn't it be more versatile to use a browser element instead of a pane as your 'title screen', since that would grant you means of true client-sided processing (JavaScript) and including animated, dynamic interaction together with cinematic introduction sequences (swf).

As for the second question, why set a generic mob of type world.mob and add verbs, when you could rather create a specific type of mob for the task?
Just a thought, maybe you should add the skin tag, so when people navigate to the skin tutorials, they see yours as well. Unless that's specifically lummox's tutorials, anyhow.
Schnitzelnagler wrote:
I have two question on this.
First of all, wouldn't it be more versatile to use a browser element instead of a pane as your 'title screen', since that would grant you means of true client-sided processing (JavaScript) and including animated, dynamic interaction together with cinematic introduction sequences (swf).

I'm keeping it simple. With any luck, people will come to these kind of conclusions themselves. The idea is to introduce people to the skin itself and let them experiment on what can be done. Which is why I left a small challenge at the end of the tutorial.

I also don't know Flash, and have no desire to learn. So writing a tutorial to use it would be considerably more difficult than sticking to what I know.

As for the second question, why set a generic mob of type world.mob and add verbs, when you could rather create a specific type of mob for the task?

This example isn't using mobs at all presently. And character handling comes in the second part of the series, which is roughly half way written at the moment.
Thank you.
I lack any valuable knowledge about interface design and this has helped me a bit.
(For me, it's just a different and new thing that I haven't had the motivation nor time to grasp my teeth into).
Actually, you're silently assigning a mob here as you're passing on the return value of the parent, which is indeed a new instance of world.mob.

I didn't meant to include any scripted Flash, though that works quite nice, but more of a simple .swf that plays some sort of, well, movie.
Schnitzelnagler wrote:
Actually, you're silently assigning a mob here as you're passing on the return value of the parent, which is indeed a new instance of world.mob.

That's a good point, but as Character Handling happens in part two, you can ignore that little tidbit for now and just wait like a good boy. ;)

I didn't meant to include any scripted Flash, though that works quite nice, but more of a simple .swf that plays some sort of, well, movie.

That all depends if a movie is what you're really going for. The original Baldurs Gate game (IIRC), only had a simple 640x480 splash screen with options to play the game, go to the website, view the help file, view the configuration file and two others which escape me.

Either way, the point is to inspire people to stop using that damn default interface. It's ugly and annoying. >=(
I've been slapping games for doing just this, as unpopular as it was at the time. We're probably (long over)due to review the Naruto games in BYONDAnime and provide feedback on their player experience, just after reviewing some submissions.

Have you considered being staff at BYOND Anime, Tib? I can see you committing suicide after reviewing some of the submissions, it's good fun.
Considering I have less than zero knowledge on Naruto other than anything beyond the first episode of the English dub, which I watched ~3-4 years ago now, I suppose I could provide a blind insight into the game experience.

But I fear I would make a fair few of them cry. Sugar coating things isn't one of my specialities. ;)
Tiberath wrote:
Considering I have less than zero knowledge on Naruto other than anything beyond the first episode of the English dub, which I watched ~3-4 years ago now, I suppose I could provide a blind insight into the game experience.

But I fear I would make a fair few of them cry. Sugar coating things isn't one of my specialities. ;)

Ditto. This is why I don't review unless people specifically ask me to.
Nice tutorial!
This was very helpful Tiberath.
I've been playing around with the skins, following your and Lummox JR's articles.

Any word on when the Part 2 will be posted?
Not long now.
this has helpt but i still dont now how to get my game started
16dbyrd wrote:
this has helpt but i still dont now how to get my game started

"Welcome to part one of the decent game design series. This series expects you to have a basic knowledge of the BYOND Interface, and to have read the Making skins in BYOND 4.0 series by Lummox JR."
16dbyrd wrote:
(...) i (...) dont [k]now how to get (...) started

Get Started - A quick overview of the tools available for learning to program in BYOND.

There is nothing to replace the knowledge on these basics, there is no viable short-cut and no easy route.
Yes, a lot of people claim there is and it's the same lot of people running to the developers forum with each and every tinny little problem they could have solved on their own by working to learn these basics.
Nice
Pawtracks wrote:
Nice
Bye nice i mean awesom Turrial
Pawtracks wrote:
Pawtracks wrote:
Nice
Bye nice i mean awesom Turrial

What?

I really like what you are doing in this tutorial. People need to start using and understanding the capabilities of the interface more. I often link people on the forums to this article when they are trying to make a map based splash screen. The look of your games interface truly can make or break it.
Page: 1 2 3 4 5