Minecraft recently came out with Minecraft 1.20: the Tales & Trails update, with a focus on the player's story and expression, and all of this jogged up my annual Minecraft fever, and I played the very first snapshots for a while, before going down to look at what made Minecraft mechanics work, and this turned into a nice foray into html5 game development
project link: https://paperambi.glitch.me/
The Game
While I originally just wanted to replicate Minecraft, I saw it as more of an opportunity to go building my own sandbox game. In terms of original concept art, my best was just basing it off the Minecon visuals and turning them into a game, I did my best with my artistic skills
A self-made map versus procedural generation
When I was making the world, I had two options: procedural generation like Minecraft, or a self-made map, like ARK. When I looked at procedural generation in phaser, I saw one tutorial on a flat face-down procedural, and nothing on the vertical top-down world I was looking for. So I chose to make my map in Tiled, and exported it to phaser. The programming and rendering of it was really simple,
this.map = this.make.tilemap({ key: "map" });
this.tiles = this.map.addTilesetImage("Tileset", "Tileset");
this.backgroundLayer = this.map.createLayer("Background", this.tiles, 0, 0);
this.worldLayer = this.map.createLayer("Block", this.tiles, 0, 0);
this.worldLayer.setCollisionByProperty({ collides: true });
Bring the JSON tiled export and tileset into your assets, preload them into Phaser, then declare the map and tileset. After that, just create each layer and enable the collisions, which you can do by setting the custom property in Tiled.
The Main Character
The main character is just a simple phaser platformer character, with arrow key/space bar based movement, with a physics collider. He has spritesheet based animations
Mobs
The only mob in the game is chickens, only interactable through physics based means, no hitting/damage. They have a simple random movement AI.
Placing/removing blocks
The placing and removing blocks system follows simple steps:
Check whether trying to place or remove block
Check tile id and whether tile is inbounds
Update inventory, and Update Weight
The tile ID is just the ID of the in its tileset
The Inventory and UI
The inventory is an array, changed by the placing and removing block functions, which is taken and rendered in the HTML UI. All the UI is just a Layer of html on top of the phaser game, with query selectors on all elements.
Fall damage
This was hard to calculate, as I couldn't use air time or distance travelled in air, as the character speeds up while falling, like realistic physics, so the best method I got was the velocity of the character, with a higher velocity resulting in higher fall damage.
Conclusion
While I've gone as far as I will with this game, Its open source, and I encourage others to take the code and make better sandbox games. https://glitch.com/~paperambi(code)