SCI1.1 Adding Static Background Views

We have the background in place, but now it's time to add some life and detail to our room. This can be done via Views. They can be placed statically on the background to add finer detail, they can be animations, or they can even be other characters and objects that move freely about the room, but we'll look at those specifically in an upcoming chapter. In this chapter we will be focusing on placing static Views and a in the next chapter we'll look at animating them, more commonly  referred to as Props. I was going to try and cover placing them and animating them all in this chapter, but then I realized how much work I was about to make you do, I toned it back a bit, so for now let's just focus on getting the Props on the screen.

I have been trying really hard up to this point to not go into any great detail about explaining a lot of options that are available to us, but it almost feels like I have to say something here before we get started. Like I said, we are adding Views to our room, and the type of views we are adding are Props. A screw it, let's just jump right in, hopefully you will start to see a pattern here before I bore you with too much detail right now.

Let's begin by adding in several static views, stars, moon, a ship at see, a bait bucket. Then we'll finish this chapter off with a couple of animated props, the ships wake as well as a fisherman.

First things first, we need to get you the view resource that we are going to be using. With any luck, you can download the 110.v56 file here. You may need to right click the link and select save us if just clicking on it doesn't start the download.

Now that you have the file, all you will need to do to add it to your game is drag it into sciCompanion, and then click on the rebuild button. I numbered the view as 110 so it would correspond to our room number. As long as you have the file loaded, you can take a couple of seconds and look at what all you just got. Please keep in mind, I am not an artist but I did the best I could. Now that it is in your hands please feel free to tweak the graphics however you see fit. Let's begin.

Open the script for room 110 in the Script editor. Let's begin by adding the detailed view of the moon, the idea of blurring the background that I talked about was to try and give our moon and stars a kind of halo effect without having to go through the trouble of actually drawing the halo as part of the view. I have mixed emotions about how it turned out, but we'll let you be the judge once you actually get to see it in your own game. Now before we do this, let's take a half a second and talk about the general structure of a script.

Your room script, on the outer most level is, is generally made up of instances. Usually a number of different instances as a matter of fact and one cardinal rule is that one instance must end before the next one can begin. Each instance then contains methods, usually a couple of different methods each. Different methods are used for different things, depending on what you are trying to accomplish as to which you can choose. One definitive rule about methods, just like with instances, one must end before the next one can begin. Looking at our current room 110 script, you will notice that there is currently an instance. Inside this instance there is an init method. Now to add new instances, which is what we are doing, instances of Prop to be more precise, then they must fall outside of the existing instance, because like I said a moment ago, one must end before the next can begin. So for starters scroll down to the end of your script, after the last closing bracket.


Phil has made this as easy as possible for us, to add a new instance we simply need to right click, hover over insert object, and then select Prop as our type of object. The instance will then be created for us, all we really have to do now is select a name to give our new instance. Givie it a meaningful name, lets say moonView. Now, you will notice that there is a noun property defined in our Prop instance. We are going to be dealing with that in a couple of chapters so for now I want you to comment out that line. You can do this by simply adding a semi colon to the front of the line. Anything that comes after the ; on that line will become a comment and thus ignored by the compiler. Your instance should now look something like this.

Code: [Select]
(instance moonView of Prop
(properties
view 0
x 150
y 100
signal ignAct
loop 0
cel 0
; noun N_NOUN
priority 0
)
)

Looking at the rest of the properties, there are some things that we need to change right off the bat. For one, the view where the moon exists is view 110 not view 0 so we will need to change that. Now just like we did in the last chapter, when trying to figure out a good position for the ego to start out the room in, we will need to open up or 110 picture in the Picture editor, and this time instead of just clicking the toggle ego button, I want you to click on the drop down arrow to the right of it. This will give you the option to enter a different view resource number besides the default ego which is 0, so in this case, enter 110 and hit enter. Your moon view should then appear on the screen. Move it around until you are happy with the location, remember the x and y coordinates and then go back to the Script editor and enter those values for the x and y properties of the moonView instance. Everything else for the moonView instance is fine the way that it is.

This is not all that is required though to actually get the moonView to appear in our game. We have the instance created, but we will also need to initialize the instance. Don't worry, that sounds much more complicated than it is. If you scroll back up to the top of your script, looking back at the init method of the Room instance. Just below the bracket that closes the previous room switch that we looked at in the last chapter, you should the line that initializes the ego.

