Creating Ground Maps: Difference between revisions

From PMDOWiki
IDK (talk | contribs)
pile of images
IDK (talk | contribs)
images and formatting
Line 1: Line 1:
This tutorial will cover the steps needed to create a Ground Map out of existing PMD map sheets.  We will attempt to recreate Temporal Pinnacle from Explorers of Time/Darkness.
This tutorial will cover the steps needed to create a Ground Map out of existing PMD map sheets.  We will attempt to recreate Temporal Pinnacle from Explorers of Time/Darkness.


Before starting, it is highly recommended you begin with your game set to a mod, so that you’re editing a mod instead of the base game.  The tutorial will move forward with that assumption.
Before starting, it is highly recommended you begin with your game set to a mod as covered in the [[Modding Intro]], so that you’re editing a mod instead of the base game.  The tutorial will move forward with that assumption.
Tilesheet Import
 
== Tilesheet Import ==
To begin, we need the original spritesheet.  You can find one from Spriter’s Resource, Project Pokemon, etc.
To begin, we need the original spritesheet.  You can find one from Spriter’s Resource, Project Pokemon, etc.
https://www.spriters-resource.com/resources/sheets/111/114536.png?updated=1551214483
https://projectpokemon.org/home/gallery/image/77281-d30p42apng/


https://www.spriters-resource.com/resources/sheets/111/114536.png?updated=1551214483


https://projectpokemon.org/home/gallery/image/77281-d30p42apng/




This map consists of two components: The main map and the animated pedestal.  We will split them into separate sheets.


https://i.imgur.com/8vGCcWP.png


This map consists of two components: The main map and the animated pedestal.  We will split them into separate sheets.
https://i.imgur.com/8vGCcWP.png
https://i.imgur.com/ntHuzya.png  
https://i.imgur.com/ntHuzya.png  


We will be creating a map using 24x24-sized tiles, so we must make sure that both tilesets have dimensions that are multiples of 24.
We will be creating a map using 24x24-sized tiles, so we must make sure that both tilesets have dimensions that are multiples of 24.




Line 38: Line 24:
The Ground Editor can be found in the Data tab when running the game in dev mode:
The Ground Editor can be found in the Data tab when running the game in dev mode:


 
[[File:DevPanel_Data.png|frameless]]
 
 
 
 
 


When you open this editor from the title screen, it will load a blank ground map.
When you open this editor from the title screen, it will load a blank ground map.


[[File:GroundEditor_Intro.png|frameless]]


Now, import both TemporalPinnacle and TemporalPinnacleAnim from png:
Now, import both TemporalPinnacle and TemporalPinnacleAnim from png:


 
[[File:GroundEditor_PngToTileset.png|frameless]]
 
 
 
 
 
 
 
 
 
 
 
 


Both tilesets are now loaded:
Both tilesets are now loaded:


[[File:GroundEditor_TilesetLoaded.png|frameless]]


Now, load TemporalPinnacle into the map:
Now, load TemporalPinnacle into the map:


 
[[File:GroundEditor_TilesetToLayer.png|frameless]]
 
 
 
 


This will load the entire tileset into the currently chosen layer:
This will load the entire tileset into the currently chosen layer:


 
[[File:GroundEditor_FulTilesetMap.png|frameless]]
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


Navigate to the pedestal with WASD, and press F1 to view the XY coordinates of the cursor.
Navigate to the pedestal with WASD, and press F1 to view the XY coordinates of the cursor.


 
[[File:GroundEditor_Navigation.png|frameless]]
 
 
 
 
 
 
 
 
 
 
 
 
 
 


Next, add a new layer to the map for the animations:
Next, add a new layer to the map for the animations:


[[File:GroundEditor_Layers.png|frameless]]


Double-click the layers to change their names:
Double-click the layers to change their names:


 
[[File:GroundEditor_LayerEdit.png|frameless]]
 
 
 
 
 


Click on TemporalPinnacleAnim in the tileset list, and click on any position in the tileset to choose it:
Click on TemporalPinnacleAnim in the tileset list, and click on any position in the tileset to choose it:


[[File:GroundEditor_TileSelect.png|frameless]]


