Making a Balloon

I'm just going to get all of balloons done in one whack, even though there's quite a bit that goes into it. A balloon is of course the speech balloon your ghost will use. Balloons are optional, but can be a fun addition for your ghost. If you aren't making your own balloon, you can use the SSP default instead, or my template if you want. You can also look at other balloons at the Japanese site BALLOON TOWN. Make sure to check the readme or write-up for a balloon to see if they have any stipulations about usage!

Anyway, balloon making is broken up into phases, much like the other things we've been doing here. The basic simple steps go as follows:

That's all there is to it! It is time consuming and can be confusing, but it's a little easier than making a full blown ghost at least.

While I did make a simple balloon you can use for study as a template, be aware that the amount of flexibility with balloons is quite greater than with ghost coding or anything like that. So don't feel boxed in by what the template does. It's just to let you see where everything is and how it gets put together so you can hopefully make your own balloon a little easier. I did leave a lot of commentary in descript.txt and the other config files of the template though, so I highly recommend you pick it up if only for those files.

z_simple.zip - drag and drop this zip file on your current ghost and it should install.

If you open up the z_simple balloon folder (SSP\balloon\z_simple\) after installing the template, you'll see an assortment of files. I'll get more into the specifics of each as we go through this page, but for now, here's a very quick rundown.

readme.txt
balloons0.png - Small balloon for the main character facing right.
balloons1.png - Small balloon for the main character facing left.
balloons2.png - Large balloon for the main character facing right
balloons3.png - Large balloon for the main character facing left

balloonk0.png - Small balloon for side character facing right
balloonk1.png - Small balloon for side character facing left
balloonk2.png - Big balloon for side character facing right
balloonk3.png - Big balloon for side character facing left

balloonc0.png - Send input box
balloonc1.png - Communicate input box
balloonc2.png - Teach input box
balloonc3.png - Input input box

descript.txt - config file for the balloon
balloons0s.txt - config file for this specific balloon
balloons1s.txt - ""
balloonk0s.txt - ""
balloonk1s.txt - ""
etc etc

arrow0.png - up arrow
arrow1.png - down arrow

sstp.png - list marker image like a > or circle or whatever

online0.png - to indicate going online, up to 16 images available here.

thumbnail.png - preview image of your balloon, optional
thumbnail.pna - alpha channel for your thumbnail
cursor.cur - changes the cursor when over your balloon, optional. there is no cursor included with the template.

Eventually we will be replacing pretty much all of these images as we create your balloon. We'll get into more of the details of each of these files as we continue.

Help! Isn't there a simple way to make a balloon like you can with shells?

Unfortunately, the likelihood of your balloon matching the exact coordinates of the template is very low, unless all you did to the template balloon was change its color or maybe overlay some kind of picture on top of it. So unless you are making practically NO changes to the image files themselves, you can't just save over the balloon files and trust it to work alright. You'll have to get a little more in-depth.

If you DO want to just overlay something like "DUDE'S BALLOON" and "OTHER DUDE'S BALLOON" over the background of the template balloon, then I suppose you could do that and then skip all the coding, although that wouldn't be a very different balloon, all things considered.

Anyway, let's get started!

Planning Your Balloon

Your first step is visualizing exactly what you have in mind for your balloon. While the area where your text will appear has to be a rectangle, everything apart from that is completely up to you! There are lots of different types of balloons.

There are vertical balloons with tails pointing left or right, like with my Hunter and Smoker balloon.

There are balloons with no tails at all that are just simple boxes.

There are balloons with purely horizontal tails.

There are round balloons like a speech bubbles and ones that look like RPG text boxes.


There are balloons that are entirely black (courtesy this tutorial site) or patterned. As you can see, there are a lot of ways you can make balloons! So don't feel limited by vertical balloons with tails, or horizontal balloons with tails, or text boxes with no tails! Try and visualize just the right balloon for your ghost, or if you're just making one for the heck of it, just the aesthetic you want to achieve with your balloon. Be creative!
(My balloons tend to be small and vertical because my screen resolution is so small I need the space)

Once you have a good idea of the kind of balloon you want to make, do some sketches to get an idea of what it looks like. A Balloon has a certain amount of parts that it needs to function. Here is a picture labeling them for you.

