Code Monkey home page Code Monkey logo

pokemon-gen-2-style-tilemap's Introduction

Pokemon Gen 2 Style Tilemap

Objectives

  1. Similar but different tiles. The kind that when side by side you can't really work out which is the original.
  2. Same colour palette

These will be addressed via:

Compiler

There's a crusty compiler that extracts data from the tables in this readme.md file to generate:

  1. A tilemap for both the original and custom tiles
  2. A JSON output of the tilemap with tile names, the filename, and coordinates: TilemapDetails.json

If there are missing tiles, a fuchsia square is used instead.

This helps me create tilemaps easily by only having to document them here. The tilemaps themselves look like:

Tilemap from original tiles Tilemap from custom tiles
image image

Colouriser

Also included is a colouriser which turns each tile into the 4 colour GameBoy colours. This is useful to directly import the sheet into something like GBStudio.

Notes

  • Gameboy tiles are 8x8 pixels
  • However, lots of things (including people) are 16x16 pixels (i.e. 2x2 tiles) or bigger like trees and buildings.
  • Inspiration from Pokemon Gold/Silver. This is also the spritesheet the originals come from.
  • Slight inspiration from The Legend of Zelda: Oracle of Ages and The Legend of Zelda: Oracle of Seasons
  • Full map of Gen 2 Johto and Kanto. Copying this into Aseprite, setup the grid as {X: 1, Y: 6, Width: 8, Height: 8} to align the main map to the grid. Grid toggle is ctrl + '
  • Tile naming convention: <Object> - <type> - <index>
    • Object: The thing the tile represents.
    • Type: The type/subclass/description of the Object
    • Index: If it is a multi-tile Object, the index of the tile. From left to right, top to bottom.
  • Each tile has a large version. Exported from Aseprite at 800% size with _large in the filename.

Outdoor

Tiles

Tile Original Custom Notes
Path image image Hard to make distinct when using the same colours.
Path with gravel image image Just some dots.
Grass - flat image image Basically a whole bunch of checkerboarding with some bits cut out.
Grass - tall image image Couldn't make nice looking grass on my own. Might have to revisit. Maybe get inspiration fron gen 1 or 3?
Tree - short 00 image image Background is just the grass texture. Followed the same shading style. Ended up looking more bulbus at the top.
Tree - short 01 image image Background is just the grass texture. Followed the same shading style. Ended up looking more bulbus at the top.
Tree - short 02 image image Little shadow takes most of the space around the trunk. Ended up not using the same spiky tree look for the lower branches
Tree - short 03 image image Little shadow takes most of the space around the trunk. Ended up not using the same spiky tree look for the lower branches
Tree - tall 00 image image I think this also uses the normal grass background as a base
Tree - tall 01 image image I think this also uses the normal grass background as a base
Sign - metal 00 image image A taller sign.
Sign - metal 01 image image A taller sign.
Sign - metal 02 image image A taller sign.
Sign - metal 03 image image A taller sign.
Ridge 00 image image Checkerboard design behind.
Ridge 01 image image Just lots of light shading on the top.
Ridge 02 image image Checkerboard design behind.
Ridge 03 image image This one looks like a dog's breakfast without the context of other tiles.
Ridge 04 image image Surprisingly, this took a little bit of time to look okay and not overdone.
Ridge 05 image image Initially looks less defined, but together with other tiles it looks fine.
Ridge 06 image image Used a basic circle design. Might be worth looking into exaggerating the curve.
Ridge 07 image image First run of this design looked like Hank Hill's ass.
Ridge 08 image image I'm assuming the bottom right corner light pixel is the light peeking over the top of the rock at the top of the shadow.
Water 00 image
Water 01 image
Water 02 image
Water 03 image
Water 04 image
Water 05 image
Water 06 image
Grass - rustle 00 image
Grass - rustle 01 image
Flower - Johto 00 image image Flipped the background pixels. The original did a great job with the space it had.
Flower - Johto 01 image image Maybe move the flower the other way? Maybe do a V shaped flower like a tulip?
Building - Roof - flat 00 image image Top left corner. Though there are many roof colours in game and a couple of roof designs too. I took inspriation from my first building.
Building - Roof - flat 01 image image Top middle. Hard to be different here too I think when explicitly making a flat roof
Building - Roof - flat 02 image image Top right corner
Building - Roof - flat 03 image image Left middle
Building - Roof - flat 04 image image Centre fill
Building - Roof - flat 05 image image Right middle
Building - Roof - flat 06 image image Bottom left corner. A skinnier look inspired by Kanto.
Building - Roof - flat 07 image image Bottom middle
Building - Roof - flat 08 image image Bottom right corner
Building - Wall 00 image image Left building wall
Building - Wall 01 image image Right building wall
Building - Wall 02 image image Bottom left building corner
Building - Wall 03 image image Bottom middle building floor. I never realised this had the dots, even when a brick cladding is used. Originally I didn't have the dots, but they ended up providing a unconscious smoothness to the design.
Building - Wall 04 image image Bottom right building corner
Building - Cladding 00 image image Hatched design. I'm awful at designs and couldn't come up with anything better.
Building - Cladding 01 image image Brick. The pink building bricks were also used as the paths in Goldenrod
Building - Window image image Window. Similar to the hatched design, couldn't come up with anything better. However in my first building linked above, I did have a nice window design inspired by Kanto, but I couldnt' get it to suit the look here.
Building - Door 00 image image Top left door. Never realised the door was so highlighted in the top half. I'm assuming this is to show the light coming out of the window. And perhaps this is the same door used in the night scenes, so it would look nicelyl it without having toc hange the tile.
Building - Door 01 image image Top right door
Building - Door 02 image image Bottom left door
Building - Door 03 image image Bottom right door
Outdoor Exit Mat image image

