Create an Rpg Game Using TeaJs-Shameless release ......

This article mainly explains how to use the TeaJs framework to draw a TileMap map.

(Resources used in this series are all materials in RpgMakerXp. If copyright is infringed, contact the author)

For ease of use, I wrote a TileMap editor in C # (. Net Framework2.0 Runtime is required)

Download the Demo and resources (this article must be downloaded !)

Online Demo

Open tileeditor.exe. The following page is displayed:

This is a blank initial interface. Now let's import resources.

Click the menu, file, and create. A dialog box for selecting images is displayed.

Here we select the created resource image.

The display effect is as follows:

OK. The map resource has been imported. So how can we draw the map we want?

It is easy to draw a map in the following steps:

1. Fill the earth surface

2. Draw the surface decoration (such as grass and flowers)

3. Draw object items (such as trees)

4. Draw scene items (such as treasure chest and tent)

Of course, the above steps can be totally disrupted as needed.

First, we fill the earth surface. This resource can only be done with the grass in the first grid. But do we need to fill it with one click? Will it be too slow!

Of course! However, I have already thought about it. You just need to right-click on the first page and select "fill this graph block to the selected layer ". Very convenient! As follows:

Very good. Now the whole earth surface is occupied. If you choose other items to fill in, the earth surface will inevitably be replaced, so we changed "Current edited layer" to "other Layer 1" in the lower left corner ".

Then you can test it by placing several items at will.

Very good! Now we save it directly.

Note! To make it easier for us to put images and map files in the TeaJs program.

The rest is too complicated ...... Ke, please check it in the source code!

Note: You must set up a server to run it!