CREATE A SIMPLE GAME WITH DOT WORLD MAKER

Dot World Maker is a full RPG Game maker within your browser and allows you to easily start creating your own world. This tutorial we will show you how to create a simple game using one of the default content offered. You will modify the maps, create a NPC and make a simple quest for your players. At the end of the process you will have a game nearly like our small demo available on the main page.

Where to start
At first you need to register to the site:
( https://www.dotworldmaker.com )


After the registration you will see the list of the games you own and the one you can currently play (public games). At the bottom of the game list a "Create Your Own Game" button is available, press it then provide a unique game name and press the "Create button". Your game will immediately be loaded and you will be within your own game with generated map some monsters wandering around and your avatar.


Edit the first map
Clearly the default game content is not a complete game by its own. On top of the screen a menu bar lets you access all the editor panels letting you edit all the aspects of your game. Let's start by editing the map. Press "Editors" => "Maps" and you will enter the map editor. This tool lets you edit the maps, placing the background tiles, objects, monsters, houses and even add actions on the maps. As any other editor panel you will see a "?" icon on the bottom right which leads to the editor's help page.

We should remove the monster just at the spawn point and to do so we activate the left bar button called "Monsters" (1) and then right click on the monster which is in the middle of the screen (2):

The map editor has many different operation mode which can be selected by selecting the appropriate button on the left bar. Once the action is selected you can left click on the map to execute the action or in most cases remove / cancel the action via right click.

Choose "Objects" in the left bar to place and remove map objects. On the bottom left of the map editor the list of possible objects appears and we shall select "tree_1". Place trees on the map by left clicking where you want them while to remove one simply right click on it. Build a wall formed with trees around the area where we want the player to be to avoid he/she will wander in a nearly infinite world. Using the arrow keys (or wasd keys) you can scroll the map.

The map object "tree_1" has a collision area set, and is therefore appropriate for this usage. Collision area of any map object can be edited via the "Art" => "Map Objects" panel.

We can now paint a little road on our map just to add some nice feeling and guide the player toward the house we will add later. To paint a road click the "Paths" action in the left menu bar and then start painting with the left mouse button pressed on the map. You can leave the mouse button pressed and drag around the mouse and a path will appear under your cursor. If you make a mistake you can simply right click on the tiles you want to revert and the editor will replace back the tiles previously present.

Clearly we have some grass and flowers laying on our path, to remove them select again the "Objects" action in the left menu bar and then right click those objects.

Time to put some sand area where we will place a house. To speed up the work and not place all the tiles manually we choose the action "Smart Tile" in the left menu bar and then pick the type "sand" in the selection list on the bottom left. Start painting on the map using the left mouse button as always. Again if you want to cancel some tiles use the right mouse button and the previous tile will be restored. You will see that the sand works well on the light green grass but not against the dark green:

To fix this switch to "grass" in the bottom left selection list and paint around the sand area. This time the map editor will make the transition on both side, from the grass to the sand and from the grass to the dark grass.

The only issue remaining is the transition between the sand area and the path we drawn previously, however we don't have tiles available for that therefore we need to use a work around: put some bushes on the transition area and cover the "mistake" for example using "tree_3" as it doesn't have a collision area and therefore allowing the player to walk through it:

Time to add a house over the sand area allowing the player to enter and meet our NPC (Non Playing Character). Select the action "Houses" in the left menu bar, and then click on the map where you want it. If the house is not placed where you want it, right click and the house will be removed.

Let's add a couple more objects on the map like a fire camp near the house and some tomb stones on the other end of the path as well as a small sign where the path is crossing. To do so we switch again the action "Objects" in the left menu bar then select the items we want to place from the bottom left selection list and place them on them on the map.

It is time to save the map using the left menu bar button "Save" and try to see the map live by selecting the top menu "Game" => "Play".


Add some particle effects
Note: If you use the free license particles effects are not available. It is however not a show stopper instead simply a "nice to have" feature and therefore don't worry, simply skip to the next section or if you want simply follow us to see how particles effects can be used while owning a standard license.

The demo uses a small particle effect running on the fire camp, let's add it in this game as well. We need to use the menu "Editors" => "Particles System Editor". While by default 2 particle systems are already present none are really suited for our need therefore we shall create a new one ourself. Press the "New" button at the bottom of the screen and you will get a new particle system called "system_1" selected and running (with the preview on the bottom right showing the effect).

Of course we don't want to keep the name "system_1" therefore click on the "Name" field in the top right area, and edit it with a more useful name like "fire camp".

Our particle effect doesn't look like a fire at all yet but don't worry, it's just matter of tweaking the particle system to get something we are pleased with. First let's set when a particle should die, which means how many animation frames a particle will last. This is done by changing the "Max Age" of the particle in our case the value of 100 is good enough.

By scrolling the property list (top right) till the bottom, you will see a drop down selection with the text "-- Add a new effect --". Click it and select the effect "Size". New properties appear in the list letting you change the size of the particles over time. Set the start size to 2, the start age size change to 0 and the end size to 10:

As soon as you change properties you will see the effect in real time on the preview area.

Clearly a fire should not be black it's therefore time to add another effect to change the color of the particles. Add as new effect "Color" and set as start color "#FFE000" and end color "#E00000"

By adding an "Opacity" effect we can tell the system to make the particles appear or disappear slowly over time. Let's add it and set the start age opacity change to "0" and we should have yet a much nicer effect.

Finally let's add a "Wave" effect to simulate a small wind and add some random movements to our particles. We don't need to tweak the parameters this time as the default seems to work pretty well.

Time to save the particle system using the bottom button "Save" and apply it to our fire camp. The Dot World Maker engine allows to use particle systems in many different ways but here we want to have it on a map object, therefore let's head to the menu "Art" => "Map Objects".

Choose the "fire_camp" object in the left list. On the top right part you will see the properties of this object, one of which is the "Particle Effect" which needs to be set to our "fire camp". Once done press the "Save" button at the bottom of the screen.

Go back to the game using the menu "Game" => "Play" and we see now our fire camp burning!

Create new zones
Dot World Maker's zones are like completely different maps which can use a different procedural generators. Useful for example for creating in house maps, caves, dungeons and more. In our case we will need 3 zones in total (an external map, an in house map and a cave).

Let's open the menu "Editors" => "Zones" and we see there is already one called "Base". This is where the player starts and which contains the default map. Don't modify it; instead add a new one by pressing the "Add" button on the bottom and tweak the parameters:

Basically we change the name of the zone, set the generator to "Constant" and set the base tile to "empty". This zone will be nothing else than an empty area used to paint the interior view of the house.

We create now another zone for the cave:

Beside the name of the zone we must choose a "Cave" generator, set the base tile as empty and walkable tile as "dirt".

With out 3 zones we are ready to move on therefore save using the bottom button "Save".

Edit the house and link it
We need to go back to the map editor and edit the inside of the house. Open the menu "Editors" => "Map" and choose from the top left "Zone" drop down the "in house" zone. This will bring a black map on screen.

We will now use manual background tiles to paint the interior. Choose first the "Background Tile" action from the left menu bar then scroll down the list of tiles on the bottom left and choose the dark gray tile. Paint the contour of a rectangle and to fill it simply press the "Ctrl" (control) key of the keyboard and left click within the rectangle. The map editor will fill the area for you.

Remains to paint the contour of the room and finally create an entrance as well as a stair going down.

While hovering on the bottom entrance of the room look at the X and Y coordinates you see on the left bar. Write those values down as we will need to set a map action from the outside map which brings us in the "in house" map as well as another action from the "in house" to the exterior. In this example the coordinates of the "in house" landing area could be x: 48, y: 156.

Save the map, and load the zone "Base" using the top left drop down "Zone". Again over just under the door of the house and write down the coordinate. In this example the coordinates could be x: 156, y: 129.

Time to add the map action allowing us to enter and exit the house. Select "Map Actions" in the left menu bar and click in front of the door.

Choose "Teleport" from the actions inside the drop down list "-- Select new action --". This action requires a X and Y coordinate as well as a zone name. Type in the coordinate of the in house entrance (in our case the 48, 156) and choose the zone "in house".

Save the map using the "Save" button on the left bar, and load the zone "in house" again. Click on the entrance of the house and add the action "Teleport" with the coordinate of the outside entrance (in our case 156, 129) and the zone set to "Base":

Let's save the map using the "Save" button on the left bar, and let's try to see if we can enter and exit the house. As always to test choose the menu "Game" => "Play". If everything goes fine you should be able to walk in front of the door of the house and get teleported inside the house, then walk away from the entrance and walk back toward it and get teleported outside the house.

We still need to add the links between the "in house" and the cave in the same way as well as add a stair tile within the cave to know where the teleport is.
Write the quest

With this engine you can write a story in multiple ways. For our small game we will use a quest which gives the player also a way to track the progress.

Open the menu "Editors" => "Quests" and click the "Add" button on the bottom left of the window. Using the same text as the demo game:
Name: Retrieve My Spoon
Description: Janet Grimtongue asked me to retrieve her spoon which she lost the last time she went searching mushrooms in the cave under her house. I should therefore use the stairs in the left side of her house and search the cave under. It seems there could be some monsters around so I must be careful.

Quests can contain multiple journal entries if a quest requires multiple updates for example. Quests are stored inside the player's journal and help players to keep track of what they need to do.

Press the "Save" button at the bottom and let's move on.

Objects
We will need now to create a new quest object called "Spoon". Objects can be either unique quest objects, consumable like potions or can wearable items like weapons and armors.

To edit game objects open the menu "Editors" => "Objects" and press the "New" button on the bottom left of the screen. Set the name to "Spoon" and add a "Drop Condition" called "Check False". This ensure that the player cannot drop it and in order to not lose the quest item (which would break the quest we are writing).

Press the "Save" button at the bottom.

NPC Dialog
NPC (short for Non Playing Character) are entities which can "talk" with your players. Use them to add the feeling of some life to your game, explain a story and sell items.

To edit NPC use the menu "Editors" => "NPC". Create a new NPC by pressing the bottom left "Add" button and give it the name "Janet Grimtongue". By default the engine gives each NPC a new random name, but you can either click the "Name" label to generate a new random name or type the name you want in the field.

The look field lets you define which character art is used for a given NPC. Choose here the look "woman_2".

On the bottom part you will see a large text area which lets you type what the NPC will say. The @name@ text will be replaced with the player name while you play the game.

On the top right side you see the list of all the dialogs the NPC has, and on the bottom right side you see all the answers possible for a given dialog.

It is easier to start first writing all the NPC dialogs and then link them with the answers. For this reason you shall find here the different dialogs:
1 Hi @name@!

What can I do for you today?
2 Yes please, I lost my spoon in the cave under my house. Could you please go look if you can find it? I simply don't have the time right now to do it myself as I must play with the crumbs.

You can find the cave entrance on the left side of my house. However be careful there could be some monsters wandering around. Take this mighty weapon, equip yourself (using the top left most icon) and go find my beloved spoon. Ooo before you leave take a few of those apples too, they may help you.

You know you always need a spoon when you search mushrooms.
3 Please bring back my spoon... I'm sad without it...
4 Nothing else I could give you to do... Sorry... Now please leave me play alone with the crumbs.
5 Thanks you! That was really what I needed to push the crumbs around. Can you leave me alone now? As you do too much wind and my crumbs get scared.

And by the way, if that wasn't exciting enough for you, why don't you create your own dotworld game next?
To add such dialogs simply click the "Add" button just under the "Dialogs" list on the top right.

It's time to link those dialogs together, and in our case all the dialogs are simply starting from the first one. So select again the first dialog (you see "Hi @name@! what can I do..." in the list) and then press the "Add" button on the bottom right of the screen under the "Answers" list.

The first answer is "I have your spoon!" which must link to "Thanks you! That was really what I needed to push the crumbs...". As you see the answers have "Actions" and "Conditions". Actions being small code executed when the player click this answer, and the conditions are checks that must be passed before the player sees this answer. Using those 2 simple mechanisms you can create complex dialogs and quests.

The action "Remove Item" allows to remove something from the player inventory. In this case it's the quest spoon. We need also to complete the quest which is done via the "Complete Quest" action. As condition we need simply to check if the player has the spoon with him/her, to do it we use the "Check Inventory" condition. Any number of conditions can be added in a single dialog answer however it means that all the conditions need to be met before the answer is displayed.

The second answer text is "Do you have a job for me?" and links back to "Nothing else I could give you to do..."

Here we check if the quest is finished, if yes then simply we need to answer there is nothing to do. The check needs the condition "Check Quest Completed" to do so.

The 3rd answer also contains the text "Do you have a job for me?" but links to "Please bring back my spoon..."

This answer requires that the quest is started but not finished, to do so we use "Check Quest Started" and the condition "Check Quest Not Completed".

The 4th answer also contains the text "Do you have a job for me?" but links to "Yes please, I lost my spoon in the cave under my house...."

Finally here we need to start the quest with the action "Start Quest" and check that the quest is not yet started with the condition "Check Quest Not Started".

Answers can be re-ordered using the buttons "To Top" and "To Bottom" found on the bottom right of the screen. Dialogs can be stopped by setting the "Jump to" to "-- Close Dialog --" which is also the default value.

We can now save using the "Save" button found at the bottom.

Place the NPC
Once the NPC is created it still needs to be placed on the map within the house. The operation is quite simple and requires to open the menu "Editors" => "Map" and edit the zone "in house". Select the "NPCs" action in the left bar and then left click on the map where you want the NPC. If you are not happy of the placement right click on it to remove it. Remember to save with the "Save" button found on the left bar.

Add the chest
The last piece of work remaining is to add a chest in the cave. We need now to edit the zone "cave". This time we will use the "Chest" action from the left bar, click on the map, and choose "chest_1" as Art and add "Spoon" as item. Don't forget to put a 1 to the number next to the item.

Map chests can have any art you want and can contain any number of items or stats (for example Money). For the player, the chests are objects which can be clicked on which shows a panel displaying the items you placed inside. Note that chests can be harvested only once.

Don't forget to save the map after the changes and you are finally ready to test your game.

That's it
You can now test your game, however after you did it once you will not be able to repeat it, for example in case something doesn't work as expected. So what to do to restart and test again? The simplest solution is to reset your player, to do so, open the menu "Game" => "Reset" and choose the "Reset Current Player". This will delete all your game information and restart. You can do this any number of time and test the different aspects of your game.

Congratulations! You finished your first game.