Click on the top-left tile, and then Right-Click the end of the first animation to multi-select:


 
[[File:GroundEditor_TileSelectMulti.png|frameless]]
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Right-Click to multi-select:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


Turn on animations and set the frame length to 30:
Turn on animations and set the frame length to 30:


 
[[File:GroundEditor_AnimSelect.png|frameless]]
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


Shift+Click to automatically add new frames to the animation.  Shift+Right Click to do it while preserving the multiselect:
Shift+Click to automatically add new frames to the animation.  Shift+Right Click to do it while preserving the multiselect:


 
[[File:GroundEditor_AnimAddFrame.png|frameless]]
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


Do this for the third frame, and then the second frame again to create a full animation cycle:
Do this for the third frame, and then the second frame again to create a full animation cycle:


[[File:GroundEditor_AnimAddFrameFinished.png|frameless]]


Click on the map to place your animation:


 
[[File:GroundEditor_MapAnimated.gif|frameless]]
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Click on the map to place your animation:


The pedestal should now animate.
The pedestal should now animate.




Switch to the map properties and set the name and music:
Switch to the map properties and set the name and music:


[[File:GroundEditor_Properties.png|frameless]]


Now save the map.  You must save it in the Data/Ground directory of your mod:


[[File:GroundEditor_SaveAs.png|frameless]]


 
[[File:GroundEditor_SaveFolder.png|frameless]]
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Now save the map. You must save it in the Data/Ground directory of your mod:
 




Once saved, you can test it walking around in it:
Once saved, you can test it walking around in it:


[[File:GroundEditor_SaveAndTest.png|frameless]]


You will be able to walk around the map, and outside of it.
You will be able to walk around the map, and outside of it.


We are missing a spawn point, so the game spawns us at X0 Y0.
[[File:GroundEditor_Test1.png|frameless]]
There are no walls.
Darkness shows at the end of the map.
We need to fix all of these issues.


There are several issues we need to fix:
* We are missing a spawn point, so the game spawns us at X0 Y0.
* There are no walls.
* Darkness shows at the end of the map.




== Walls and Entities ==
Click on Edit Ground in the Dev Controls to reopen the editor:


Walls and Entities
[[File:GroundEditor_Walls.png|frameless]]
Click on Edit Ground in the Dev Controls to reopen the editor:


Go to the Walls tab, and click “Show Walls”.  Click and drag on the map to draw walls:
Go to the Walls tab, and click “Show Walls”.  Click and drag on the map to draw walls:
[[File:GroundEditor_WallsDrawn.png|frameless]]


You can also use the Rectangle and Fill tool to assist in this.
You can also use the Rectangle and Fill tool to assist in this.
Next, switch to the Entities tab:
Next, switch to the Entities tab:
[[File:GroundEditor_Marker.png|frameless]]


Switch to “Add New” mode, and choose an object type of Marker.  Markers are spawn points.
Switch to “Add New” mode, and choose an object type of Marker.  Markers are spawn points.
Line 309: Line 128:


This will be the main spawn point for the map.  Click on the map to place the entity, seen below:
This will be the main spawn point for the map.  Click on the map to place the entity, seen below:
[[File:GroundEditor_MarkerAdded.png|frameless]]


Note that if you place the entity in the wrong spot initially, you can move it using the arrow keys.  CTRL+Arrow keys moves the entity by 8 pixels.
Note that if you place the entity in the wrong spot initially, you can move it using the arrow keys.  CTRL+Arrow keys moves the entity by 8 pixels.
Line 314: Line 135:
Let’s also add Dialga to this map.
Let’s also add Dialga to this map.
Switch to Add New mode, and choose an object type of Character.  Name it Dialga.
Switch to Add New mode, and choose an object type of Character.  Name it Dialga.
[[File:GroundEditor_Character.png|frameless]]


Set the Direction to Down.
Set the Direction to Down.
Alter the appearance to be Dialga.
Alter the appearance to be Dialga.
When we use this character for a future cutscene, it will be waiting at the top.
When we use this character for a future cutscene, it will be waiting at the end of a dungeon.
 
[[File:GroundEditor_CharacterAdded.png|frameless]]


