Builder Guide
1 - Basics
2 - Chapter Editor
3 - Actor Editor
4 - Interactions
5 - Flags and Conditionals
6 - Graphics
Although Project PD is a text-adventure game system, that doesn't mean there's no room for some pictures. Let's take a look at how you can add some graphics to your games.
Part 6 - Graphics
Project PD graphics are designed to be easy to add, export, and share. With that in mind, this section of the guide will go over how to create a new Graphics Set, add it to a game, and export it to re-use later.
We're going to be using the game we've created over the course of the previous five sections of this guide. If you've been following along, you're ready to go. Don't worry if you skipped directly here, the concepts in this section are easily applicable to your own games. However, I'll assume you're familiar with the editor elements covered in the previous sections (in particular the Interaction editor).
First, we'll need to familiarize ourselves with the Graphics editor and the concept of Graphics Sets.
6a - The Graphics Editor
To open the Graphics editor, just click the "Graphics" button on the workspace topbar.
If you've been following along and reading the previous sections, the fact that the Graphics editor is opened via the topbar should clue you in to the fact that Graphics are another top-level editor element. They are not tied to anything other than your game itself. You can freely re-use the same graphics throughout your game.
Let's examine the Graphics Editor itself.
This is what the editor looks like for a new game.
At the top is the "Open" button, which allows us to import graphics that we or other builders have packaged for easy use with Project PD. We're going to get into that soon. For now, let's check out the Graphics Set list on the left side of the window.
This list works pretty much the same as the Area list in the Chapter editor (check out Part 2 - Chapter Editor for a refresher, if you want). Selecting an element in the list will allow you to view and edit it in the panel to the right. To see how this works, select the "default" Graphics Set at the top of the list.
This shows everything in the Graphics Set.
A Project PD Graphics Set is a package of images that can represent a speaker in an Interaction. When you create a new game, the Builder automatically creates a new Graphics Set, called "default," which it will use for every speaker in each Interaction until you add new graphics and change your Interactions.
A Graphics Set must contain two things: a thumbnail image, and at least one State. Thumbnail images are a single, small picture that represents this Graphics Set. They are 35x35 pixels in size.
States are the meat of a Graphics Set. States represent the different ways you want the speaker that this Graphics Set is going to represent to look. They are 100x150 pixels in size.
To get a better idea of how this works, let's create our own Graphics Set.
5b - Creating a Graphics Set
The Graphics Set list works just like any other list. To create a new element, just click the "+" button.
Here we've created a new set and selected it in the list. As you can see, new Graphics Sets start with the same thumbnail and a default State that looks the same as the default Graphics Set.
First, let's change the Tag for this set. You can see the Tag in the editor window, in the top-center. To change it, just click the Tag and it will switch to edit mode.
I'm going to be creating a Graphics Set to represent the character Hatman, which I created in the previous sections of the guide. Since this is a Tag, you can safely use whatever name and syntax you want, since the player will never see the text itself. It's just so you can reference this Graphics Set easily yourself.
Our Graphics Set now has a new Tag. Next, let's change our thumbnail image. To do so, all you need to do is click the display in the editor window (next to the Tag editor you just used).
This will bring up a file selection dialog. You can use a .gif, .jpg, or .png image. Make sure it's 35x35 pixels, or it won't show up correctly.
I'm going to use this image I have for Hatman: 
If you right-click and save the image to your computer, you can follow along with this guide.
I've selected my Hatman thumbnail image from my local hard drive, and now my Graphics Set has been updated. Now let's see about our default State.
To change a State, first hover your mouse over it. A button will appear, which will allow you to edit the State's properties.
Click the "Edit" button, and we can change our default State to show a different image.
There's only a single option here. Since all Graphics Sets are required to have a "default" State, you're stopped from editing this state's Tag. But you can change the image. Just click "Source," and find the image you want to use for your default State (it should be a 100x150 pixel .gif, .jpg, or .png image).
I'm going to use this one for Hatman: 
Once you've selected your image, just click "Set" to save your changes.
Now we have a working Graphics Set, ready to use in Interactions. However, we want a little more action out of Hatman. Let's add another State so we can make him display some other emotions.
I'm going to add a State that we can show when Hatman is angry. Click the "+" button in the editor panel, right next to "States."
This adds a new, blank State to our Graphics Set. Just like we did for the default State, let's edit this one by hovering over it and clicking "Edit."
Our new state has a few more options than the default one did. Since it isn't required, we can safely delete it if we really want to. We can also change the Tag, and, of course, change the image source.
Here's my angry Hatman image: 
I'm going to change the Tag to "angry," import my image, and click "Set" to save this State.
Now Hatman can show us his anger.
You can add as many states as you want. For characters that show up a lot, I recommend adding as many states as you can. For simple characters and objects, you probably don't need anything more than images for the thumbnail and default.
I think this is enough for Hatman right now, so let's learn how to add our graphics to an Interaction.
5c - Graphics and Interactions
Interactions are where our graphics are going to show up. Since we already created an Interaction in the last section (Part 5 - Interactions), we'll just open that up and add our new Hatman Graphics Set.
Here's our familiar Interaction. If you want to create a new one, that's fine as well. Adding graphics is pretty simple!
First, let's open up the editor for our top root node.
All we need to do is change this node's graphics from the default to our new Hatman one. To do so, just hover over the image on the left.
A "Change" button appears, similar to the State editor. Click it to open up the editor.
The top drop-down list is the Graphics Set you wish to use to represent this speaker. We want to use the only one we've got (other than the default, of course), the one tagged "hatman."
The second drop-down list selects the State you want to use from the selected Graphics Set. Since Hatman is pretty calm right now, we're going to leave it to the default State.
Click "Set" on the graphics editor, then "Set" on the node editor to save your changes.
Our top node is now done! Now let's just go through and do the rest of the Hatman nodes.
On the last one, where Hatman is a bit irate with the player, let's use the "angry" state instead of the default.
And then click "Set" to save.
And finally, click "Set" again.
And our Interaction is complete!
Next, let's learn how to export and import our Graphics Sets for easy re-use.
5d - Importing and Exporting Graphics Sets
Since obviously everybody isn't the greatest artist in the world, Graphics Sets are designed to be re-used and shared among builders. It's a very easy process that takes only a second.
Let's open up our graphics editor again.
Note the "Export" button on the top left of the editor panel. Click it to save this Graphics Set to your computer as a .pdfx file.
A .pdfx file is a special Project PD file that represents a Graphics Set. For the technically minded, it's really just a zip archive with a bunch of images that follow a specific naming convention.
It's just as easy to import Graphics Sets. Just click the "Import" button at the top of the window, find your .pdfx file, and open it up.
That's really all there is to it.
And that wraps it up for graphics! Graphics Sets are very easy to build, export, and import so there's no excuse for not having good graphics for any game you care to make with the Builder.
No comments:
Post a Comment