Alright, so now it is time to add the background of our first room to the game. I will admit that I have been struggling with this for a while. I just couldn't decide what kind of background to use. What should the setting be? Where would interesting and give us room to explore some coding? should I draw it myself? Actually applying the image is really easy, but coming up with an appropriate one for a tutorial is hard. In the end, I have decided to steal one... from that other adventure game company.
Now I did a bit of work to this screenshot in photoshop just to get it ready for us. Basically I took the screenshot, blurred up the sky in the background (that is on purpose, yes, and I am hoping we actually get something pretty cool out of it by the end of this set of tutorials), while leaving the foreground virtually untouched. Then I saved the image as a GIF file using 128 colors. I could have used 256, but I wanted to leave some space for the colors already present in our default palette.
Here is the background that I am using. Right click on it and select "save as" to get a copy for your own use as well, or depending on your browser you may just be able to drag and drop it onto your desktop.
Now that we have our background image, let's go ahead and apply it to the current 110 pic resource. Open up picture 110 in the Picture editor. Then simply import the picture as your background. Here are the settings that I chose when I imported the picture.
Now, I know that you are curious to see how it looks, so go ahead and save the picture and click on the play game button just so you have a chance to see it before we continue. Don't worry I'll wait here for you.
Ok, so there are hopefully a few things that you noticed while you were walking ego around your new background. First, the ego started off in the middle of the screen. Secondly, the ego was always walking on top of the image, for example the dock in the foreground, ego shouldn't be in front of the foremost columns but instead they should actually hide part of the ego. Lastly, ego could walk anywhere on the screen that he wanted, instead of his movements being limited to the just pier. With these three issues in mind, let's get started sorting them out.
Setting the Ego's Default X and Y Position
Taking the issues in order, let's first place ego somewhere on the pier instead of standing out in the ocean. This is controlled by the actual room 110 script so go ahead and open that up in the Script editor. Down around line 30 or so, you should find this bit of code.
; Add room numbers here to set up the ego when coming from different directions.
(SetUpEgo -1 1)
(gEgo posn: 150 130)
This little snippet is actually a switch that is based off of the previous room number. Currently the only value that is set though is the default. Which works out pretty well for us, because that is what we are here to change. Later on, when we add in an extra room or two, then we will be spending a little more time talking about this switch and adding in case statements, but for now the gEgo posn, position, is all that we care about. Unfortunately before we change it, we will need to figure out what a good position is. For this, we head back to the Picture editor with our pic 110 open. Clicking on the Toggle Ego button, a copy of our ego is placed on screen. With the arrow selected, anytime you mouse over the image of the ego, you have the option to drag him around the screen, all the while the current x and y position that you have him in is displayed.
Find a good spot somewhere on the pier for your ego and take note of the coordinates. For instance, I feel pretty good about the coordinates 159, 174 so that is what I am going to change in the snippet of code that we looked at a minute ago.
; Add room numbers here to set up the ego when coming from different directions.
(SetUpEgo -1 1)
(gEgo posn: 159 174)
And that solves that problem. Now, whenever you enter this room from any room that doesn't have a specific case statement about it, which is any room at this point since we haven't set up a single one, the ego will be placed at the coordinates 159, 174. On to the next issue.
Determining and Drawing Priority Areas
So right now our background seems a little flat, we need to start giving it a little bit of depth by allowing ego to walk behind certain aspects of it. For the image that I used, this is pretty obviously going to be the front part of the dock. Unless we code in ego walking off of the front of it, there is no other reason that his feet or legs should show on top of the them. In order to fix this, we are going to be adding some priority colors to our pic.
Alright, wait a minute I should probably take a step back here and explain a little bit of what I am talking about. Think of it this way... Every SCI image is comprised of three different "layers" that are all combined to make one single picture resource. There is the Visual screen which is what we just added, the screen that the player actually sees. There is the Priority screen, which is used to give the game a three dimensional feel, based off of the priority colors as compared to ego's priority value which changes depending on his Y position. As well, there is a Control screen which allows you to set up interactive areas, or areas that you can code against. Right now we aren't worried about the control screen, we'll be getting to that in the next couple of chapters, and we have already taken care of the visual screen, so let's talk a tad bit more about the priority screen.
If you go back into the Picture editor and look again at our picture for room 110. There are a couple of things that I want you to do before I try to explain this further. First go up to edit, and click on copy. This places our background image on your clipboard, now I want you to click edit and then paste. Now we have just loaded up our visual screen and pasted it onto our drawing area as a tracing image. You may not have noticed anything happen, but trust me, what you just did is invaluable. Now, click on the button that switches to the Priority screen. Notice how you can still see your visual screen now. If you hadn't just hit copy and paste, you would be staring at an all black screen. Anyway, now I want you to click on the Toggle priority lines button. This overlays the predefined priority bands over your image so that you can see where they are.
Here's the short version of explaining the priority bands. Basicly the bands indicate what the priority of ego will be when he is in that area of the screen. In our picture for example, you notice that the yellow priority band ends just at the front of our pier, as well, pretty much the entire walkable pier area falls into the fuchsia priority band. Since we want the columns in the front to always show as being in front of the ego, we will need to color them a higher priority than ego will be. In this case we will want to select the Yellow priority color. Just a piece of information for you, white is not on the priority band seen in the image above, but it is the highest priority, if you color the priority of something in white, then all views and actors will always appear behind the colored area. Now looking again at our priority bands and where ego can walk, ego should always have a priority of fuchsia. Which is actually the same priority color that we are going to be using for the rest of our dock. When ego shares the same priority color as the background, then he will appear in front of it, Ego takes precedence. If we were to make our walkable area extend into the red priority band, then as soon as ego hit the red area then everything drawn in fuchsia would appear in front of him. But in this instance that's not going to happen. The reason we are even bothering to color anything besides the front columns is just in case we plan to add any kind of view or animations occurring in the water then they will appear to be happening on the other side of the pier, not on top of it. I'll leave it up to you if you want to color in the priority of the ship in the distance or not but I am going to, just in case.
Creating a Contained Polygon Area
Finally we are almost done here, one issue left to resolve and that is defining the area where ego is allowed to walk. He is certainly no Jesus Christ, so lets keep him from walking on the water. For this we will be using some pretty nifty automation functionality that Phil programmed into SciCompanion. We will be creating a polygon area. There are basically four different types of polygon areas that we can define. Probably the best one for our current room would be contained polygon, meaning that it is an area that an Actor cannot leave. If the player clicks outside of this area, the Actor will move as close as possible to where the user clicked, without leaving this contained area. That pretty much describes our current scenario perfectly. With this in mind, let's once again head into the Picture editor. On the far left, in the toolbox area, you should see two tabs, one marked Commands and one marked Polygons. If it isn't already selected they you will want to select the Polygons tab. Click on the check box marked Show polygons. Now because this room was already built into the template, there is already a polygon defined for you. Select the existing polygon and you should notice that the defined polygon becomes highlighted. This allows you to edit the existing polygon. With the path polygon tool highlighted, move your cursor to the corners of the existing polygon. You should see a large circle appear. This indicates a corner of the polygon, and you will want to click and hold the corner. While holding the mouse button down you should be able to drag it to a new spot on the picture. You will want to do this for all four corners of the polygon, moving them to outline the walkable area of ego. Once you have moved all four corners, make sure that the polygon is defined as type Contained in the Toolbox area. If it isn't, there is a dropdown arrow which allows you to select one of the four types. With the polygon highlighted, select the dropdown arrow and choose Contained. Now save your image.
And there you have it, make sure that anytime after you add or alter Polygon areas you compile the room script that uses the pic resource. That is what actually sets the polygon area to the room. There is an in between step between defining polygons and actually having them apply to your room where the polygon that you define is saved to a totally separate file. When you compile a script that includes this file, the values saved in the file are compiled into the script resource. With that little piece of background information out of the way, as long as everything has been saved and compiled, in that order, you are ready to test out your room and gear up for the next chapter.