You can zoom in using scroll wheel for more precise adjustments.
You can zoom in using scroll wheel for more precise adjustments.
F1 can be used to tell positioning.  It’s the pair of coordinates on the top-right labeled “OBJ”.
F1 can be used to tell positioning.  It’s the pair of coordinates on the top-right labeled “OBJ”.
Next, switch to the Properties tab:
Next, switch to the Properties tab:
[[File:GroundEditor_Clamp.png|frameless]]


Set the Scroll Edge to Clamp.
Set the Scroll Edge to Clamp.
Line 327: Line 154:


Save and Test.
Save and Test.
[[File:GroundEditor_Test2.png|frameless]]


You should now have a properly blocked, and explorable map.
You should now have a properly blocked, and explorable map.
Accessing the Map
 
== Accessing the Map ==
Your ground map currently exists as a file.  However, it must also be made accessible.  To do this, you must add it to an existing zone.
Your ground map currently exists as a file.  However, it must also be made accessible.  To do this, you must add it to an existing zone.
[[File:DevPanel_Data.png|frameless]]
[[File:DataEditor_ZoneList.png|frameless]]


Go to the Data tab in the Dev Controls, and click on Zones.  Double-click on Guildmaster Island.
Go to the Data tab in the Dev Controls, and click on Zones.  Double-click on Guildmaster Island.
Scroll down to the Ground Maps section.
Scroll down to the Ground Maps section.
[[File:GroundEditor_ZoneEditor.png|frameless]]


Add your map to the end of this list.
Add your map to the end of this list.
[[File:GroundEditor_ZoneEditorAdded.png|frameless]]


Temporal Pinnacle now exists as a part of the Guildmaster Island zone.
Temporal Pinnacle now exists as a part of the Guildmaster Island zone.
You can dev-travel to it by using the Travel Tab:
You can dev-travel to it by using the Travel Tab:


[[File:GroundEditor_Travel.png|frameless]]


With these settings, click Enter Ground to travel to the ground map.
With these settings, click Enter Ground to travel to the ground map.
[[File:GroundEditor_Test3.png|frameless]]


We still need to make the ground map accessible by normal play.  It’s time to edit the script.
We still need to make the ground map accessible by normal play.  It’s time to edit the script.


We will be adding Temporal Pinnacle to the list of accessible travel destinations in base camp:
We will be adding Temporal Pinnacle to the list of accessible travel destinations in base camp:
[[File:GroundEditor_DungeonMenu.png|frameless]]


We will not require any progress to unlock it.
We will not require any progress to unlock it.




Navigate to <code>Data/Script/ground/</code> in your PMDO folder.


 
[[File:GroundEditor_ScriptFolder.png|frameless]]
 
Navigate to Data/Script/ground/ in your PMDO folder.


This is where scripting for every ground map in the base game is stored.  When making mods that change scripts, we need to make a copy from the base game and place it in our mod.
This is where scripting for every ground map in the base game is stored.  When making mods that change scripts, we need to make a copy from the base game and place it in our mod.
Copy the base_camp folder.
Copy the <code>base_camp</code> folder.


And then paste the copy in the Data/Script/ground/ folder in your mod’s folder.
[[File:GroundEditor_BaseFolder.png|frameless]]


And then paste the copy in the <code>Data/Script/ground/</code> folder in your mod’s folder.




Next, Go into the base_camp folder, and open <code>init.lua</code> in a text editor (Notepad++ recommended)


 
[[File:GroundEditor_ScriptBaseCamp.png|frameless]]
 
 
 
 
 
 
 
 
 
 
 
Next, Go into the base_camp folder, and open init.lua in a text editor (Notepad++ recommended)


We are going to edit the north exit to include temporal pinnacle.
We are going to edit the north exit to include temporal pinnacle.
Line 381: Line 212:




Scroll down to the function <code>base_camp.North_Exit_Touch</code>


[[File:GroundEditor_ScriptNorthExitTouch.png|frameless]]


The list of ground entrances is defined here.
Add one more, for Temporal Pinnacle:


<code>{Flag=true,Zone=1,ID=13,Entry=0}</code>


[[File:GroundEditor_ScriptAddGround.png|frameless]]