Constructed tiles

Constructed Tile Original Custom
Tree - short image image
Tree - tall image image
Sign image image
Ridge image image
Water image
Grass - rustle image
Flower - Johto image image
Building image image
Outdoor exit mat type 01 image image
Outdoor exit mat type 02 image image

Observations

  • Due to the GBC limitation, only 4 colours per sprite. Often this is a "black", "white", main colour light, and main colour dark.
  • I have no idea how shading works
  • Checkerboards, checkerboards everywhere
  • Weird asymmertry everywhere
  • If an object doesn't fill in the entire space of the tile, the empty space is often the blank path without gravel colour

Water

⚠️On further analysis, I beleve this to be kinda wrong, but left here because it's interesting and might be worth picking up in the future⚠️

  • I think water tiles are actually only 4 tiles rather than the 7 pulled from the sprite sheet. I say this because

    • The local label(?) .WaterTileFrames points to a 4 frame png
    • Via AnimateWaterPalette, water palette seems to cycle 4 colours - none(?), light, dark, light . I assume this is what changes the shading of the light coloured pixels in the frames. As some of the water frames are the same, just lighter/darker depending where in the cycle they are. Then ultimately the blank and just blue frame is either the palette colours swapping in no or blue value for the pixels. I find it difficult to read Assembly, but it seems to be something like this.
    • An educated assumption might look like this:
    Frame Visible in-game Tile Palette cycle Original animation frame index (0 - 4) Original frame Approx number of frames visible
    1 image 0 (none) Frame 2 image ~14?
    2 image 0 (none) Frame 3 image ~14?
    3 image 1 (light) Frame 3 image ~20?
    4 image 1 (light) Frame 0 image ~4?
    5 image 2 (dark) Frame 0 image ~24?
    6 image 2 (dark) Frame 1 image ~4?
    7 image 1 (light) Frame 1 image ~20?
    8 image 1 (light) Frame 2 image ~4?
    • The above is a sketchy understanding at best
    • The tiles except the blank one add to 60 frames, or 1 second (GB/GBC runs at 60fps)
    • Makes sense that the minimum length is 4 frames due to this comment. Maybe 4 frames is a "tick" here.
  • However, as neat as these are, I'll probably just be using the 7 frame water animation

  • The water animation gif above might be a bit fast

  • bgb notes

  • More bgb notes

Flowers

  • There are Johto flowers and Kanto flowers, But I'll be focusing on Johto.
  • I think Johto flowers run at 24 frames per animation frame. Assembly here.
  • Also both seem to run at different speeds.

Indoor

Tiles