As you can see, there's one balloon for text and the like, but also one for input boxes. Note the marked areas on this picture. As you can see, the reddish area is the main body of the balloon, but you want to set aside enough space to fit in all your pieces, as for the most part you won't want them to overlap, it'll look messy and hard to read if done incorrectly.

Text Area - This pink area is where the text for your balloon will go. This MUST be a rectangle, unfortunately. I don't think there's any way to set up a round text area or anything like that.

Arrow - Your balloon will need up and down arrows so the user can scroll through long text when the situation comes up.

Online Marker - You'll need some kind of indicator for when the Ghost goes online (like when it looks for an update).

Number - This is set aside for information on what the ghost is downloading, like the filenames and sizes. Most often seen again while the ghost is updating.

Likewise you can see some marked areas on the input box below the main balloon. Input boxes are even simpler - all you need to do is set aside some space for a label, and some space for the actual text box the user will use to input text. That's all.

Now again, as long as you have the pieces in place SOMEwhere, you can be creative with where they are and even what they are! Here are some examples.

In my Hunter/Smoker balloon, the Online Marker is just a tiny ball that changes colors that's tucked into the very top left corner. The two arrows are very small and are both down in the bottom right, so as much space as possible is left in the balloon for the text area.

In the default Emily balloon, the Online Marker is a gradually fading in set of lines in the top left corner of the text area.

In this balloon (cap from this walkthrough), the Online Marker is oriented vertically and tucked between the two arrows on the right side.

This balloon (cap taken from BALLOON TOWN) is set up like a Command Prompt Window. You can faintly see the online marker at the very top.

In this FF7 inspired balloon, the online marker is an ATB bar at the bottom.

In the template we'll be using, you can see the marked areas where the online marker and number go. In this case, the online marker's a bit of animation that loops going "Connecting..."

Anyway, as you can see, you can be creative about this! You get to decide what your Online Marker will be and how it'll show up, where your arrows will go, that kind of thing. As long as the parts are in there somewhere, you'll be fine.

Once you've got your balloon in mind, simply make a copy of the z_simple folder and rename it whatever you're going to call your balloon. Go into the folder and fill out install.txt and readme.txt as appropriate, then select and delete all the .pna files. Once that's done, we're ready to move on.

Draw Your Balloon

Now, the exact number of balloons you're going to be making is up to you. My Hunter and Smoker balloon has two separate balloons for each of them -

One green and one red, and you can see each balloon is pretty different from the other. They also have a small balloon and a larger balloon for menus, each unique to them.

You don't have to go through all this trouble for your balloon if you want! You can have the balloons for both your side and main character look the same if you like. But at the very least, we're going to set up one smaller balloon for normal text, and one larger balloon for menus. The file breakdown for these goes like this:

balloons0.png - This will be the smaller balloon for your main character with the tail facing to the right.
balloons1.png - The smaller balloon for your main character facing to the left.
balloons2.png - The large balloon for your main character facing to the right.
balloons3.png - The large balloon for your main character facing to the left.

balloonk0.png - The smaller balloon for your secondary character facing to the right.
balloonk1.png - The smaller balloon for your secondary character facing to the left.
balloonk2.png - The large balloon for your side character facing to the right.
balloonk3.png - The large balloon for your side character facing to the left.

You can see the basic pattern here, where a filename is constructed with balloon, k or s to stand for kero or sakura, then a number. All balloon files with k are for the kero (secondary) character, and all the balloon files with s are for sakura (main character). It may help you keep them straight.

Take a look at the files in the z_simple folder. Take a look at each image and you can see how they match these file descriptions in terms of big or small or left or right. You'll notice for the template that the kero and sakura sides match except for color. This is mostly for simplicity's sake, but as you saw with the Hunter/Smoker balloon above, this doesn't always have to be the case.

Here's the big and small balloons for the kero right side from the template as an example.

Now we're going to actually draw your balloon. You can do so in whatever program you like, although one that can save transparent pngs is still ideal. The trick from shell making where the top left pixel of any image is transparent will still work for balloons though! So take heart if transparent pngs are not an option, you can just give it a wacky colored background.

So, draw out your big and small balloons for your main character and, if you're doing so, side character. Set aside the areas from above like Text Area and Online Marker and Number as appropriate, and mark them with rectangles as you do. This will make it much easier to place them properly in the descript.txt phase, trust me. Make sure they're all on their own layers so you can turn them on and off as you need as well.