* Flag stands for the save flag that activates access to this ground map.  We set it to true because we always want it unlocked from the start.
* Zone stands for the zone of the location.  Guildmaster Island is Zone 1.
* ID is the ground map number of the location.  Temporal Pinnacle, being at the end of the list, is 13.
* Entry is the index of the entry point for the ground map.  We set it to 0, for the first entry point in the ground map.


Scroll down to the function base_camp.North_Exit_Touch
The list of ground entrances is defined here.
Add one more, for Temporal Pinnacle:
{Flag=true,Zone=1,ID=13,Entry=0}
Flag stands for the save flag that activates access to this ground map.  We set it to true because we always want it unlocked from the start.
Zone stands for the zone of the location.  Guildmaster Island is Zone 1.
ID is the ground map number of the location.  Temporal Pinnacle, being at the end of the list, is 13.
Entry is the index of the entry point for the ground map.  We set it to 0, for the first entry point in the ground map.
Save the file.
Save the file.


Line 413: Line 233:


To bring these changes into effect, either restart the game or reload the scripts.  There’s a button for that in the Scripts tab:
To bring these changes into effect, either restart the game or reload the scripts.  There’s a button for that in the Scripts tab:
[[File:DevPanel_Script.png|frameless]]


You should now be able to access Temporal Pinnacle.
You should now be able to access Temporal Pinnacle.


Next, we will add scripts.
[[File:GroundEditor_DungeonMenuAdded.png|frameless]]


Next, we will add scripts for the cutscene.




== Scripting a Cutscene ==
Navigate to <code>Data/Script/Ground/temporal_pinnacle</code> in your mod folder.  It should have been created when you saved the ground map.  Open <code>init.lua</code>.


[[File:GroundEditor_ScriptPreCutscene.png|frameless]]


Scripting a Cutscene
Navigate to Data/Script/Ground/temporal_pinnacle in your mod folder.  It should have been created when you saved the ground map.  Open init.lua.


You should see an autogenerated script file with stubbed functions.
You should see an autogenerated script file with stubbed functions.


We are going to fill out the Enter function with a cutscene similar to the rematch dialogue against Dialga in PMD2: https://www.youtube.com/watch?v=750i5NMrgBU  
We are going to fill out the Enter function with a cutscene similar to the rematch dialogue against Dialga in PMD2: https://www.youtube.com/watch?v=750i5NMrgBU
 
We will shorten and adapt this to fit one party member, but can extend it to 2 or more later on.
We will shorten and adapt this to fit one party member, but can extend it to 2 or more later on.


Make the following edits:
Make the following edits:


You can find more information about the available script commands in this document: Scripting Cheat Sheet
[[File:GroundEditor_ScriptPostCutscene.png|frameless]]




You can find more information about the available script commands in the [[Scripting Cheat Sheet]].




Save the file, and reload scripts.  Re-enter Temporal Pinnacle and the cutscene should play out.
Save the file, and reload scripts.  Re-enter Temporal Pinnacle and the cutscene should play out.


[[File:GroundEditor_TestFinal.gif|frameless]]


For now, we have made the boss cutscene kick you back to base camp.  To make this cutscene lead into an actual boss battle, we need to create the dungeon map.
For now, we have made the boss cutscene kick you back to base camp.  To make this cutscene lead into an actual boss battle, we need to create the dungeon map.
The dungeon map tutorial picks up where this one leaves off: Making Dungeon Maps  
The dungeon map tutorial picks up where this one leaves off: [[Making Dungeon Maps]]  
 
[[File:DataEditor_ZoneList.png|frameless]]


