Gluon/Video-tutorial-scripts

Gluon Creator Basics

• unknown texture not re-shown after play/stop...
• we need to be able to open external (default app, as well as select one from the list) should we not be able to do this reasonably simply via kde's mime handling system?
• landscape engine, giucam?
• draw loop during editing, this.Editor defined in editing mode, not in play mode, allows for people to implement editor scripts, drawing widgets etc... This is futurespeak, of course ;)

• sprite pack from OGA with static and animated sprites for a nature world

The First Start

"Welcome to the first Gluon Creator introduction screencast. Through this

little series of screencasts, we will go through the use of our game
construction tool, and show how to create a small game of exploration in a
fantasy world. So, the first thing you will see when you start up Gluon
Creator is the Start dialog. This contains three options on the side,
Open Existing, Recent and New. Recent and Open Existing do exactly that,
allowing you to open either some game project from disk, or some recent game
project you edited recently.

- The first start page (create new project, name, select location)

"We have none of these, of course, as this is the first time we start the
 application, so we in stead create a new one by typing in the name, which we
 decide is 'explorer', and select where we want it. The default location of
 our home directory isn't half bad, so let's just accept that. You can of
 course choose anywhere else you want, if you like them to be elsewhere."

- The default panes (Project, Components, View, Messages, Scene, Properties)

"When you have opened some game project, or created a new one like we've done
 here, you'll be presented with this window.
 Here you can see the contents of your project, which is all the assets which
 make up your game, such as sounds, textures, materials, scripts, game scenes
 and so on.
 The hierarchy of game objects in the currently loaded scene are shown in your
 Scene view over here, and if you select one of the objects, such as the
 Sprite, it will be shown in the Properties view here.
 You will see that you have a Game Object at the top, which is what is shown in
 the Scene view, and then a Sprite Renderer component underneath it.
 The Components view over here is where you find the components you can add
 to the game objects in your scene. This is done by dragging and dropping, and
 we'll get back to that in the next screencast.
 The Messages pane down here is where you get various bits of information from
 the game engine and if you are a game programmer you can write out messages
 here as well, which we will get back to later as well.
 The area here in the middle has the view of your game from the perspective of
 the camera position. That position is defined by the Camera Controller
 component, which you can see here on the Camera game object."

"These are the basic layout of Gluon Creator. The next screencast will show you

how to use these elements and build the basics of our forest world. Thanks for
watching!"

Making a Player Character or how to use assets, components and gameobjects

"Welsome to our second screen cast, where we will build the basics of our

little forest world, and our player character. We start out by selecting some
textures and the like for this, which we for this purpose have found on the
super helpful OpenGameArt website, where you can find a lot of artwork under
a variety of free licenses, mostly Creative Commons licenses. So, we have
found a set of graphics which would work nicely for a little fantasy forest
exploration game like ours."

- Add a new texture asset (drag in static player image)

"First thing for us to do is create our player character. So, we add a
 texture which represents this character nicely, by dragging it into our
 Project tree from our file browser. This is Dolphin, but it works just as
 well from any other, like MacOS X' Finder, Windows' Explorer or Gnome's
 Nautilus. Gluon Creator copies this file into the game project's Asset
 directory, and you can now edit it without damaging the original file.
 Double-click on it to load up the graphic here in the View area, or right-
 click on it and select Open External to open it in some external application,
 either the default associated application, or one which you choose from a
 list."

- Add Material asset

"The texture is not immediately useable by itself, as this is really just some
 pixels with colours. To be useable in the game we need to access it through a
 material. So, we create a new Material asset, by right clicking on the game
 project root here, and select New Material like so."

- Create instance, name it "Player Material" - Point instance at texture asset

"We now have a material, which we create an Instance in, like so, and then we
 select that instance. Notice that the instance shows up in the Properties
 view over here, and in particular notice the two properties here: Color and
 Texture0. The colour will allow you to tint the texture you choose, which we
 won't be using for now, and Texture0 is the texture which we wish to show
 using this material instance. Click on the button, and select our texture in
 the dialogue which pops up. Finally we rename it 'Player Material' like so.
 Notice how it changes immediately in the Project tree."