Code: [Select]
(gEgo init:)

That is basically the same thing that we want to do with our moonView and right there is where we want to do it. Directly below the line to init the ego, add in a statement to init our moonView.

Code: [Select]
(gEgo init:)
(moonView init:)

Now if you compile and run your game, your moon view should appear shining bright in the night sky.

Next we will be adding the clusters of stars to the sky. If you take a second to look at loop 1 of the view 110 you will see that I drew out 6 cels which contain sets of stars. So unfortunately we will be adding 6 more instances to our game. So once again, scroll to the bottom of your script and follow the same steps that we did with adding the instance for the moon. Don't worry about initing them yet, let's just get the instances added. I named mine starSet1 through starSet6. Right off we will need to change the view of each to 110, likewise the loop is no longer loop 0, so each of these instances you will need to change the loop to 1. If you haven't guessed yet, the cel number of each will also need to change, except they aren't going to be 1 through 6, since cels start at 0 the cel values for each of these instances is going to be 0 through 5 (totalling 6). Just like with the moonView, we are also going to want to comment out the noun property for each as well. But don't worry, we are going to come back to that in a couple of chapters. Finally, the x and y values, I am not going to make you go through the trouble of finding an x and y that you think works for each one in the Picture editor. After all, I drew them with specific locations in mind so I'll be nice and pass those along. The first instance, starSet1 the x and y should be set to 27, 56. The next one, 73,51 then 131, 48... 213, 64... 240, 3... 287, 43 and finally, starSet6  should be set to 287,43. Now, with the instances set up, we will also need to add them to the init method in the Room instance just like we did with the moonView using the same instance names that you just gave them.

So with any luck, you should now have this in your init method up at the top
Code: [Select]
(gEgo init:)
(moonView init:)
(starSet1 init:)
(starSet2 init:)
(starSet3 init:)
(starSet4 init:)
(starSet5 init:)
(starSet6 init:)

and also down below, with all your new instances added to your script

Code: [Select]
(instance moonView of Prop
(properties
view 110
x 160
y 28
signal ignAct
loop 0
cel 0
; noun N_NOUN
priority 0
)
)
(instance starSet1 of Prop
(properties
view 110
x 27
y 56
signal ignAct
loop 1
cel 0
; noun N_NOUN
priority 0
)
)
(instance starSet2 of Prop
(properties
view 110
x 73
y 51
signal ignAct
loop 1
cel 1
; noun N_NOUN
priority 0
)
)
(instance starSet3 of Prop
(properties
view 110
x 131
y 48
signal ignAct
loop 1
cel 2
; noun N_NOUN
priority 0
)
)
(instance starSet4 of Prop
(properties
view 110
x 213
y 64
signal ignAct
loop 1
cel 3
; noun N_NOUN
priority 0
)
)
(instance starSet5 of Prop
(properties
view 110
x 240
y 3
signal ignAct
loop 1
cel 4
; noun N_NOUN
priority 0
)
)
(instance starSet6 of Prop
(properties
view 110
x 287
y 43
signal ignAct
loop 1
cel 5
; noun N_NOUN
priority 0
)
)

Have I overwhelmed you yet. Hopefully not, Because really we just did the same thing over and over and over again. Add an instance, set it's properties, and add a call to initialize it to the init method.

Here, let's practice doing that some more. I have a few more Props that I want you to create instances for as well as initialize in exactly the same way:

There is what I am calling the northStar housed in view 110, loop 2, cel 0 that I want you to place at 161, 60.
There is a distantShip in view 110, loop 3, cel 0 that I want you to place at 68,111.
There are some shipWaves in view 110 loop 4 cel 0 that I want you to place at 60, 112.
There is a baitBucket in view 110, loop 5, cel 0, that I want you to place at 275, 170
There is a fisherMan in view 110, loop 6, cel 0, that I want you to place at  290, 170
And Finally there is a fishingPole in view 110, loop 7, cel 0, that I want you to place at 284, 153.

I know, I just made you do a lot of work, I am sorry. But hopefully you think that all of that effort was worth it. Assuming that you did everything correctly, compiling your script and then running your game should produce a room that looks a lot like this.


In the next chapter, we won't be adding anymore props but we will be attempting to animate a few of the ones that you just added. Hopefully you are getting a little excited to see how this is turning out. See you in the next chapter.


<< Previous Back to Index Next >>