Explorers Week 9 – Paint Program

Hi everybody,

Hope you all enjoyed finishing up our drawing program. We made good use of costumes this week to make it look like we were dipping our paint brush in each of the different colours.

We also used a variable similarly to how we used in the Piano Game we made. We made it into a slider and then code select the Pen Size we wanted.

Here are the notes in PDF. CDA-S6-Week_08-Paint

See you next week for something a little Christmas themed!

 

Martha

 

Creators – Arrays and Classes

Several Values in One Place

This week we looked at two very useful concepts in JavaScript, Arrays (we’ve also called them lists) and Classes (we’ve also called them objects). They are both things that allow one variable to store more than one value at at time. This can often be very convenient and has the potential to save us a lot of typing! Who doesn’t like that?

Arrays

A plain variable in JavaScript can store a single value, we’ve seen that loads of times:

let a = 5;
let b = 7;
let c = a + b; // will be 5 + 7 = 12

An array variable in JavaScript can store more than one value, just by putting them in square brackets and separating them with commas:

let a = [5, 7]
let c = a[0] + a[1]; // This is the same as above!

The code here does the exactly the same thing as the block above it. See that a now has two values in it and we use a[0] to get the first value and a[1] to get the second. This technique isn’t super useful when we only have two values, but the more we have to store, the more useful this gets. Imagine if we had 10 values,  how much shorter would the array version be?

You can also create an empty array and put values in it later:

let a = [];
a.push(5);
a.push(7);

In the code above we create an empty array (nothing between the square brackets) and then use the push() function to add two values into it.

Concept of Classes

A class is a programming concept that lets you define objects which contain both Properties and Methods. Properties are values associated with the object. Methods are actions that we can ask the object to perform.

class

Think of yourself as a Person object and imagine some of the Properties and Methods you might have.

Your Properties might include NameAgeHeightWeight, etc. A simple Method you might have could be SayHi(). That would make you say “Hi, it’s <Name>!”.

A method might have arguments, so it could be SayHiTo(“Dave”) which would make you say “Hi Dave!”.

Classes in JavaScript

Making classes in JavaScript is pretty easy. Let’s look at the Person class we showed above:

class Person{
  constructor(name, age, height, weight){
   this.Name = name; 
   this.Age = age; 
   this.Height = height; 
   this.Weight = weight;
  }
  
  SayHi(){
    Console.Log("Hi, it's " + this.Name + "!");
  }

  SayHi(who){
     Console.Log("Hi " + who + "!" );
  }
}

We say “class“, the name of the class and a pair of curly brackets. Inside these brackets we have three functions (but notice we don’t have to say “function“).

Let’s look at the first of these, called constructor(). This is where we set the class properties. Note that we must put “this.” before properties to distinguish them.

The second two functions, SayHi() and SayHiTo() aren’t too usual, again note that we must use “this.Name” to get the value of the name property.

Download

This week we created a class to represent a bouncing ball and we saw how easy it was, once we’d created the class, to make several of them, all bouncing around simultaneously. This would have taken us a lot more code to do if we hadn’t made a class. As always, the files can be downloaded from our Github page.

 

 

 

 

 

 

Creators – Being Random

Screen Shot 2017-10-17 at 00.56.49

This week we mainly looked at three things:

  • How data is organised on your computer
  • Creating functions
  • Using randomness to make things interesting

Data Organisation

Most of us had heard of a hard-disk before. This is a stack of metal disks inside your computer. Each metal disk has a special coating made of millions of tiny magnets (like you might find stuck to the fridge) that can be turned on and off.11644419853_9499fa0faa_b

We saw that able to turn something on and off, like a switch, was enough to count from zero to one, but the more switches we added, the higher we could count. Two switches can count from zero to three:

Switch 1          | Switch 2          | Total (Add)
[Off = 0, On = 1] | [Off = 0, On = 2] |
------------------+-------------------+-----------
Off = 0           | Off = 0           | 0
On  = 1           | Off = 0           | 1
Off = 0           | On  = 2           | 2
On  = 1           | On  = 2           | 3

With enough of these tiny switches, we can store anything we need. Each of these tiny switches is also known as a ‘bit’ and a 1 terabyte hard disk has a billion of them!

We also saw that the files on your disk are arranged with folders (also known as directories). Folders can contain both files and more folders. This allow us to keep our hard disk organised; without them all our files would be in the same place which would be difficult once we had more than a few. The location of a file is called its “path”. Looking at the highlighted file on the desktop of my Mac we can see the full path would be:

Screen Shot 2017-10-16 at 22.19.59

/Users/kierancoughlan/Desktop/Ball and Bat Sounds.m4a

 

This means that, reading backwards, the file called ‘Bat and Ball Sounds.m4a’ is in a folder called ‘Desktop’ which is itself inside a folder called ‘kierancoughlan’ which is, at the highest level, inside a folder called ‘Users’.

Functions

