<HTML>
<HEAD>
<TITLE>Tile Studio Tutorial</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#ffffff" LINK="#a0a0ef" VLINK="#e0a0e0" BACKGROUND="back4.jpg">
<CENTER>
<BR>
<TABLE WIDTH="92%" BACKGROUND="back3.jpg" BORDERCOLOR="#c0d0e0" BORDER="1">
<TR><TD>
<BR>
<P ALIGN="CENTER"><IMG SRC="logo.gif" WIDTH=48 HEIGHT=48></P>
<CENTER>
<FONT COLOR="#fff8b8">
<H1>TILE STUDIO TUTORIAL</H1>
</FONT>
By Mike Wiering / University of Nijmegen
<BR><BR>
<TABLE WIDTH="94%" BORDER="0">
<TR><TD>
<FONT COLOR="#fff8b8">
<H3>Contents</H3>
</FONT>
<UL>
<A HREF="#WhenToUseTS">When to use Tile Studio</A><BR>
<A HREF="#ImportingTiles">Importing Tiles</A><BR>
<A HREF="#Colors">Selecting Colors</A><BR>
<A HREF="#PalMan">The Palette Manager</A><BR>
<A HREF="#DrawingTools">Drawing Tools</A><BR>
<A HREF="#MapEditor">The Map Editor</A><BR>
<A HREF="#BoundsAndMapCodes">Bounds and Map Codes</A><BR>
<A HREF="#Animation">Animation</A><BR>
<A HREF="#PovRay">Importing PovRay animations</A><BR>
<A HREF="#CreateTSD">Creating a Tile Studio Definition (.tsd) file</A><BR>
<A HREF="#GeneratingCode">Generating Code</A><BR>
</UL>
<FONT COLOR="#fff8b8">
<A NAME="WhenToUseTS"><H3>When to use Tile Studio</H3></A>
</FONT>
<UL>
Tile Studio is a combination of a <I>tile editor</I> and a <I>map
editor</I> and was made to design games. The program was not designed
to edit large bitmaps like normal drawing programs. Tile Studio works best
with small bitmaps (tiles) from 8x8 to about 64x64 pixels. However,
larger or smaller sizes can also be used.
<P>
With Tile Studio, you can only design graphics and levels, not complete
games. You will need a real programming language to write your actual
game. In order to use the graphics and levels you create, you will also
need (to create) an interface between Tile Studio and your programming
language (.tsd file). Besides, you will also need (to write) a library
for your language that can actually run your levels. At the moment, the
most complete library that can easily be used with Tile Studio is the
<A HREF="http://tilestudio.sf.net/cgl/">Clean Game Library</A>.
</UL>
<FONT COLOR="#fff8b8">
<A NAME="ImportingTiles"><H3>Importing Tiles</H3>
</FONT>
<UL>
With Tile Studio, you can easily <I>Import Tiles</I> from existing .BMP or
.PNG bitmaps (File | Import Tiles). This way, you can easily reuse tiles you
made before in other programs or use tiles from screenshots of other games.
<P>
<CENTER>
<A HREF="tut-imp1.jpg"><IMG SRC="tut-imp1-s.jpg" WIDTH="217" HEIGHT="175"
BORDER="0" ALT="Import dialog"></A><BR>
<FONT COLOR="#e0d0b8">
<I>Import tiles from any .BMP bitmap</I>
</FONT>
</CENTER>
<P>
There is an auto-detect button that can often find the size of the tiles
automatically once the transparent color has been set properly. You can set
the transparent color by clicking anywhere in the bitmap. Hold shift down to
select more than one color (as in the example). To see if your parameters
are correct, move the mouse pointer over the image and you will see the
separate tiles appear in the box at the bottom-right.
<P>
Each set of tiles (called <I>tile set</I> here) must have a unique
identifier (name). This identifier is used when you generate code for your
game. While programming your game, you can refer to identifiers you define
here.
<P>
If want to import tiles from several bitmaps, just import them one by one,
then copy all these tiles to a new tile set using the <I>Copy Tiles</I>
(Edit | Copy Tiles...). Finally, remove all the duplicate tiles with
<I>Remove Duplicates</I> from the <I>Tile</I> menu.
<P>
If you import tiles and then modify your original bitmap, you can re-import
the tiles into your current tile set by pressing F5 (<I>Refresh imported tiles</I>). This only works for
the tile set you imported, not for copies of it. Be careful: all changes
you have made to your tile set after importing it the first time will be
lost! Besides, if you add tiles, remove (duplicate) tiles, move tiles in
your tile set or change the dimensions of your imported bitmap, your maps
can be screwed up! So either edit your tiles inside Tile Studio or with your
external program, but not with both!
</UL>
<FONT COLOR="#fff8b8">
<A NAME="Colors"><H3>Selecting Colors</H3>
</FONT>
<UL>
By default, Tile Studio uses a smooth RGB palette. However, by pressing
Shift-P, you can switch to a different type of palette, which contains
horizontal and vertical shades of red, green and blue. This palette may
look a bit strange, it is formed by colors that have an equal RGB distance
to each other. The order of the colors can be changed at any time
by pressing Ctrl+P (<I>Rearrange Palette</I>). The color depth can also
be changed from 6 to 10 with Ctrl+6, Ctrl+7, Ctrl+8, Ctrl+9 and Ctrl+0.
At depth 6, only 6x6x6=216 colors are used, making your bitmaps suitable
for 256 color mode. At any time, tiles can be matched to the current
palette (Tile | Match Colors).
<P>
<CENTER>
<IMG SRC="tut-pal1.jpg" WIDTH="61" HEIGHT="123"
BORDER="0" ALT="Palette">
<IMG SRC="tut-col1.jpg" WIDTH="118" HEIGHT="32"
BORDER="0" ALT="Color pattern">
<BR>
<FONT COLOR="#e0d0b8">
<I>The color palette at depth 6 (left) and a color pattern (right)</I>
</FONT>
</CENTER>
<P>
To select a color, click the palette with the left button. The selected
color is displayed in the box under the palette at the left. By clicking
in this box you can select any RGB color from a color dialog. You can
also select a color with the right mouse button. This color will then be
displayed as the transparent color. To reset it, click in the (transparent)
box at the center.
<P>
Whenever you select a color (with the left mouse button) a color pattern
appears in the box at the right. If you click again without moving your
mouse pointer, the colors will slightly change. Click several times to find
the colors you need. Then you make a selection in this box to indicate
which colors you want to use. An arrow appears at the top of this box.
You can move this arrow to the left and right by pressing the keys - and =.
Most of the drawing tools can work with such color patterns. Color patterns
you have used in your tiles are saved and can be selected with [ and ].
<P>
Normally, color patterns are based on one color (from dark to light). However,
you can create a color pattern from the color you have selected to a new color
by holding shift down.
<P>
When drawing, you can select a color from your bitmap by clicking with
the right button. Its also possible to get a separate palette of all the
colors used in your tiles by pressing Ctrl+U.
</UL>
<FONT COLOR="#fff8b8">
<A NAME="PalMan"><H3>The Palette Manager</H3>
</FONT>
<UL>
Tile Studio can be used for projects with palette based graphics. Palettes
may contain up to 256 entries. Part of a palette may be left undefined (so
you can reserve those non-preset entries for other things).
Each tile set can have it's own palette, but one palette can be used for
several tile sets. You can create palettes with the palette manager
(Ctrl+F9). You can edit each color separately and make smooth transitions
between colors (hold Shift down). But you can also import your palette,
generated it or create it from the colors you have used in your tile set
so far.
<P>
<CENTER>
<A HREF="tut-palman.jpg"><IMG SRC="tut-palman-s.jpg" WIDTH="200" HEIGHT="246"
BORDER="0" ALT="Palette manager"></A><BR>
<FONT COLOR="#e0d0b8">
<I>The Palette Manager</I>
</FONT>
</CENTER>
<P>
Normally, its best to create your palette after drawing your tiles.
Press Ctrl+U so you have a panel showing all t
评论3