Difference between revisions of "Tutorial: Adding custom maps to the wiki"

From Final Fantasy Hacktics Wiki
Jump to navigation Jump to search
 
(6 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
Choose a map_identifier, for example: FFTHacker_Alternate_Sweegy_Woods
+
Choose a ''map_identifier'', for example: FFTHacker_Alternate_Sweegy_Woods
  
−
Take the following screenshots, either with Ganesha DX (WiP) or with the Map Viewer.
+
== Taking Screenshots ==
 +
 
 +
Use either Map2GL or Ganesha Dx to take Screenshots.
 +
You need all five of the following screenshots:
 +
 
 +
* Viewing from the SW corner, Bottom Elevation
 +
* Viewing from the SE corner, Bottom Elevation
 +
* Viewing from the NW corner, Bottom Elevation
 +
* Viewing from the NE corner, Bottom Elevation
 +
* Viewing straight down with the SW corner in the bottom left
 +
 
 +
'''To Take Screenshots In Map2GL Map Viewer'''
  
 
Press the following keys to adjust the map viewer:
 
Press the following keys to adjust the map viewer:
−
* X : Makes the axis lines disappear
+
* X : Makes the axis lines disappear.
−
* Shift+b : Turns the background magenta
+
* Shift+b : Turns the background magenta.
 +
 
 +
'''To Take Screenshots In Ganesha Dx'''
 +
 
 +
* Change the Background of the map to Magenta, or another uncommon color, using the the ''Background Colors'' fields on the Map panel. Make sure both are the same exact color. You can drag one colored box onto the other to clone it.
 +
* Press F12 or go to ''View -> Screenshot Mode''. This will hide all UI elements.
 +
* Use the Left, Right, and Down arrow keys to position the camera so that it matches in-game views. Take a screenshot from all four corners.
 +
 
 +
'''Naming your Screenshots'''
  
−
PS: The following filenames must use underscores _ instead of spaces!
+
The following filenames must use underscores _ instead of spaces!
  
 
{| class="wikitable"
 
{| class="wikitable"
Line 53: Line 72:
 
|}
 
|}
  
−
Edit the screenshots with Photoshop/GraphicsGale/Affinity Photo or whatever you prefer in order to set Magenta to a transparent color and to crop the images to their smallest sizes.
+
'''Editing the Screenshots'''
 +
 
 +
* Open the screenshots with Photoshop/GraphicsGale/Affinity Photo or whatever you prefer.
 +
* Remove the Magenta color
 +
** Make a new layer and copy the background layer to it. Delete the background layer. Use the Magic Wand tool to select the Magenta color, and press Delete.
 +
** OR if your editor supports it, set Magenta to a transparent color.
 +
* Crop the images so that they are between 400 and 600 pixels wide.
 +
 
 +
'''Uploading the Screenshots'''
  
 
Upload all of these files in one go with [[Special:BatchUpload]]
 
Upload all of these files in one go with [[Special:BatchUpload]]
  
−
Create a new page with the map_identifier as the title with the following contents:
+
== Exporting the 3D View ==
 +
 
 +
* In Ganesha Dx, go to ''Edit -> Export to GlB'' or press ''Ctrl + Shift + E''.
 +
* Make sure the box is checked for ''Export with Unlit Materials''.
 +
* Save the file as ''map_identifier.glb''.
 +
* Upload it using the same uploader as you did with the Screenshots.
 +
 
 +
== Creating the Wiki Page ==
 +
 
 +
Create a new page with the ''map_identifier'' as the title with the following contents:
  
 
<nowiki>
 
<nowiki>
Line 74: Line 110:
  
 
Preview to make sure everything is working, then save!
 
Preview to make sure everything is working, then save!
 +
 +
== Adding Terrain Data ==
 +
 +
'''Getting the Terrain Code Without Ganesha Dx'''
 +
 +
You must know which mesh file you want to extract the information from. Normally that will be the first map state mesh.
 +
 +
There's no real simple way to determine which file it is, other than that it's not a texture file (i.e. it will be under 128kb) and will be saved by Ganesha.
 +
 +
The first map state's mesh file's ISO sector is located at 0x0000001C and is 4 bytes long... you might be able to cross-reference with the vanilla map list here matching with the Sector Start: https://ffhacktics.com/wiki/MAP/
 +
 +
Open up the Mesh file in a hex editor and at 0x00000068 you should find the offset for Terrain Data. It is stored in Little-Endian so make sure to byte-flip.
 +
 +
GoTo that offset, and copy 4098 (0x1002) bytes at that position. The 2 extra bytes are the width and length of the map.
 +
 +
'''Getting the Terrain Code With Ganesha Dx'''
 +
 +
Open your Map in Ganesha Dx and go to ''View -> Show Raw Terrain Data''. Press the ''Generate'' Button and then press the ''Copy to Clipboard'' Button. Every time you make a change to your Terrain, you must click the ''Generate'' Button again.
 +
 +
'''Where to put the Code'''
 +
 +
Paste the result as the second argument of the #printmap function as below. There can be spaces between each byte or none, either way it will work.
 +
 +
''Note: I replaced most bytes with "..." to not fill up your screen''
 +
 +
<nowiki>
 +
  {{ #printmap: FFTHacker_Alternate_Sweegy_Woods | 0A 09 00 00 01 ... 01 00 }}
 +
  [[Category:Maps]]
 +
  [[Category:Custom Maps]]
 +
</nowiki>
 +
 +
[[Category:Tutorials]]

Latest revision as of 19:42, 14 June 2022

Choose a map_identifier, for example: FFTHacker_Alternate_Sweegy_Woods

Taking Screenshots

Use either Map2GL or Ganesha Dx to take Screenshots. You need all five of the following screenshots:

  • Viewing from the SW corner, Bottom Elevation
  • Viewing from the SE corner, Bottom Elevation
  • Viewing from the NW corner, Bottom Elevation
  • Viewing from the NE corner, Bottom Elevation
  • Viewing straight down with the SW corner in the bottom left

To Take Screenshots In Map2GL Map Viewer

Press the following keys to adjust the map viewer:

  • X : Makes the axis lines disappear.
  • Shift+b : Turns the background magenta.

To Take Screenshots In Ganesha Dx

  • Change the Background of the map to Magenta, or another uncommon color, using the the Background Colors fields on the Map panel. Make sure both are the same exact color. You can drag one colored box onto the other to clone it.
  • Press F12 or go to View -> Screenshot Mode. This will hide all UI elements.
  • Use the Left, Right, and Down arrow keys to position the camera so that it matches in-game views. Take a screenshot from all four corners.

Naming your Screenshots

The following filenames must use underscores _ instead of spaces!

Azimuth Altitude Magnify Field of View Suffix Example
0° 90° 100% Isometric _bev.png FFTHacker_Alternate_Sweegy_Woods_bev.png
45.0° 30° 100% Isometric _45.png FFTHacker_Alternate_Sweegy_Woods_45.png
135.0° 30° 100% Isometric _135.png FFTHacker_Alternate_Sweegy_Woods_135.png
225.0° 30° 100% Isometric _225.png FFTHacker_Alternate_Sweegy_Woods_225.png
315.0° 30° 100% Isometric _315.png FFTHacker_Alternate_Sweegy_Woods_315.png

Editing the Screenshots

  • Open the screenshots with Photoshop/GraphicsGale/Affinity Photo or whatever you prefer.
  • Remove the Magenta color
    • Make a new layer and copy the background layer to it. Delete the background layer. Use the Magic Wand tool to select the Magenta color, and press Delete.
    • OR if your editor supports it, set Magenta to a transparent color.
  • Crop the images so that they are between 400 and 600 pixels wide.

Uploading the Screenshots

Upload all of these files in one go with Special:BatchUpload

Exporting the 3D View

  • In Ganesha Dx, go to Edit -> Export to GlB or press Ctrl + Shift + E.
  • Make sure the box is checked for Export with Unlit Materials.
  • Save the file as map_identifier.glb.
  • Upload it using the same uploader as you did with the Screenshots.

Creating the Wiki Page

Create a new page with the map_identifier as the title with the following contents:

{{ #printmap: map_identifier }} [[Category:Maps]] [[Category:Custom Maps]]

For example:

{{ #printmap: FFTHacker_Alternate_Sweegy_Woods }} [[Category:Maps]] [[Category:Custom Maps]]

Preview to make sure everything is working, then save!

Adding Terrain Data

Getting the Terrain Code Without Ganesha Dx

You must know which mesh file you want to extract the information from. Normally that will be the first map state mesh.

There's no real simple way to determine which file it is, other than that it's not a texture file (i.e. it will be under 128kb) and will be saved by Ganesha.

The first map state's mesh file's ISO sector is located at 0x0000001C and is 4 bytes long... you might be able to cross-reference with the vanilla map list here matching with the Sector Start: https://ffhacktics.com/wiki/MAP/

Open up the Mesh file in a hex editor and at 0x00000068 you should find the offset for Terrain Data. It is stored in Little-Endian so make sure to byte-flip.

GoTo that offset, and copy 4098 (0x1002) bytes at that position. The 2 extra bytes are the width and length of the map.

Getting the Terrain Code With Ganesha Dx

Open your Map in Ganesha Dx and go to View -> Show Raw Terrain Data. Press the Generate Button and then press the Copy to Clipboard Button. Every time you make a change to your Terrain, you must click the Generate Button again.

Where to put the Code

Paste the result as the second argument of the #printmap function as below. There can be spaces between each byte or none, either way it will work.

Note: I replaced most bytes with "..." to not fill up your screen

{{ #printmap: FFTHacker_Alternate_Sweegy_Woods | 0A 09 00 00 01 ... 01 00 }} [[Category:Maps]] [[Category:Custom Maps]]

Retrieved from "https://ffhacktics.com/w/index.php?title=Tutorial:_Adding_custom_maps_to_the_wiki&oldid=24085"