[[File:GroundEditor_AnimAddFrame.png|frameless]]
[[File:GroundEditor_AnimAddFrameFinished.png|frameless]]
[[File:GroundEditor_AnimSelect.png|frameless]]
[[File:GroundEditor_BaseFolder.png|frameless]]
[[File:GroundEditor_Character.png|frameless]]
[[File:GroundEditor_CharacterAdded.png|frameless]]
[[File:GroundEditor_Clamp.png|frameless]]
[[File:GroundEditor_DungeonMenu.png|frameless]]
[[File:GroundEditor_DungeonMenuAdded.png|frameless]]
[[File:GroundEditor_FulTilesetMap.png|frameless]]
[[File:GroundEditor_Intro.png|frameless]]
[[File:GroundEditor_LayerEdit.png|frameless]]
[[File:GroundEditor_Layers.png|frameless]]
[[File:GroundEditor_MapAnimated.gif|frameless]]
[[File:GroundEditor_Marker.png|frameless]]
[[File:GroundEditor_MarkerAdded.png|frameless]]
[[File:GroundEditor_Navigation.png|frameless]]
[[File:GroundEditor_PngToTileset.png|frameless]]
[[File:GroundEditor_Properties.png|frameless]]
[[File:GroundEditor_SaveAndTest.png|frameless]]
[[File:GroundEditor_SaveAs.png|frameless]]
[[File:GroundEditor_SaveFolder.png|frameless]]
[[File:GroundEditor_ScriptAddGround.png|frameless]]
[[File:GroundEditor_ScriptBaseCamp.png|frameless]]
[[File:GroundEditor_ScriptFolder.png|frameless]]
[[File:GroundEditor_ScriptNorthExitTouch.png|frameless]]
[[File:GroundEditor_ScriptPostCutscene.png|frameless]]
[[File:GroundEditor_ScriptPreCutscene.png|frameless]]
[[File:GroundEditor_Test1.png|frameless]]
[[File:GroundEditor_Test2.png|frameless]]
[[File:GroundEditor_Test3.png|frameless]]
[[File:GroundEditor_TestFinal.gif|frameless]]
[[File:GroundEditor_TileSelect.png|frameless]]
[[File:GroundEditor_TileSelectMulti.png|frameless]]
[[File:GroundEditor_TilesetLoaded.png|frameless]]
[[File:GroundEditor_TilesetToLayer.png|frameless]]
[[File:GroundEditor_Walls.png|frameless]]
[[File:GroundEditor_WallsDrawn.png|frameless]]
[[File:GroundEditor_ZoneEditor.png|frameless]]
[[File:GroundEditor_ZoneEditorAdded.png|frameless]]


[[Category:Modding Data]]
[[Category:Modding Data]]

Revision as of 01:38, 5 October 2022

This tutorial will cover the steps needed to create a Ground Map out of existing PMD map sheets. We will attempt to recreate Temporal Pinnacle from Explorers of Time/Darkness.

Before starting, it is highly recommended you begin with your game set to a mod as covered in the Modding Intro, so that you’re editing a mod instead of the base game. The tutorial will move forward with that assumption.

Tilesheet Import

To begin, we need the original spritesheet. You can find one from Spriter’s Resource, Project Pokemon, etc.

https://www.spriters-resource.com/resources/sheets/111/114536.png?updated=1551214483

https://projectpokemon.org/home/gallery/image/77281-d30p42apng/


This map consists of two components: The main map and the animated pedestal. We will split them into separate sheets.

https://i.imgur.com/8vGCcWP.png

https://i.imgur.com/ntHuzya.png


We will be creating a map using 24x24-sized tiles, so we must make sure that both tilesets have dimensions that are multiples of 24.


The Ground Editor can be found in the Data tab when running the game in dev mode:

When you open this editor from the title screen, it will load a blank ground map.

Now, import both TemporalPinnacle and TemporalPinnacleAnim from png:

Both tilesets are now loaded:

Now, load TemporalPinnacle into the map:

This will load the entire tileset into the currently chosen layer:

Navigate to the pedestal with WASD, and press F1 to view the XY coordinates of the cursor.

Next, add a new layer to the map for the animations:

Double-click the layers to change their names:

Click on TemporalPinnacleAnim in the tileset list, and click on any position in the tileset to choose it:

Click on the top-left tile, and then Right-Click the end of the first animation to multi-select:

Turn on animations and set the frame length to 30:

Shift+Click to automatically add new frames to the animation. Shift+Right Click to do it while preserving the multiselect:

Do this for the third frame, and then the second frame again to create a full animation cycle:

Click on the map to place your animation:

The pedestal should now animate.


Switch to the map properties and set the name and music:

Now save the map. You must save it in the Data/Ground directory of your mod:


Once saved, you can test it walking around in it:

