https://github.com/nikouu/procedural-pokemon-buildings

📒 Rule based generation of Generation One Pokémon buildings 🏦. Toggle features of the building 🏢 and use click and drag to resize 📐 on the fly
https://github.com/nikouu/procedural-pokemon-buildings

canvas javascript pokemon procedural

Last synced: about 2 months ago
JSON representation

📒 Rule based generation of Generation One Pokémon buildings 🏦. Toggle features of the building 🏢 and use click and drag to resize 📐 on the fly

• Host: GitHub
• URL: https://github.com/nikouu/procedural-pokemon-buildings
• Owner: nikouu
• License: mit
• Created: 2021-10-27T04:42:10.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-02-19T01:33:06.000Z (almost 2 years ago)
• Last Synced: 2024-12-22T19:38:25.931Z (about 2 months ago)
• Topics: canvas, javascript, pokemon, procedural
• Language: JavaScript
• Homepage: https://nikouu.github.io/procedural-pokemon-buildings/
• Size: 2.79 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# Procedural Pokémon Buildings

Procedurally generate Pokémon buildings based on rough rules influenced by the buildings from generation one (Red/Blue/Green/Yellow).

![building example](assets/buildingLive.gif)

## Introduction

After completing my [National Dex project](https://www.nikouusitalo.com/blog/making-a-living-dex-part-1-a-lifelong-dream/) I wanted to keep up a big Pokémon binge but I also wanted to time to do the following:

1. Catch up with any stray features from recent ECMAScript versions

2. Create something vanilla with no faff

3. Learn to use the HTML canvas properly*

**It turns out the low level API the canvas provides isn't fun to work with and as such I picked up [Fabric.js](http://fabricjs.com/).

For spending less time writing CSS I also opted for [FlexBoxGrid](http://flexboxgrid.com/).

Note: This has only been tested in Chrome*

## Features

- Resize your building and have it generated on the fly

- Drag the building around

- Drag the canvas around

- Change the features on the building (cladding, roof, doors or not, etc)

- Save/paste your building via the building code

- Generate a random building

## Live Demo

https://nikouu.github.io/procedural-pokemon-buildings/

## To do list

https://github.com/nikouu/procedural-pokemon-buildings/projects/1