We did scrolling backgrounds and this is very useful in any type of game and can add an extra dimension to your game whether its a driving game or a flying game.
We were scrolling horizontally so we were using the xpos but remember you can just as easily scrolling vertically by just using the ypos
In the Bodgers group we’re starting to put our projects together for the Coolest Projects Showcase.
“Coolest Projects International is a world-leading showcase for young innovators who make stuff with technology. If you’re up to 18 and you’re making something with technology for fun, to solve a problem, or as a creative outlet, then we want you to come out and share your project with us! This free event will take place in the RDS Main Hall, Dublin, Ireland on 5 May 2019.”
Stop Motion Stop Motion is used to make cartoons and animated movies like Wallace & Grommet, you take lots of pictures moving the characters and objects a little bit between each picture. Once you have the pictures you can link … Continue reading →
Today in Creators we played a bit more with sound and built a type of musical instrument using Javascript. The project was called “Drum Town” because it was based on the idea of a music mad building and when you wake up one of the resident’s by clicking their window, they would play a particular sound every time some traffic cruised past. Each floor consists of people with the same instrument. What else would they do?
The awesome thing at this stage is that the group has become so competent at javascript that as soon as we had the idea, some people put their heads down and started building without a whole lot of direction!! I won’t go into the ins and outs here, but the code is up on our repository and you can go through it!
Interesting bits!
Some of the interesting bits of the project are:
Classes:
As usual we needed a few classes – this time we used classes for the Car and the Window. The basic idea was to have a car moving at a constant speed left to right and to have windows that play a sound whenever the car goes past.
Unicode Sprite Characters!
We learned that now text is getting more and more graphical – we can see it on our phones with emoticons. There are a large amount of emoticons in standard fonts and if you enable the windows keyboard (right-click taskbar and choose “Show Keyboard” you get on onscreen keyboard that can type all sorts of characters – we used these for our cars: and could write crazy looking code like: this.carList= [“🚗“, “🚚“, “🚛“, “🚕“, “🚜“]; . This will make it REALLY easy for us to write games with nice looking costumes without messing with images.
Sounds:
I handed out some sounds for us but you can put whatever sounds you like in your own version. I got my sounds from this website here which has TONS of free instrument sounds! We named the sounds 0-6.wav to make it easier to use loops to reference them.
That’s it! Take a read through the code, I finished it off a little before pushing (mainly added a title). It would be great to make your own version with a different them and a different set of sounds perhaps. Also – maybe this can give you ideas for other types of musical instrument that you can create, perhaps with a completely different model. Have fun with the emoticons too 📯🎷🎺🎸🎻!
This week we creating a game where a tiny plane flies over dynamically generated terrain picking up as many boxes as possible. The player scores a point for every box, but that also makes the plane fly faster, making the game more challenging.
Perlin Noise
Normal random-number generators produce values that jump around all over the place. Perlin noise is different. It is also random, but it varies smoothly. This makes it great for mimicking the sort of randomness we see in nature.
1D Perlin Noise Landscape
Our smooth and changing landscape is generated using a one-dimensional Perlin noise value generated by the P5.js function noise(xoff).
We start with a loop that goes across from 0 -> width across the screen. We’re looking to generate a set of [x, y] points that define our shape.
We use these values:
xstart: A starting value for xoff
xinc: An amount to increment xoff by for every new location
ymin: The smallest y value we want for our landscape – something a little below the top of the screen
ymax: The largest y value we want for our landscape – something a little above the bottom of the screen
Each call to noise() generates a single value in the range 0-1. We use the P5.js function map() to change this value in the range 0-1 into a value in the range ymin-ymax.
Changing the size of xinc controls how choppy or smooth the landscape is. We tune it to a value that gives approximately two peaks and two valleys across the screen, and looks right for our game.
Moving the Landscape
Moving the landscape is achieved by changing the starting value of xoff (aka. xstart) each time we update the screen. By making it a little larger each time, the effect is that the landscape seems to scroll from right to left.
Other Parts of the Game
The other parts of the game are very standard. We define a simple plane shape (drawn using rect() calls) that can move up or down in response to the arrow keys.
We define “cargo” containers that are randomly generated on the surface of the landscape and move right-to-left at the same speed.
The cargo containers have an active property that is false if they move beyond the left-edge of the screen or get sufficiently close to the plane to be “picked up”.
We added a function to the landscape class (Ground.js) that checks for a given [x, y] location to see if that point us under the ground by checking what the height of the landscape is at that x value. If the plane is below the ground we consider it crashed.
We added a simple scoring mechanism that tracks how many boxes were collected and makes the plane move faster (really – the ground scroll faster) every time a box is collected.
Download
The files for this week can be found on our GitHub repository.
CoderDojo Athenry 