You will be able to walk around the map, and outside of it.

There are several issues we need to fix:

  • We are missing a spawn point, so the game spawns us at X0 Y0.
  • There are no walls.
  • Darkness shows at the end of the map.


Walls and Entities

Click on Edit Ground in the Dev Controls to reopen the editor:

Go to the Walls tab, and click “Show Walls”. Click and drag on the map to draw walls:

You can also use the Rectangle and Fill tool to assist in this. Next, switch to the Entities tab:

Switch to “Add New” mode, and choose an object type of Marker. Markers are spawn points. Name it Entrance, set the Direction to Up.

This will be the main spawn point for the map. Click on the map to place the entity, seen below:

Note that if you place the entity in the wrong spot initially, you can move it using the arrow keys. CTRL+Arrow keys moves the entity by 8 pixels. If you placed the wrong type of entity entirely, you can delete with Right Click. Let’s also add Dialga to this map. Switch to Add New mode, and choose an object type of Character. Name it Dialga.

Set the Direction to Down. Alter the appearance to be Dialga. When we use this character for a future cutscene, it will be waiting at the end of a dungeon.

You can zoom in using scroll wheel for more precise adjustments. F1 can be used to tell positioning. It’s the pair of coordinates on the top-right labeled “OBJ”. Next, switch to the Properties tab:

Set the Scroll Edge to Clamp.


Save and Test.

You should now have a properly blocked, and explorable map.

Accessing the Map

Your ground map currently exists as a file. However, it must also be made accessible. To do this, you must add it to an existing zone.

Go to the Data tab in the Dev Controls, and click on Zones. Double-click on Guildmaster Island. Scroll down to the Ground Maps section.

Add your map to the end of this list.

Temporal Pinnacle now exists as a part of the Guildmaster Island zone. You can dev-travel to it by using the Travel Tab:

With these settings, click Enter Ground to travel to the ground map.

We still need to make the ground map accessible by normal play. It’s time to edit the script.

We will be adding Temporal Pinnacle to the list of accessible travel destinations in base camp:

We will not require any progress to unlock it.


Navigate to Data/Script/ground/ in your PMDO folder.

This is where scripting for every ground map in the base game is stored. When making mods that change scripts, we need to make a copy from the base game and place it in our mod. Copy the base_camp folder.

And then paste the copy in the Data/Script/ground/ folder in your mod’s folder.


Next, Go into the base_camp folder, and open init.lua in a text editor (Notepad++ recommended)

We are going to edit the north exit to include temporal pinnacle.


Scroll down to the function base_camp.North_Exit_Touch

The list of ground entrances is defined here. Add one more, for Temporal Pinnacle:

{Flag=true,Zone=1,ID=13,Entry=0}

  • Flag stands for the save flag that activates access to this ground map. We set it to true because we always want it unlocked from the start.
  • Zone stands for the zone of the location. Guildmaster Island is Zone 1.
  • ID is the ground map number of the location. Temporal Pinnacle, being at the end of the list, is 13.
  • Entry is the index of the entry point for the ground map. We set it to 0, for the first entry point in the ground map.

Save the file.


To bring these changes into effect, either restart the game or reload the scripts. There’s a button for that in the Scripts tab:

You should now be able to access Temporal Pinnacle.

Next, we will add scripts for the cutscene.


Scripting a Cutscene

Navigate to Data/Script/Ground/temporal_pinnacle in your mod folder. It should have been created when you saved the ground map. Open init.lua.


You should see an autogenerated script file with stubbed functions.

We are going to fill out the Enter function with a cutscene similar to the rematch dialogue against Dialga in PMD2: https://www.youtube.com/watch?v=750i5NMrgBU

We will shorten and adapt this to fit one party member, but can extend it to 2 or more later on.

Make the following edits:

File:GroundEditor ScriptPostCutscene.png


You can find more information about the available script commands in the Scripting Cheat Sheet.


Save the file, and reload scripts. Re-enter Temporal Pinnacle and the cutscene should play out.


For now, we have made the boss cutscene kick you back to base camp. To make this cutscene lead into an actual boss battle, we need to create the dungeon map. The dungeon map tutorial picks up where this one leaves off: Making Dungeon Maps