Tile Original Custom Notes
Void image image
Back wall - painted image image
Back wall - wood image image ╚(ಠ_ಠ)=┐ ┌=(ಠ_ಠ)╝
Back wall - window 00 image image
Back wall - window 01 image image
Back wall - window 02 image image
Back wall - window 03 image image
Back wall - art 00 image image
Back wall - art 01 image image
Back wall - art 02 image image
Back wall - art 03 image image
Flooring - type 01 image image
Flooring - type 02 image image
Table - type 01 - 00 image image
Table - type 01 - 01 image image
Table - type 01 - 02 image image
Table - type 01 - 03 image image
Table - type 01 - 04 image image
Table - type 01 - 05 image image
Table - type 01 - 06 image image
Table - type 01 - 07 image image
Table - type 01 - 08 image image
Table - type 01 - 09 image image
Table - type 01 - 10 image image
Table - type 01 - 11 image image
Indoor plant - type 01 - 00 image image
Indoor plant - type 01 - 01 image image
Indoor plant - type 01 - 02 image image
Indoor plant - type 01 - 03 image image
Indoor plant - type 01 - 04 image image
Indoor plant - type 01 - 05 image image
Indoor plant - type 01 - 06 image image
Indoor plant - type 01 - 07 image image
Computer - type 01 - 00 image image
Computer - type 01 - 01 image image Looks like I drew a rare wide screen old CRT
Computer - type 01 - 02 image image
Computer - type 01 - 03 image image
Computer - type 01 - 04 image image
Computer - type 01 - 05 image image Uses the bottom of the bookshelf as the bottom of the computer
TV - type 01 - 00 image image
TV - type 01 - 01 image image
TV - type 01 - 02 image image
TV - type 01 - 03 image image
Bookshelf - type 01 - 00 image image
Bookshelf - type 01 - 01 image image
Bookshelf - type 01 - 02 image image
Bookshelf - type 01 - 03 image image
Bookshelf - type 01 - 04 image image
Bookshelf - type 01 - 05 image image
Bookshelf - type 01 - 06 image image
Bookshelf - type 01 - 07 image image
Bed - type 01 - 00 image image
Bed - type 01 - 01 image image
Bed - type 01 - 02 image image
Bed - type 01 - 03 image image
Bed - type 01 - 04 image image
Bed - type 01 - 05 image image
Bed - type 01 - 06 image image
Bed - type 01 - 07 image image
Fridge - type 01 - 00 image image
Fridge - type 01 - 01 image image
Fridge - type 01 - 02 image image
Fridge - type 01 - 03 image image
Fridge - type 01 - 04 image image
Fridge - type 01 - 05 image image
Sink - 01 image image This custom sink might be my favorite piece of this project.
Sink - 02 image image
Stove - 00 image image
Stove - 01 image image
Stove - 02 image image
Stove - 03 image image
Cabnet - 00 image image I guess it's a drawer now
Cabnet - 01 image image
Stool - type 01 - 00 image image
Stool - type 01 - 01 image image
Stool - type 01 - 02 image image
Stool - type 01 - 03 image image
Stool - type 02 - 00 image image
Stool - type 02 - 01 image image
Stool - type 02 - 02 image image
Stool - type 02 - 03 image image
Radio - type 01 - 00 image image
Radio - type 01 - 01 image image
Radio - type 01 - 02 image image
Radio - type 01 - 03 image image
Radio - type 02 - 00 image image
Radio - type 02 - 01 image image
Radio - type 02 - 02 image image
Radio - type 02 - 03 image image
Indoor Exit Mat type 01 - 00 image image
Indoor Exit Mat type 01 - 01 image image
Indoor Exit Mat type 02 - 00 image image
Indoor Exit Mat type 02 - 00 image image

Constructed Tiles

Constructed Tile Original Custom
Back wall - window image image
Back wall - art image image
Table - type 01 image image
Indoor plant - type 01 image image
Computer - type 01 image image
TV - type 01 image image
Bookshelf - type 01 image image
Bed - type 01 image image
Fridge - type 01 image image
Sink image image
Stove image image
Cabinet image image
Stool - type 01 image image
Stool - type 02 image image
Radio - type 01 image image
Radio - type 02 image image
Indoor Exit Mat type 01 image image
Indoor Exit Mat type 02 image image

Indoor Plant Type 01 Attempts

For fun, here are some attempts at the indoor plant. The first two are from the game, the latter four are my attempts.

image

While what I settled on wasn't perfect (see in the tables above), I did learn:

  1. The flooring that is 1px hatched tiles also applies to the green area
  2. The shading for the plants really makes it. Having the light, medium then dark greens from top to bottom of each leaf.
  3. That the pot looks like it's a plant pot from Zelda.

Let that sink in

Like noted above, I'm really proud of the sink. I just think it looks neat. Showed it to a friend, and he returned with:

image

pokemon-gen-2-style-tilemap's People

Contributors

nikouu avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.