A function is a collection of commands that do a job together. We’ve already encountered them, even if you hadn’t especially noticed:

  • Our P5 template already contains two functions called start() and draw()
  • All of the P5 commands we have used, such as createCanvas() and rect() are functions themselves

We could add all our code to start() and draw(), in fact, that’s what we’ve done before this week. That’s fine starting out, but it does mean, once there are a lot of commands in those functions, that our code is gets harder to read and understand. Breaking out a few commands into a new function and giving it a name that describes what it is doing, really helps.

Once we’ve written a function, it can be called as many times, and from as many places, we as need.

Functions can do one other thing too: they can give back a value to the place where they were called from. For this we use the special word return. For example, let’s see what a function to pick the largest of two numbers, we’ll call it Max(), might look like:

function start(){
    let a = 4;
    let b = 10;
    let c = Max(a, b);
}

function Max(n1, n2){
    if (n1 > n2)
        return n1;
    else
        return n2;
}

We give Max() the two numbers we are comparing. If the first one is bigger than the second, it gives back the first. Otherwise, if gives back the second. Note too that the names of the variables in Max() are different to those in start(), and that’s not a problem.

Random

Finally, we looked at the P5 function random(). We used it two different ways:

random(); // gives a number between 0...1
random(n); // gives a number between 0...n (where n is a number!)

In the first form, we used it to pick a random colour. In the second, we used it to pick a random position for our squares.

Files

As usual, all the code is on the creators github repository. Head there and download it!! The files for this week contain both the script we wrote (sketch.js) and a longer version that I wrote (sketch2.js). Feel free to take a look at both!

CoderDojo Athenry Returns on 16 September 2017!

CoderDojoAthenry-Returning

CoderDojo Athenry is re-starting after the summer!

We will have an information session for new and existing members on Saturday 16 September 2017 at 12:00 in our usual venue, Clarin College Athenry (formerly known as “the Tech”). Usual sessions will resume the week after, on Saturdays at 12:00.

We hope you can join us. You are welcome to invite your friends along too!

New members are always welcome. To join, just come along on the first day and fill out a registration form. Young people aged 12 and under have to be accompanied by a parent/guardian for the whole session.

And don’t forget, CoderDojo Athenry is run by volunteers and is completely free for participants — no membership fees, no weekly contributions. You should bring a laptop if you have one, but we have some loaner laptops if you don’t. There is more information on our About page.

Creators: Text Based Adventure

The last two weeks we were looking at something quite different: a text-based adventure system built in Unity. This was inspired by the Henry Stickmin games and also by the old 80s-style choose-your-own-adventure books.

158788261_51be05e517_z

Basic Program Design (Story Card)

The user is presented with a “story card”. A card consists of some text describing their current situation and (normally) a number of options to choose from.

Screen Shot 2017-04-05 at 14.12.23.png

Depending on which option they pick, the story branches from there, card-by-card, until it reaches an end (a card with no options).

Setting up a card is straightforward:

Screen Shot 2017-04-05 at 14.15.27.png

You enter the card description (the text the user sees on screen), the text that the user will see on each option button (the program supports up to four at the moment) and the card (or branch, but we’ll get to that later) to jump to when that option is selected.

There’s also the mention of “States to Set True/False” and we’ll explain that next.

Story States & Story Branches

We could have programmed the system entirely using only cards, but there’s one situation where this becomes tedious. Imagine that you have a choice; hitting a button for example. The consequences of this choice won’t become apparent until later in the story. If we only had story cards, then we’d have to branch the story immediately at his point, replicating the same steps on both branches until the point at which the consequences of your action played out.

Fortunately, there is a better way.

First, to remember the value we introduce the idea of a “story state’. It’s just a container for a true or false value. Cards can set the value of specific states when they are activated as seen above.

Screen Shot 2017-04-05 at 14.14.09

So, that covers remembering values, how do we then make use of them? This requires a “story branch”. A branch references a state and two places for the story to go (either of these can be a card or another branch). The value of the state determines which is picked.

Screen Shot 2017-04-05 at 14.19.01

 

Game Manager

This class looks after the story. It is responsible for updating the UI to the details of the current card, for handling the use clicking on specific buttons and generally directing the flow of the story. It also needs a StoryCard to start off the story with.

Screen Shot 2017-04-05 at 14.21.33.png

Project

 

The project, including a very simple story using a number of cards and also a couple of states, can be found here. There are two scenes in the project, Adventure which contain a simple story and Basic which is a good starting place for your own story.

Creators : Breakout / Mouse Controlled Camera

Screen Shot 2017-03-16 at 15.25.41

This week we looked at a version of the classic game Breakout. It was an exercise in showing how a game developed with 3D assets can, nevertheless, appear like a 2D game given the correct choice of camera and lighting.

The camera for this game is an orthogonal one. Unlike a standard perspective camera, which mimics how we actually see the world, things don’t get smaller as they get further away with an orthogonal camera. This gives a very flat look where we don’t see the edges of the game area, blocks, bat or puck. In addition, the scene has a single directional light which shines directly downwards. Shining straight down means there are no shadows around the sides of the objects as there would be if the light was at an angle.

