[tiled] r743 - website/src
tiled-svn at biggeruniverse.com
tiled-svn at biggeruniverse.com
Wed Jun 4 13:48:04 PDT 2008
Author: bjorn
Date: 2008-06-04 15:48:04 -0500 (Wed, 04 Jun 2008)
New Revision: 743
Removed:
website/src/page_tutorial.xml
Modified:
website/src/generate_page.xsl
Log:
Have a wiki! User contributions to the website now possible, and welcome!
Modified: website/src/generate_page.xsl
===================================================================
--- website/src/generate_page.xsl 2008-05-30 11:53:27 UTC (rev 742)
+++ website/src/generate_page.xsl 2008-06-04 20:48:04 UTC (rev 743)
@@ -40,7 +40,7 @@
<a href="screenshots.html">Screenshots</a>
<a href="downloads.html">Downloads</a>
<a href="contact.html">Contact</a>
- <a href="tutorial.html">Tutorials</a>
+ <a href="/wiki/Main_Page">Wiki</a>
<a href="tiled.jnlp">Start Now!</a>
</div>
</div>
Deleted: website/src/page_tutorial.xml
===================================================================
--- website/src/page_tutorial.xml 2008-05-30 11:53:27 UTC (rev 742)
+++ website/src/page_tutorial.xml 2008-06-04 20:48:04 UTC (rev 743)
@@ -1,145 +0,0 @@
-<page>
- <content>
- <h2>Tutorial 1: Creating a simple map in Tiled</h2>
-
- <h3>Introduction</h3>
- <p>
- While Tiled is meant to be easy to use, it has a learning curve like
- anything else. This tutorial is meant to help flatten the curve. In this
- tutorial we'll get you started on creating a new map, creating a
- tileset, editing and finally, saving.
- </p>
- <h3>A brave new map</h3>
- <div class="image right">
- <img src="files/fig1_1.png" alt="Fig. 1.1"/>
- <div class="caption"><b>Fig. 1.1:</b> Creating a new map</div>
- </div>
- <p>
- Let's begin by creating a new map from <b>File->New</b>. Once the
- <b>New Map Dialog</b> appears (Fig. 1.1), we will set the initial
- dimensions and the orientation. We will create a standard, orthogonal map
- as an example.
- </p>
- <p>
- The dimensions, or size in tiles, of the map will be 32 tiles wide by 32
- tiles high for our example. The dimensions of the individual tiles will
- be 24x24. This is the size of the tiles we will be using later, it is
- important to get this right when you start a new map. Click <b>OK</b>.
- </p>
- <p>
- We are now presented with the main Tiled editing window (Fig. 1.2). As
- you can see there are no tiles and only one layer, which is selected.
- We now need to bring in a tileset for our map. Maps can have any number
- of tilesets. For us, a single internal tileset will do. From the
- <b>Tilesets</b> menu, select <b>New tileset...</b>
- </p>
- <div class="image center">
- <img src="files/fig1_2.png" alt="Fig. 1.2"/>
- <div class="caption"><b>Fig. 1.2:</b> The main Tiled window</div>
- </div>
- <h3>On internal and external tilesets</h3>
- <p>
- Tilesets are not necessarily tied to a specific map. In Tiled, tilesets
- can be independent resources, which the maps can reference. By default,
- when you create a tileset, it'll store it in the map. If you want to use
- the same tileset in multiple maps, you can export it to a .tsx file and
- import the tileset into other maps you create.
- </p>
- <p>
- The tile images can be stored with the tileset as png, base64 encoded,
- or stored externally and referenced by the tileset.
- </p>
- <div class="note">
- <b>Note:</b> When we talk about a tileset, we mean the set as defined by
- the tileset element either within a map file or stored in a .tsx file,
- not the tileset image.
- </div>
- <h3>Adding a tileset</h3>
- <div class="image right">
- <img src="files/fig1_3.png" alt="Fig. 1.3"/>
- <div class="caption"><b>Fig. 1.3:</b> Creating a new tileset</div>
- </div>
- <p>
- Once at the <b>New tileset</b> window (Fig. 1.3), we will name our set to
- make it easier to recognize it later. We have a tileset image
- (<a href="files/tiles_pipes.png">pipe tiles</a>), so we check
- <b>Reference tileset image</b>, and click <b>Browse</b> to find our
- image. Since we have no frame or grid around the tiles in the set image,
- we leave <b>Tile spacing</b> on 0. Click <b>OK</b>.
- </p>
- <h3>The final steps, drawing and saving</h3>
- <p>
- Now that a tileset has been added to the map, you can click the collapsed
- button in the bottom left and the tile palette dialog will pop-up. You
- can adjust the width of the palette so that the number of tiles shown
- vertically match the tileset image. While editing you can leave the
- tileset palette dialog open for easy access to your tiles.
- </p>
- <p>
- With a tile and the pencil selected, you can start drawing tiles on your
- map. Also try out the fill, eraser and eye dropper tools.
- </p>
- <div class="note">
- <b>Hint:</b> While you can select the eye dropper to select a tile from
- the map, right clicking on the map while any tool is selected will do the
- same.
- </div>
- <p>
- Finally safe your map using <b>File->Save</b>. Choose a name like
- <span class="code">tutorial1.tmx</span>.
- </p>
-
- <h2>Tutorial 2: Examining the map format</h2>
- <p>
- In our second tutorial we shall take a look at the map format used by
- Tiled. Here's the what the contents look like for the file we just
- created:
- </p>
- <pre><?xml version="1.0" ?>
-<map orientation="orthogonal" width="32" height="32" tilewidth="24" tileheight="24">
- <tileset firstgid="1" name="Sewers" tilewidth="24" tileheight="24">
- <image source="tiledweb/files/tiles_pipes.png"/>
- </tileset>
- <layer name="Layer 0">
- <data encoding="base64" compression="gzip">
- H4sIAAAAAAAAAO3NoREAMAgEsLedAfafE4+s6l0jolNJiif18tt/Fj8AAMC9ARtYg28AEAAA
- </data>
- </layer>
-</map></pre>
- <p>
- This is an example of a minimal useful map file. Such a map file will
- have at least one tileset and at least one layer. Note that the
- information you filled in when you created the map is all stored in
- attributes of the map element.
- </p>
- <p>
- The same goes for the tileset. Note that the tile spacing, which we set
- to 0, is not stored. This is because 0 is the default, and assumed when
- it's left out. Many attributes have default values.
- </p>
- <div class="note">
- <b>Hint:</b> While Tiled itself doesn't offer you a way to change the
- parameters you entered when creating the map yet, it is easy to change
- them yourself. For example when you decide to switch to a larger tile
- size or to rename your tileset image. This is one of the advantages of
- using XML.
- </div>
- <h3>Global tile IDs</h3>
- <p>
- A thing to note about the tileset is the
- <span class="code">firstgid</span> attribute. The map
- layer data is an array of 32-bit integers storing global tile ids.
- Global means that they span the possibly multiple tilesets that the map
- is using. Each tileset internally uses local tile ids, and the
- <span class="code">firstgid</span> attributes specifies how the local
- ids are mapped to global ids. Namely, a tile with id <b>A</b> in the
- tileset will be referred to with a number equal to
- <span class="code">firstgid</span>+<b>A</b> in the layer data.
- </p>
- <p>
- That's it for now. Keep the questions coming! Asking us questions is the
- best way to let us know which things are not quite understood yet and
- how our editor is used.
- </p>
- </content>
-</page>
More information about the tiled-commit
mailing list