Gluon/Video-tutorial-scripts: Difference between revisions
m (→Animations or how to bring life to your world: To make it entirely explicit, that is a component, not material and so on) |
m (→Making The Character Move or how to: "this" refers to the script, so logically it cannot have leftkey as child) |
||
(One intermediate revision by the same user not shown) | |||
Line 178: | Line 178: | ||
- Point Scripting component at asset | - Point Scripting component at asset | ||
"Then we add a scripting component to our player, and name it Input. We then | "Then we add a scripting component to our player, and name it Input. We then | ||
point it at the scripted logic asset | point it at the scripted logic asset InputHandler which we just created. It | ||
doesn't do anything yet, though, as you can see if we click play. Tapping | 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." | the keys doesn't do anything, so let's fix that." | ||
Line 199: | Line 199: | ||
the start function, which is called each time a scene is loaded in the game | the start function, which is called each time a scene is loaded in the game | ||
engine." | engine." | ||
- write code as: if(this.leftkey.isActionHeld()) this.Component.debug("blab"); | - write code as: if(this.GameObject.leftkey.isActionHeld()) this.Component.debug("blab"); | ||
"In the update function we then check whether the player has pressed the key | "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 | down for each of the keyboard input components. Just to see if it works, we |
Latest revision as of 15:18, 10 November 2011
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
"Welcome 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 Component 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 InputHandler 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.GameObject.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