PROTIP

You can avoid a lot of fiddling if instead of flipping your balloon horizontally to make it face left or right, you separate out the tail of your balloon. Then you can draw the tail facing left or right and turn whichever version you need on or off, and the rest of your image will remain unchanged. This'll save you work in the descript.txt etc. section ahead. If you don't understand what I mean, look carefully at balloon0s.png and balloon1s.png. Notice that the only thing that changes between the two is the tail of the balloon. That's what you're looking for.

Once you've finished drawing a balloon and all the pieces are in place, you're about ready to go. First, make sure you turn off all your arrow layers and your online marker layers or anything else. You're just going to want your basic background for your balloon. Study the z_simple base balloons0.png image to see what I mean. Notice how there are no arrows or markers on it?

This is what you're going for. Once you have the clean image, save it over balloons0.png. Do the same for the clean balloons facing the other way, the big balloons, and the balloons for your secondary character.

Now that all the base balloon images are saved and ready to go, we're going to break up the smaller pieces of the balloon. Look in the z_simple directory again. You'll see a few files:

arrow0.png - your up arrow
arrow1.png - your down arrow
sstp.png - your choice marker. In a menu with multiple options, this will often be in front of your choices. You'll see in the template that it's a little bracket. Whatever you make it, it should be about the same size as whatever font you're going to set.
online0.png, online1.png, online2.png, etc. - These are the images that make up your Online Marker, as indicated above.

Now, a little more information on your Online Marker images. If there are multiple ones, the balloon will go through the images in a loop. As you can see in the template, the loop adds three dots to the word "Connecting". If you look at the online[number].pngs for any other balloon, you'll see the same thing.

You can simply leave it as a single image if you want, in which case the online indicator won't animate at all, and you can have up to 16 images set aside for your online animation.

Basically, now what you're going to want to do is crop your balloon down to the rectangles you drew around your parts. For example, crop your balloon down to the rectangle you drew around your up arrow, then turn your rectangle layer off. Save that image as arrow0.png.


You'll want a little tiny image like this. Undo your crop and repeat for your other pieces, like your down arrow, your sstp marker, and the online images. The z_simple template has four online images, but you can take away or add more as you need to, as long as they follow the right format of online[number].png. And as mentioned, you can only have 16 frames in all for it.

We're almost done with the images! Now comes the input box. The input box is really very simple. Once you have it set up, all you need to do is change the label on each one.




Here are the four input boxes from the template. As you can see, exactly the same except for the label. The four files you're going to be replacing are...

balloonc0.png - Send input box
balloonc1.png - Communicate input box
balloonc2.png - Teach input box
balloonc3.png - Input input box

Over the course of using your balloon, the only ones you'll probably ever be seeing with any regularity will be Input and Send and even then, still pretty rarely, so don't worry about making this box super fancy or anything. If you recall from the above example...

All you need to mark out is a text area where the input will be and leave space to change the label. Set up the Send balloon, save it over balloonc0, change the label to Communicate, save it over balloonc1, and so on until all four are done.

Voila! We are done with the images! Now on to descript.txt and the configuration files, where things get a little fiddly.

Wait, my balloon's edges are all jagged! Why did I delete those pna files at the beginning?

If you read the section on making images for a shell, this all may sound familiar. A .pna file is the alpha channel for a .png, essentially. Pna files will greatly smooth out the edges of any png files you make them for. You deleted the ones at the beginning because they went to my images, and presumably you're going to be making your own that will not exactly fit. Unless you're just changing the color of the template or something in which case uh, oops. Undelete them.

If you left them in, you'll notice pretty quick that your balloons will be stuck in the outlines for MY balloons, which you don't want. Thus why we deleted them. But if you want to smooth out the edges of your balloons, just make some new PNA files for them and you'll be right on track. I talk more about how to make them in the Making Images section, but basically you're going to want to make a silhouette of your image, then rename that from a png to a pna file. See the making images section for more details.

Writing the config files

If you did any work with shells, you may recall that there were two parts to a shell that made it a whole - the images themselves, and a configuration file that put those images together. Balloons work much the same way. Now that we have the images ready, we have to put them together in a file so the Balloon knows where everything goes.