- Rename sprite object to "Player"

"The name Sprite isn't really useful to us, so we rename it 'Player' by
 selecting it, and typing in the new name here. As with the material instance
 before, it of course changes immediately in the Scene tree."

- Point sprite renderer at material instance

"To make sure that this actually shows our player and not that cute question
 mark, we click on the browse button and select our Player Material instance.
 In the game view here you can now see that the player is shown like so."

- Play game (game is automatically saved, game plays)

"Now, when you click the Play button in the toolbar, the game is automatically
 saved, and the game is started. What you will notice is that, well, nothing
 much changes. This is because what you see in the View pane is the same as
 you would see in the game. And as there is not much game logic at the moment
 there will be no change in the game world from when you are editing it to
 when you play it. So, let's stop it again and add a little more colour to our
 world."

- Add a little scenery (trees, shrubberies, bits of grass)

"We add a little bit of scenery now. This is all basically the same as
  adding the player above, only we use a few different textures for it. So,
  rather than spend too much time on this, just imagine you did it as
  above when we get a few trees, shrubberies and grass in. This concludes our
  second screen cast. The third screencast will show you how to add a little
  more life to the world by using animation. Thanks for watching!"
 - PREFABS ffs... damn, we need them for this bit to make better sense.
   (super-extra screencast with prefabs doing this later on, wooh! ;) )
 - (fade out while doing this)

Animations or how to bring life to your world

"Welcome to the third Gluon Creator screencast, where we will look into how to

use animations in a game. Remembering the state of our little game from last
time, we had a character in the middle of the world, and some scenery around
it. It's all a little static, though."

- Add new texture asset with wavey grass

"It would be kind of nice to have the grass be a little wavey. As though there
 were a light breeze blowing through it. Luckily we have a piece of graphic in
 our sprite pack which contains exactly that. So, we add this texture to the
 game project as we did before."

- Add new animated material asset, create instance named "Animated Grass"

"The standard material does not handle animated textures, so we add a new
 material called an Animated Material, and create a new instance of it like
 before, and point that at the new texture. We call that instance Wavy Grass."

- Select one grass sprite, remove the old sprite renderer - Add new animated sprite to grass - Point at Animated Grass instance

"As with the material, the sprite renderer is not capable of handling
 animations, so we add an Animated Sprite Renderer like so, and remove the old
 one. We point the new renderer at our Wavy Grass, and then we fill in the
 information about which parts of the animation are which parts of the
 texture."

- Set anim params

"The easiest way of doing this is to open up the texture by double clicking on
 it and then counting it out, if we don't have the numbers to hand. So, we can
 see that we have (insert numbers as appropriate...)"

- Play game, animation going, lookit pretty!

"Finally, let's see it going in the game. We click play, and you can now see
 this bit of grass wafting gently in a very localised breeze. So, we click
 stop and repeat the process of replacement on the other bits of grass. This
 is just what we just did, so we'll just stop recording here and see you in
 the next screencast, where we will finally get the player character to move
 around in the world. Thanks for watching!"

Making The Character Move or how to

"Welcome to the fourth Gluon Creator screencast, where we will get our player

character to move around in his world. This will show you how to use the input
system, and introduce the basics of scripting, as well as some of the effects
of the hierarchical nature of the game object system."

- Add 4 keyboard components to Player - select arrow up, down, left and right - name accordingly

"The first thing to do is to let the player get some input from a keyboard. We
 add in four components and select the four arrow keys for them, and name them
 to fit. This is the simplest of the input components, but the others are
 similar in nature, so once you have got the hang of the keyboard input
 component, just check out the written documentation for the other parts of
 the input system and it'll make good sense as well."

- Add Scripting asset, named "InputHandler"

"We now add a Scripted Logic asset and call it InputHandler like so."

- Add Scripting component, named "Input" - Point Scripting component at asset

"Then we add a scripting component to our player, and name it Input. We then
 point it at the scripted logic asset InputLogic which we just created. It
 doesn't do anything yet, though, as you can see if we click play. Tapping
 the keys doesn't do anything, so let's fix that."

