Snow cleaner
- Phaser 3
- JavaScript
- Webbrowser
- Parcel
- Tiled Loader
Play it now: https://gelearthur.itch.io/snow-cleaner
In this game you are a snow ball who needs to Consume everything in this path.
This was my first ever game jam. Its made in javascript and a gameEngine framework Phaser 3. You control a snow ball that easers everything you go over. The more you run over the bigger you become. When you are big enough you can run over bigger objects.
Snow ball graphics
The snow ball took some time until it looked right but I am very happy with the result. How it works is with a tilemap, mask and clever alpha. The tilemap is infinite. I can move it to any direction and a clone of that map will appear on the other side (it tiles). After that, I mask the tilemap so it looks like a ball. Then I can move the texture in the direction where the player wants to go. Then you have a rolling ball but it still looks a bit fake. So then I used a texture that dark from the sides and light in the center to fake depth. I gave it some alpha and it looks great.
Tiled collisions
I am using Tiled to create a tilemap. Tiled also has a feature to create colliders on top of the map. Phaser 3 can load in these tilemaps so you don’t need to send a lot of data. What it can’t do is loading in the collision maps. So I wrote a importer.
It asks for the scene, json and the type of gamemode. It will then create a colliders in that scene based on the json file. Add the correct data types to that collider so we know the score and what size you need to be before you can run over it.
import Phaser from "phaser";
/**
* Made my own collsion reader
* because Phaser does not have it
* @param {Phaser.Scene} scene
* @param {string} json
*/
export default function createCollsion(scene, json, gamemode) {
// what we will return
const group = { score: [], collide: undefined };
group.collide = scene.physics.add.staticGroup();
for (let i = 0; i < json.length; i++) {
if (json[i].type === "objectgroup") {
for (let j = 0; j < json[i].objects.length; j++) {
// if its not a rectacle break
if (json[i].objects[j].polygon != undefined) break;
if (json[i].objects[j].point != undefined) break;
if (json[i].objects[j].ellipse != undefined) break;
// create rectangle
const zone = scene.add.rectangle(
Math.floor(json[i].objects[j].x),
Math.floor(json[i].objects[j].y),
Math.floor(json[i].objects[j].width),
Math.floor(json[i].objects[j].height)
);
zone.setOrigin(0);
// if the collider has data add it
if (json[i].objects[j].properties != undefined) {
zone.setDataEnabled();
for (let l = 0; l < json[i].objects[j].properties.length; l++) {
if (json[i].objects[j].properties[l].name === "destroy") {
zone.setData("destroy", json[i].objects[j].properties[l].value);
}
if (json[i].objects[j].properties[l].name === "collide") {
zone.setData("collide", json[i].objects[j].properties[l].value);
}
// add extra score data
if (json[i].objects[j].properties[l].name === "score") {
for (let dx = 0; dx < 10; dx++) {
for (let dy = 0; dy < 10; dy++) {
const extraScoreZone = scene.add.rectangle(
zone.x+5 + ((zone.width-10) / 10) * dx,
zone.y+5 + ((zone.height-10) / 10) * dy,
Math.floor((zone.width-10) / 10),
Math.floor((zone.height-10)/ 10)
);
extraScoreZone.setOrigin(0);
extraScoreZone.setDataEnabled();
let score = 0;
// check wich gamemode and add the correct score
if(gamemode == "destroy") score = json[i].objects[j].properties[l].value
if(gamemode == "clean") score = json[i].objects[j].properties[l].value * -1
if(gamemode == "draw") score = json[i].objects[j].properties[l].value *0
extraScoreZone.setData("extrascore",score);
group.score.push(extraScoreZone);
}
}
}
}
}
if(zone.getData("collide")){
group.collide.add(zone, true);
}
}
}
}
// return the colliders
return group;
}