This game does not use Unity’s physics for the puck movement. I found that the physics just didn’t give the consistent behaviour you’d expect from this game. Accordingly, I programmed the movement of the puck myself. The maths is a little more complex than I’d like but the intention is to keep the puck moving at a constant speed, even after it hits something.

Additionally, we worked quickly on implementing a mouse controlled camera. In the hierarchy, we created a camera rig from two empty objects, one inside the other, and put the camera object inside the second. Changing the Y rotation of the first empty then turned the camera around the vertical while changing the X rotation of the second tilted the camera around horizontal. The visual below show what a real world camera rig that behaved this way might look like; rotating at the base and at a horizontal pivot.

Screen Shot 2017-03-16 at 15.53.28

In our scripts we referenced the usual horizontal and vertical input axes:

     float horiz = Input.GetAxis ("Horizontal");
     float vertical = Input.GetAxis ("Vertical");

but in the Input Manager (Edit|Project Settings|Input) we switched these from the arrow keys to the mouse axes:

 

Screen Shot 2017-03-16 at 15.35.08 (Edited)

The Breakout project can be downloaded here and the mouse controlled camera project can be downloaded here. These projects are both saved with Unity 5.5.2f1, so please use that version or later when opening them.

 

 

 

Creators – Projects

material-design-joystick-wallpaper-flat-video-game-1486908

This week we spoke about possible projects. We also looked at games that you like so that we could draw inspiration from them.

When it comes to projects, there are a few questions you need to ask yourself:

What is the type of game you want to make?

Take a look here for an exhaustive list of game genres: https://en.wikipedia.org/wiki/List_of_video_game_genres

What is the setting for your game? Do you have a character in mind?

These choices will determine the look and tone of your game and are good things to decide early on.

What do I already know that will help create my game?

From what we’ve seen already this year, what things will your game need that you already know how to do?

What do I not yet know how to do?

There are things you might like to be able to do that you’re not sure about how to achieve; these are things to raise with your mentor. He’ll focus on these in the next few weeks. Also; check the Asset Store. There are many free things there that might help you complete your game. If you’d ultimately like to do everything yourself, look at these as items as placeholders to get the basic game working that you might eventually replace.

Finally remember:

BE REALISTIC IN YOUR AMBITION

You will find it hard to get time to work on your project and it’s your first project on your own in most cases. The most important things are to show something that is yours and something that is fun. Showing something that is overly complex but that is not fun is not as good.

Get your thinking caps on!

Creators – Simple AI Navigation

Apologies for the late post. This week we looked at simple AI navigation.

The basis of navigation in Unity is the NavMesh. A NavMesh is a simplified view of the game world that marks out all the areas that AI characters can move through. The pictures below show the same scene with the NavMesh made visible in the second:

navmeshoff

navmesh-on

The blue areas are the NavMesh and are the areas that AI characters can move in. The holes made by the walls are apparent as is the  “ramp” on the steps and the circle/arrow combinations where characters can jump down from or across obstacles.

Making a NavMesh

 

The first step in making a NavMesh is marking pieces of the scene as “walkable” and “not walkable”. Open the Navigation panel from the Window menu. When ever this panel is selected, the NavMesh will be displayed in the Scene View, by default.

The Navigation panel has three buttons across the top. Select “Object” and select objects in the Hierarchy that you want to be part of the NavMesh. Select the floor or ground object, select the “Navigation Static” option and set “Navigation Area” to “Walkable”:

screen-shot-2017-02-17-at-11-40-46

Then select each wall/obstacle and again select “Navigation Static” but this time set “Navigation Area” to “Not Walkable”.

Press the “Bake” button in the bottom of the  panel to create the NavMesh.

Adding a Character

We use the AIThirdPersonController prefab from the Unity Standard Assets to test our NavMesh. Adding it to our scene, we find that it has a “AI Character Control” script that takes a “Target” parameter.

Screen Shot 2017-02-17 at 11.44.50.png

Just drag any game object (even an empty one) from the Hierarchy here to tell the character to move to it.

Sample Project

The sample project can be found here. This is in Unity 5.5, so ensure you’ve upgraded to this version before trying to open it. The sample project also contains some logic to reroute the character between an array of targets, alternating when the spacebar is pressed. It also has had some “Off Mesh Links” generated. These allow the character to drop from the elevated platform and to “jump” (more accurately float really with this character) between them.

 

CoderDojo Athenry Resumes on 21 Jan 2017

happy-new-year-2017s

Happy New Year 2017 from the CoderDojo Athenry mentors!

CoderDojo Athenry resumes on 21 January 2017 (1 week later than usual). We have lots of great tech and coding projects activities planned for 2017.

New members are always welcome, so feel free to bring a friend along. And we have some laptops for loan, so you don’t need to one to join in.

As always, we will be based in Clarin College Athenry from 12:00 to 2pm on Saturdays. More information here: https://coderdojoathenry.org/about/