- Edit and add simple code to update() for checking them

"We double-click on the Input asset and you'll notice we have six pre-defined
 functions here. These functions are part of the life cycle of objects in the
 Gluon game engine. To learn their implications now, look into the written
 documentation, for now we just need the update function. This is called at
 a regular interval when the game is played, and the time argument contains
 the number of milliseconds which have passed since the last update. This
 allows you to write logic which takes the passage of time between updates
 into account, something which we will be using shortly."
"Since we only need the update and start functions, we delete the rest of them
 and then add the logic in those two. The this variable is the normal
 javascript this, which here has a couple of extra variables which we will
 make use of. To start with, we store a reference to the four input
 components, just because it makes our code a little shorter in update. This
 isn't really necessary here, but it is useful in many cases, and it shows off
 the start function, which is called each time a scene is loaded in the game
 engine."

- write code as: if(this.leftkey.isActionHeld()) this.Component.debug("blab");

"In the update function we then check whether the player has pressed the key
 down for each of the keyboard input components. Just to see if it works, we
 write out a debug message for them, which we do by doing so."

- Play game, see debug output.

"You can now see that when i press the up, right, down and left keys, you get
 the message we wrote in each of these written out in the Messages pane here.
 This of course doesn't move the character, but we now know it works, so let's
 do that next."

- Edit logic again to move gameobject according to input item

"We go back to the tab with our scripted logic asset and we swap out the code
 for writing out the debug message with a bit of code which will move the
 game object this scripting component's script is attached to in the
 appropriate directions, so up, right, down and left. The function we call
 is translate, and it will either take a vector or a tripple of numbers. Since
 we don't have the vector already, it's easier for us to just pass the numbers
 directly like we're doing here. The vector will become useful in a later
 screencast."

- Play game, watch character move around

"Now you can see that when we play the game and tap the four keys, our little
 character moves around on the screen in the direction of the arrow key you
 press."

- Add property to Input scripting component, named MovementSpeed, type float

"To give other people working on the same game, who may not be programmers,
 the power to change some useful variables, we can give them some handles to
 pull, that we can then use in the game logic. To do this, we click on the
 configuration icon for our Input scripting component and select Add Custom
 Property. We call this MovementSpeed and select the type float."

- Give value 1

"We give this the value 1, which means that the character should move 1 game
 unit per update."

- Edit code to move gameobject (time/1000)*this.GameObject.MovementSpeed per

 update call
"Back in the script logic we change our translate call to move by this in
 stead of just passing it 1. As you noticed before, this is very fast, and
 this exposed property allows the game designer to change the speed of
 movement without needing to edit the code."

- Play game, move player around a bit

"We can now play, and you now see that the movement is much slower, as
 appropriate by the fact we no longer simply move 0.1 game unit per update,
 but rather 1 game unit per second."
"Notice the camera stays put. In our little game we want the camera to stay
 above the player."

- Drag Camera into Player

"The easiest way to do this is to put the Camera game object
 inside the Player. When you then move the Player, the Camera object will move
 with it, same as if you rotate or move it."

- Play game, move player around a bit

"Now, when we click play again and move our character around, you can see how
 the character seems to be standing still at the center of the screen, and the
 world moves around them. This is not the case, but rather because the camera
 is strictly locked to the position of the character. This shows how putting
 one game object inside another and then move the topmost one, the children
 move with it, in this case the camera game object on which the camera
 controller component is found."

"This concludes our fourth screencast, and you now know how to write a simple
 script, how to use the input system, you know the effects of the cascading
 game object transformations, and you know how to use custom properties. In
 the next screen cast we will show how to control animated sprites. Thanks for
 watching!"

Controlling Animations

"Welcome to the fifth Gluon Creator screencast, in which we will explore how to

control the animations of an animated sprite. Now that your player can move
through the world, it would probably make sense to make his legs move a
little. So, what we want to do is replace the simple Sprite renderer which
shows our little character with an animated one, like we did with the grass in
third screencast."