From now on, you're going to want to have SSP open and a ghost using your Balloon so you can take a look at it while you work on it. If you don't see your balloon listed under the "Balloon" tab in the right-click SSP menu, close SSP and reopen it and it should appear.

We are also going to want to have the development panel open so we can use Balloon Test Mode to look at your balloons. If you remember from the first steps page, you enable the Development Panel via SSP Preferences, and you can get to it at the bottom of the utilities tab, or by hitting ctrl-shift-d.

You can see one of the ticky boxes here says Balloon Test Mode. That's what we'll be focusing on. At the bottom of the development panel is Reload..., and you'll notice when you click it that it gives you options about what you want to reload, including your Balloon. You will be reloading your balloon A LOT over the course of this.

Open up your main character balloon facing right psd in your graphic program of choice, and turn on all your arrow/marker/whatever layers so you can see all the elements of your balloon just where you want them to be. Turn on your placement rectangles too, since we're going to need them.

Now, open up descript.txt. I've left a lot of text and explanations in there for exactly what you're going to be filling out. Most of it will be finding the right coordinates to place all of your balloon pieces. This is why making those rectangles was really handy and why I recommended you do it.

Check the Balloon Test Mode ticky box and your balloon will pop up. At first, it's probably going to look like a mess because all the values aren't set properly, but as you go through descript.txt, things will begin to fall into place. Start changing things in descript.txt and save and reload your balloon often using the developer panel to make sure it looks right.

There are a few different things that CAN be included in descript.txt, but I didn't include for whatever reason since they aren't necessary. For those curious, you can read more about them at the ukadoc project although that page is in Japanese, as a note. If you just want to get this over with, pay it no mind.

I'm changing values in descript.txt but they aren't changing in my balloon!

The most likely cause of this are the individual balloon text files, like balloons0s.txt and the like. Now, you could delete the text files entirely, but you'd just have to make new ones if you're going to need individual settings. Instead, open balloons0.txt or balloons2.txt or whatever balloon text corresponds to the balloon you're working on, and just delete any non-commentary code from me. When or if you need to use the file, you can add in the specific things you're changing.

If you don't specify a specific font with the .font tag in descript.txt, the balloon will default to MS Gothic. Likewise, if you don't specify a font size, it will default to 10 pixels. And I believe if you don't specify a font color it will probably default to black, although I'm not sure.

Use your placement rectangles in your balloon psd to find the xy coordinates you need for all the pieces of your balloon, and put them into descript.txt as you need. Save, reload the balloon, test them, make sure they're in the right place. If they aren't, adjust the numbers, save, and try again until they're just where you want them. You'll want to open up your psd for your input boxes as well to find the coordinates you need for those, but it shouldn't take you very long.

As a special note about input boxes, you'll notice that the program automatically adds an OK/Cancel button to the end of the input area your defined for an input box. If you don't like how those buttons look, you CAN make your own! To use them, you'll need to make four files.

ok_up.png - the OK button normally
ok_down.png - the OK button when clicked
cancel_up.png - the cancel button normally
cancel_down.png - the cancel button when clicked

Simply set up the buttons in your input box psd so they look the way you want at the end of your input box, and save the files with the filenames above in your balloon folder. If you reload your balloon and see them when you open an input box, you have succeeded!

What was that thing up at the top about cursors? Can I have a special cursor for my balloon??

Yes you can. Basically, put the .cur or .ani file for the cursor you want to use inside your balloon's folder and add a "cursor,[filename].cur" (or .ani) line to the descript.txt file somewhere. Save, reload, and it should be visible when you mouse over your balloon. I personally wouldn't do this because unique cursors can be annoying, but if you really want to, go ahead.

Individual Balloon Settings

Now, let's say you gave each character their own unique balloon, or you have a big balloon and a small balloon (as we just set up). Obviously, the settings for your text area and arrows and all that probably won't be the same across every balloon. This is where the individual text files come in.

As you look in the z_simple directory, you should see a list of other text files that go along with descript.txt. They follow a simple, regular pattern... balloons0s.txt, balloons1s.txt, balloons2s.txt, and balloons3s.txt. There are matching ones for the kero character under balloonk0s, balloonk1s, balloonk2s, balloonk3s. Basically, each txt file goes to each corresponding balloon file. So balloonk0s.txt affects balloonk0.png.

