You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: _posts/2017-6-10-shootemup2.md
+85Lines changed: 85 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,3 +7,88 @@ categories: tutorial shootemup
7
7
heropic: /pictures/shootemup0.png
8
8
---
9
9
10
+
We are now ready to start working in our game, keep reading [part 2 of this tutorial]({{ site.baseurl }}{% post_url 2017-6-10-shootemup2 %}) to learn how to implement the player's ship!
11
+
12
+
We are now ready to start working on the game, so we will begin with the player’s ship. We will define a spritesheet, which contains the relevant information that allows the rendering library to render it on screen. In `spritesheets.xml`, between the `spritesheets` tags, copy the following XML code:
This defines a spritesheet named `playerShip` that uses the images found at the specified picture, the one you downloaded earlier. It defines one possible state for that object, called `Idle`, which only contains a single layer, called `Idle` too, that itself contains a single frame called `Idle` (we weren’t particularly inspired). This frame will draw the content of the picture that starts at 0 pixels in the x (horizontal) axis and 0 pixels in the y (vertical) axis, with a width and height of 100px.
33
+
34
+
If you look at `spaceships.png`, you will see that this corresponds to the red vessel the player will pilot in order to save the galaxy! This frame lasts 100 ms, but this value is not really important here since we only have one frame that will be continuously looping over itself.
35
+
36
+
We have successfully defined how a spaceship looks, but that is not enough! Now we want to define how it will act inside the game, and to do so we will need to head to components.js. Inside the array of components (between the square brackets), copy this JavaScript code:
37
+
38
+
{% highlight js %}
39
+
{
40
+
name: "ship",
41
+
events: [
42
+
{
43
+
name: "#setup", code: function (event) {
44
+
this.var.friction = 0.03;
45
+
this.var.vx = this.var.vy = 0;
46
+
this.var.ax = this.var.ay = 0;
47
+
}
48
+
},
49
+
{
50
+
name: "#loop", code: function (event) {
51
+
this.var.vx += this.var.ax;
52
+
this.var.vy += this.var.ay;
53
+
this.var.$x += this.var.vx;
54
+
this.var.$y += this.var.vy;
55
+
this.var.vx *= (1 - this.var.friction);
56
+
this.var.vy *= (1 - this.var.friction);
57
+
}
58
+
}
59
+
]
60
+
}
61
+
{% endhighlight %}
62
+
63
+
Congratulations, this is your first component! A component is a piece of code that defines (totally or partially) how some objects in your game will behave. This component implements a generic spaceship, as you can deduct by its name, and has two events. Events are pieces of code that execute when something interesting happens, and these two are the most important (that is why they have a hashtag, they are keywords reserved by the engine). The `#setup` event will execute whenever the object is spawned, and the `#loop` event will execute once per frame. As you can probably deduce, we are using the setup event to initialize some values, and the loop to update them. Each object has inner variables that can be accessed and modified via the `this.var.whatever` syntax.
64
+
65
+
Here we are implementing a classic physics model: you might remember from your high school physics that speed is the derivative of position with respect of time, and acceleration is the derivative of speed with respect of time. Don’t worry, we won’t use any derivatives here! We just tell the object to sum the value of its acceleration in each axis (movement can be decomposed in the x and y axis through the magic of vectors :D ) to the speed, and update the position according to the speed. Finally, we are slowing down the object by reducing its velocity according to its friction. You might notice the dollar signs before the x and y, you must use variables starting by $ to indicate the engine that they are necessary for drawing the object so it makes it available to the rendering library. As you can guess, knowing the position of an object is vital for drawing it on the screen!
66
+
67
+
All this is great for modelling the behavior of a generic spaceship, but we are not interested in generic spaceships! We want to implement the player ship, and to do so we are going to place a second component, right after the previous one (if you are new to JavaScript dont forget the comma!):
68
+
69
+
{% highlight js %}
70
+
,{
71
+
name: "playerShip",
72
+
sprite: "playerShip",
73
+
inherits: "ship"
74
+
}
75
+
{% endhighlight %}
76
+
77
+
Surprise, this component is different from the previous one! We are not defining any event, but instead are using two new properties:
78
+
79
+
-`sprite`: This sets the spritesheet used to render an object, in this case it tells it to use the spritesheet we defined earlier.
80
+
-`inherits`: This sets a “parent” component from which we will inherit all its properties if we don’t say otherwise. Thanks to this, all the ship events will be added to the playerShip.
81
+
82
+
So now we have successfully defined the player ship, it is time to check our progress. Go to `levels.xml` and inside the `mainLevel` level, where you previously removed the dog, place this line:
This will tell the engine to spawn an object called playerShip that implements the component `playerShip`, and place it at the coordinates (600,600).
89
+
90
+
We are now ready for takeoff! Press F1 and execute the `Deploy Clockwork Project` command. The Runtime will launch and install your game, and if everything is fine you will see your new fancy game tile. Click it to run your game, which should show the red ship still at the bottom of the empty black screen. This might not seem very impressive to others, but while implementing this you already learned most of the stuff you need to create Clockwork games.
91
+
92
+
93
+
94
+
The ship is now ready for takeoff, head to [part 3 of this tutorial]({{ site.baseurl }}{% post_url 2017-6-10-shootemup3 %}) to learn how to implement keyboard controls!
title: "Shoot 'em up tutorial: 3 - Keyboard controls"
4
+
date: 2017-6-10 18:47:11 +0200
5
+
author: arcadio
6
+
categories: tutorial shootemup
7
+
heropic: /pictures/shootemup0.png
8
+
---
9
+
10
+
Let’s add keyboard support to your game!
11
+
12
+
Since you are now a game developer, you must follow the golden rule of development: do as little work as possible! That is why instead of dealing with keyboard input yourself, we are just going to find a package that does the work for you! (Seems like a good deal, doesn’t it?)
13
+
14
+
Press Ctrl+` inside VS Code to open a terminal, and execute this command:
15
+
16
+
`clockwork add keyboard`
17
+
18
+
It will output
19
+
20
+
`Version 1.0 of keyboard added to the dependencies`
21
+
22
+
Let’s find out what happened! If you go to `manifest.json`, you will find that someone touched your code: it is now one long messy line! First of all, you should press `Shift+Alt+F` to make it more readable and avoid hurting your eyes. Immediately after, you will notice something new:
23
+
24
+
{% highlight js %}
25
+
"dependencies": {
26
+
"keyboard": "1.0"
27
+
},
28
+
{% endhighlight %}
29
+
30
+
A dependency has been added to the project! This will tell the Clockwork Runtime to add that piece of code to your game automatically. This seems really helpful, but we still don’t know how to use it! There is an easy solution, press F1 and execute the command `Browse Clockwork package documentation`, this will ask you for the package name (keyboard) and the version (1.0), and then will open the documentation for that package. By the way, that documentation is automatically generated, so it will follow the same standard style for any package. Handy, isn’t it?
31
+
32
+
Anyway, if you read it you will discover that it lets you use a new component, aptly named keyboard. So, let’s go to `levels.xml` and add it to the current level, just after the playerShip:
If you try deploying your game now, you will see no changes. Why is it so? Sadly, we haven’t yet discovered how to read minds and predict the future (we would like it to incorporate to our roadmap though!), so we don’t know how do you want to use that keyboard input, so you will have to do a small effort. If you read the documentation, you will see that it triggers two new events, `keyboardDown` and `keyboardUp,` which conveniently tell you which key has been pressed/lifted. The only issue is that it talks about something called the key code, and we don’t know which key code correspond to each key. While a quick Bing search would reveal the answer, we are going to find out by ourselves as an excuse to try more cool Clockwork features.
39
+
40
+
Change the playerShip component so it looks like this:
41
+
42
+
{% highlight js %}
43
+
{
44
+
name: "playerShip",
45
+
sprite: "playerShip",
46
+
inherits: "ship",
47
+
events: [
48
+
{
49
+
name: "keyboardDown", code: function (event) {
50
+
this.engine.debug.log(event.key);
51
+
}
52
+
}
53
+
]
54
+
}
55
+
{% endhighlight %}
56
+
57
+
This will print in the debug log the code of each letter pressed. Now deploy your game again but, instead of clicking on its tile, go back to VS Code and press F5. Now go to the game and feel free to mash your keyboard (please don’t hold us accountable for any physical damage you inflict to your keyboard). You will see the key codes for each letter being outputted in the debug console.
58
+
59
+
60
+
61
+
As you can imagine, the debug console is very useful for keeping track of what is happening inside your game and easily find bugs. Clockwork itself will also report common errors in your game, but remember, you must be debugging the game (F5) to see them!
62
+
63
+
Now replace that keyboardDown event by these two:
64
+
65
+
{% highlight js %}
66
+
{
67
+
name: "keyboardDown", code: function (event) {
68
+
switch (event.key) {
69
+
case 37:
70
+
this.var.ax = -1;
71
+
break;
72
+
case 38:
73
+
this.var.ay = -1;
74
+
break;
75
+
case 39:
76
+
this.var.ax = 1;
77
+
break;
78
+
case 40:
79
+
this.var.ay = 1;
80
+
break;
81
+
case 32:
82
+
this.do.fire();
83
+
break;
84
+
}
85
+
}
86
+
},
87
+
{
88
+
name: "keyboardUp", code: function (event) {
89
+
switch (event.key) {
90
+
case 37:
91
+
this.var.ax = 0;
92
+
break;
93
+
case 38:
94
+
this.var.ay = 0;
95
+
break;
96
+
case 39:
97
+
this.var.ax = 0;
98
+
break;
99
+
case 40:
100
+
this.var.ay = 0;
101
+
break;
102
+
}
103
+
}
104
+
}
105
+
106
+
{% endhighlight %}
107
+
108
+
This is all the code you will need to process keyboard input, basically you will modify the acceleration when a key is pressed, and reset it when it is released. You will notice we are also introducing a new feature when the space bar (key code 32) is pressed. `this.do.eventname()` instructs the current object to execute that event, but since we have not yet defined the fire event this will do nothing.
109
+
110
+
Let’s see what we got! Deploy your game and you will be able to control your game using the keyboard.
111
+
112
+
In [part 4 of this tutorial]({{ site.baseurl }}{% post_url 2017-6-10-shootemup4 %}) we will learn how to add some firepower to your ship!
0 commit comments