- Add new texture asset with animated character - Add new instance of anim material, named "Animated Player", point at texture - Remove old Sprite renderer from Player - Add new Animated Sprite renderer to Player, point at Animated Player instance

- Use two animations: idle, walk - Use eight directions: n, ne, e, se, s, se, w, nw

- Add new scripting asset, name it MotionHandler - walkNorth(), walkEast(), walkSouth(), walkWest()

 (walkNorth() stops active walkSouth(), walkEast() stops walkWest(), vice v.)

- stopNorth(), stopEast(), stopSouth(), stopWest() - isWalking (boolean) - walkDirection (unit vector according to current direction of movement) - updateAnimation() (call on all walk?() and stop?() calls, change animation

 accordingly)

- Adapt Player logic to use isActionStarted() and isActionEnded() in stead of

 isActionHeld()

- Call functions on Movement scripting component accordingly - Movement logic moved to MovementHandler from InputHandler, changed to

 if(isMoving)
 this.GameObject.translate(walkDirection*(time*this.GameObject.MovementSpeed));

- Play game, see player moving in all directions with animations

Collissions, or how not to run through things

"The player can walk through our trees right now, which makes very little sense.

So we stop him from doing this by adding a way to see if he has run into
something and if he has to stop him from walking through it."

- Add sphere colliders to all trees - move player forward, see if colliding with something, if true, move back

- Play game, see player not walking through trees

"Finally, you can of course walk through tall grass and shrubberies, just not

as fast as you might over short grass. So, we add the same system as above,
but also add a way of telling whether there should be a slowing down or a
complete stop. This means we'll have to change the logic a bit, to make it
more clear."

- Property on collider for these, SlowDownFactor, type float - Add this to

 trees, factor 0
 shrubs, factor 0.2
 grass, factor 0.7
 "We now see the inability to move through trees as the player slowing down
  by a factor of 0, and moving through grass as a slowing down of, say, 0.7, 
  and shrubberies slow you down by a factor 0.2. This means you'll walk fast
  over normal ground, slower through grass, much slower through shrubberies
  and not move at all through trees. The logic is still to try and move the
  character forwards, see if there is a collission, and then move back if this
  is the case."

- Check if "undefined", if not, apply to player speed this update

 this.start = function() {
   this.SlowDownFactor = 1;
 }
 this.update = function(time) {
   var oldSDF = this.SlowDownFactor;
   var oldPosition = this.GameObject.position;
   this.GameObject.translate(walkDirection*(time*this.GameObject.MovementSpeed*oldSDF));
   if(this.GameObject.Collider.isColliding() &&
      this.GameObject.Collider.gameObject().SlowDownFactor.isNumber)
   {
     this.SlowDownFactor = this.GameObject.Collider.gameObject().SlowDownFactor;
     if(this.SlowDownFactor === 0)
     {
       // If we can't move where we're trying to go, don't go there
       this.GameObject.setPosition(oldPosition);
       this.SlowDownFactor = oldSDF;
     }
   }
 }
 "So, the code becomes something like this. We store the current
  SlowDownFactor of the character in a property, so we have it in an object
  persistent manner. Doing this in Start means it only shows up when the game
  is being played. 
  In the update function we first save the current position and slow down
  factor, and then move the object representing the character in the direction
  they should be going, with slow down and everything applied. We now check to
  see if we have collided with anything, and if there is a new slowdown factor
  which we shold be concerned with. If this is the case, we then store this
  new value, and check if it is 0. If it is, in fact, 0 it means we would be
  unable to move, and we retreat from that position again, and reset our
  slowdown to the old value again."

- Play game, try walking through grass patch, see slowdown

 "If we now press play, we can see that we can walk slowly through grass, even
  slower through shrubberies, and not at all through trees. This concludes our
  6th screencast, showing you how to react to collissions using the sphere
  collider component."

User Interfaces, or how to talk with your players

This might have to wait a bit, need to speak with arjen+guicam about workflow...

• Add UI for showing some dialogue when running into certain trees
• Simple exploration type thing, find all five trees, count it up, player wins when all five trees have been found.
• extra collider on the trees in question, no SlowDownFactor on these