I made some more notes inside balloons0s.txt and balloons2s.txt, so you may want to read both of those files. But basically, if your balloons differ from each other in any significant way, you're going to want to go into these text files and edit them to match the balloon.

If you have Hunter and Smoker, you can take a look at their balloon txt files and compare them to see that Hunter has her own special text files because her balloon is unique from Smoker's, thus it has its own word wrap point, origin point, validrect, and the like. If you're doing something along those lines, you'll have to do the same.

Now, you may notice that the balloon txt files are much shorter than descript.txt. That's because the balloon txt files only need to have the things that are being changed. You don't have to copy the whole set of settings from descript.txt. If you're only changing the origin point, all you need to put in the balloon text file is the new origin point, and that's it. You can see this in the template's balloon files - they are much shorter, and they only contain things that could theoretically be changed. So don't be too afraid of these files! They probably won't take you very long to fill out at all!

If you did NOT do what I recommended above and didn't separate out your balloon tail, instead flipping your balloon horizontally to do the two sides, then you'll probably need to go into the balloon text files to adjust the origin point and wordwrappoint, since those may change in the process of flipping your balloon.

CONVERSELY, if your balloon has NO tails, then your balloon will look the same from left to right, and as such, you won't have to worry very much about balloon texts at all! With the exception of the bigger balloon and the smaller balloon.

What if I want to make more than two sets of balloons??

I'm assuming you have something in mind like Charger's individual balloon in my Hunter Smoker ghost! That's not the only unique balloon in that set, actually, there's also one set up for the Dragon Warrior text whenever a Rabite shows up, so all in all there are four different balloon types in there.

To do this, all you need to do is draw your new balloons as required, then save them as balloonk[number] or balloons[number]. Both balloonk and balloons can go all the way up to 15, so you have some flexibility here. Charger's balloons for example are balloonk8, 9, 10, and 11, while the Dragon Warrior balloons are balloonk6 and 7. Once you have them drawn and saved, set up individual balloon text files for them like you did for balloons2s.txt or the like above and put in the correct settings as you need. Test until it looks right, and voila!

Once you finish fiddling with the balloon texts as needed, you are done with the config files! Hurray! Keep testing your balloon with your ghost for a while, try looking at Headlines, testing the scroll buttons, connecting to the internet, whatever. Keep an eye out for things that don't look right or things that don't match up and adjust them as you need. Once you're happy with your balloon, you are ready to share it!

Distributing your balloon

In comparison to the other sections, this will be rather short, haha. Basically, all you have to do is write up your readme file you'd like for your balloon.

Anyway, once you have your readme done, clean out all your psd files and any extra stuff you're not using from your balloon's folder. You can move them somewhere else if you don't want to delete them (I recommend you keep them in case you want to edit something later). Zip up your balloon folder, then upload it somewhere. You're done! That's all there is to it.

To use your new balloon with a ghost, just choose it in the Balloon tab of the right-click SSP menu. If you just made a special balloon just for your ghost, this would be a good time to go back to your ghost's install/descript.txt files and put in your new balloon's directory and information as needed. Should only take you a second.

I thought at first that nar files only contained the ghost and not the balloon, but I'm beginning to wonder if perhaps that's not the case and the balloon IS included with a ghost's nar. Well, either way, you might as well hang on to a zip of your balloon just in case when you want to distribute it with your ghost.

Can I set my balloon to update remotely like my ghost?

Yes you can, actually! Although I haven't tested this myself, what you'd need to do is something similar to the network update process. You may want to read through that first to get an idea of how it works.

Basically, I assume it'd be a similar process, wherein you'd upload your all your balloon files into a folder on your webspace. Then, in descript.txt for your balloon, you would add at the top with your creator info,

homeurl,http://www.yourwebhost.com/yourballoonfolder/

And that should be it! It's actually even easier than doing it for your ghost, since all of a balloon's files are in one folder... so all you'd have to do is make a folder and dump all your balloon files in there. Then presumably when you tell your ghost to update, the balloon will also check for updates. But again, I haven't tested this myself. If it works let me know!

And that's it for balloons! Phew! Feel free to move on to the other parts of your ghost now as you need.

<--Phase 2 - Surfaces.txt

Phase 4 - SakuraScript-->