{"id":53,"date":"2025-02-24T08:58:13","date_gmt":"2025-02-24T08:58:13","guid":{"rendered":"https:\/\/thatuglydude.com\/?p=53"},"modified":"2025-02-24T22:42:02","modified_gmt":"2025-02-24T22:42:02","slug":"emerald-world-3","status":"publish","type":"post","link":"https:\/\/thatuglydude.com\/index.php\/2025\/02\/24\/emerald-world-3\/","title":{"rendered":"Emerald World #3"},"content":{"rendered":"\n

The original game’s map “ground” consists of textures layered in a 2 dimensional tile map. I could extract the map from the game using MMExtensions, as described in my second post<\/a>, however, the values of the tiles were ranging from 1 to 219. This suggests a total number of tiles of the original game is at least 219, or, some tiles are missing.<\/p>\n\n\n\n

For simplicity’s sake, I decided to prepare a reduced tile map just for the partial remake, hence I had to pack the tiles. To reuse the tile map, I decided to reduce the tile ids to the smallest available ones, with the following relatively simple Python script.<\/p>\n\n\n\n

from PIL import Image\nimport numpy\n\n# Load the raw CSV\nmy_data = numpy.genfromtxt(\"emerald_tile_map.txt\", delimiter=\",\")\nprint(my_data)\n\n# Get the values - unique, since we're using a set\nall_values = set()\nfor x in my_data:\n  for y in x:\n    if y not in all_values:\n      all_values.add(y)\n\nsorted_vals = sorted(list(all_values))\nprint(f\"total unique vals: {len(sorted_vals)}\")\n\n# Convert the values to the smallest available\n# Set is sorted, but coming from C++, let's be sure\nconvert_map = {}\nfor i in range(len(sorted_vals)):\n  convert_map[sorted_vals[i]] = i\nprint(convert_map)\n\n# Map the old values into new ones\nnew_data = numpy.copy(my_data)\nfor old, new in convert_map.items():\n  new_data[my_data == old] = new\nprint(new_data)\n\n# Save the image\nfrom PIL import Image\nim = Image.fromarray(new_data)\nim2 = im.convert(\"L\")\nim2.save(\"emerald_tile_map.bmp\")\n\n# Save to CSV\nnumpy.savetxt(\"emerald_tile_map2.csv\", new_data, fmt=\"%d\", delimiter=\",\")<\/code><\/pre>\n\n\n\n
The result is a map with tile values updated, for example: 1 -> 0, 174 -> 56, 218 -> 79 (80 values in total, ranging from 0 to 79 inclusive).<\/p>\n\n\n\n
With the updated values, I could create a tile map. In my case, that was a 10×10 block of 128×128 tiles, with some missing. For the purpose I used Gimp, with a visible and snappy grid of 128px, and added all the necessary images, and eventually exported it to PNG. It looks like this:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
I have noticed some tiles seemed to require duplicating the original image, i.e. 7-14, looking at the map, all looked the same.<\/p>\n\n\n\n
The PNG has temporarily added numbers, as those would be shown on the rendered 3d scene, for easier debugging:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
The result above is achieved with a fragment shader. The UV variable is an input in the range of [0,1], telling us what point of the texture is currently being sampled.<\/p>\n\n\n\n
The texture we first look into is the tile map – to pick the id of the tile texture we need.<\/p>\n\n\n\n
Given a tile id, we now must convert that to a row and column pair, but simple mod and div operations: we now have a “cell” in the 2d tile atlas.<\/p>\n\n\n\n
All we need now, is to convert the UV position from meaning [0,1] on the entire map, to just look at a map’s single tile, and where relative to that we are. This is again normalized to [0,1]. As an example, consider the flow of the values we use.<\/p>\n\n\n\n
The map has 128×128 cells. Let’s start with UV of [1\/128 + 1\/256, 1\/128 + 1\/256].<\/p>\n\n\n\n
    \n
  1. This location on the tile map is the second row, and second column [1,1] (the area that maps to this is for both x and y: [1\/128, 2\/128]; the current point is in the middle of that). Let’s assume the tile ID ended up being 25.<\/li>\n\n\n\n
  2. We are at 50% of the tile from the tile’s beginning to its end, hence mod_uv is [0.5, 0.5].<\/li>\n\n\n\n
  3. We now must move to the tile id position on the atlas of the tile ID 25. Since the atlas in this example is 10×10 tiles, we select the 3rd row (values 20-29) and 6th column (counting from 20, “from zero”).<\/li>\n\n\n\n
  4. We now just move by the [0.5, 0,5] vector from the start of the tile on the atlas, and voila.<\/li>\n<\/ol>\n\n\n\n
    More complex write-up than I wish, but here’s the code!<\/p>\n\n\n\n
    shader_type spatial;\n\/\/ TODO understand and pick those:\n\/\/render_mode blend_mix,depth_draw_opaque,cull_back,diffuse_burley,specular_schlick_ggx;\n\nuniform sampler2D atlas_texture_albedo : source_color,filter_nearest,repeat_enable;\nuniform float atlas_tile_count;\n\nuniform sampler2D tile_map;\nuniform float tile_map_size;\n\nuniform sampler2D height_map;\nuniform float height_ratio = 50.0;\n\nvoid vertex() {\n\tVERTEX.y += texture(height_map, UV).r * height_ratio;\n}\n\nvoid fragment() {\n\tvec2 base_uv = UV;\n\t\n\t\/\/ Get the current tile id\n\tfloat tile_id = texelFetch(tile_map, ivec2(base_uv * vec2(tile_map_size, tile_map_size)), 0).r * 255.0;\n\n\t\/\/ Find the coords of the current tile\n\tfloat atlas_col = mod(tile_id, atlas_tile_count);\n\tfloat atlas_row = (tile_id - atlas_col) \/ atlas_tile_count;\n\t\n\t\/\/ Normalize to [0,1] again, but in terms of a single tile\n\tfloat tile_map_multiplier = 1.0 \/ tile_map_size;\n\tvec2 mod_uv = mod(base_uv, tile_map_multiplier) \/ tile_map_multiplier;\n\n\t\/\/ Get the UV position relative to an atlas tile size\n\tfloat atlas_multiplier = 1.0 \/ atlas_tile_count;\n\tvec2 atlas_uv = vec2(atlas_col, atlas_row) * atlas_multiplier + mod_uv * atlas_multiplier;\n\tALBEDO = texture(atlas_texture_albedo, atlas_uv).rgb;\n}<\/code><\/pre>\n\n\n\n
    Finally, here’s a very brief video showcasing the current state.<\/p>\n\n\n\n
    \n