📄 pstttile.htm
字号:
<!--Header-->
<HTML>
<HEAD>
<TITLE>GPMega - Graphics Section - Tiling With Photoshop</TITLE>
<META NAME="DESCRIPTION" CONTENT="An informative tutorial on seamless tiling techniques using Photoshop. A must read if your creating any game that uses tiled graphics.">
</HEAD>
<BODY BGCOLOR=#000000 TEXT=#FFFFFF LINK=#00FF00 VLINK=#00FF00 ALINK=#0000FF>
<!--End Header-->
<!--Advertiser-->
<CENTER>
<TABLE>
<TR>
<TD>
<A HREF="http://www.ugo.com/">
<IMG SRC="/GPMega/ugologo120.gif" BORDER=0 WIDTH=120 HEIGHT=60></A>
</TD>
<TD>
<IMG SRC="/GPMega/sponsored.gif" WIDTH=468 HEIGHT=10><br><br>
<SCRIPT LANGUAGE= "JavaScript">
<!--
var now = new Date();
var random_num = now.getSeconds();
document.write("<A HREF='http://www.ugo.net/RealMedia/ads/click_nx.cgi/www.perplexed.com/GPMega/graphics/pstttile.htm/" + random_num + "/@Top'>");
document.write("<IMG SRC='http://www.ugo.net/RealMedia/ads/adstream_nx.cgi/www.perplexed.com/GPMega/graphics/pstttile.htm/" + random_num + "/@Top' BORDER='0' WIDTH='468' HEIGHT='60'></A>");
//-->
</SCRIPT>
</TD>
</TR>
</TABLE>
</CENTER>
<!--End Advertiser-->
<!--Splitter-->
<BR>
<BR>
<!--End Splitter-->
<!--Body-->
<FONT SIZE=2 FACE=Helvetica>
<STRONG>
<!--Top Navigation-->
<A NAME="top"></A>
<CENTER>
<TABLE WIDTH=75%>
<TR VALIGN=MIDDLE>
<TD ALIGN=LEFT>
<IMG SRC="gradsplit2.jpg" WIDTH=100% HEIGHT=1><BR><BR>
<A HREF="http://www.perplexed.com/GPMega/"><IMG SRC="logo.jpg" BORDER=0 ALT="Home" WIDTH=80 HEIGHT=47 ALIGN=CENTER></A>
<FONT COLOR=#666666 FACE=HELVETICA SIZE=-1><I>
This Article Is Taken From <A HREF="http://www.perplexed.com/GPMega/">The Game Programming MegaSite</A>, A Definitive Resource For Game Developers!
</I></FONT><BR>
<IMG SRC="gradsplit2.jpg" WIDTH=100% HEIGHT=1>
</TD>
</TR>
</TABLE>
</CENTER>
<BR><!--End Top Navigation-->
<!--Title-->
<H3 ALIGN=CENTER><font color="#FFF300">T</font><font color="#FFE700">i</font><font color="#FFDB00">l</font><font color="#FFCF00">i</font><font color="#FFC300">n</font><font color="#FFB700">g</font><font color="#FFAB00"> </font><font color="#FF9F00">W</font><font color="#FF9300">i</font><font color="#FF8700">t</font><font color="#FF7B00">h</font><font color="#FF6F00"> </font><font color="#FF6300">P</font><font color="#FF5700">h</font><font color="#FF4B00">o</font><font color="#FF3F00">t</font><font color="#FF3300">o</font><font color="#FF2700">s</font><font color="#FF1B00">h</font><font color="#FF0F00">o</font><font color="#FF0300">p</font><BR><FONT SIZE=-2>By: Robin Ward</FONT></H3>
<!--End Title-->
<P>What is a tile? A tile is like a regular bitmap or sprite, except it is meant to be repeated. For example, take a look at any NES scrolling game, like Super Mario Brothers. You抣l notice that all of the bricks look exactly the same. That is because the bricks have been drawn into a 16x16 tiled picture. When the picture is placed beside itself (for example, the steps at the end of the level), they seem to fit.
<P>The advantage of tiles is that you can save a lot of memory. This was especially important in the days of the NES, where EVERY game used tiles. By repeating a graphic over and over, you could save megabytes of memory. These days, tiles are used for repeating patterns in 3-D textures. For example, if you look at the top of the water in Mario 64, you抣l notice the same pattern repeated over and over again.
<P>It抯 not that hard, actually. First, start by creating a new canvas. Choose the size of your texture, preferably in powers of 2 (2, 4, 8, 16, 32, 64, 128, 256, etc). This is done to help the programmer speed up the game. The reason why this helps is another article altogether. For this example, I抣l use 128x128.
<P>After you have your canvas, draw the tile. Try to make it work as well as you can, by imagining that the edges of the texture will have to meet, so similar colors should be used on all opposing sides. Don抰 worry about getting it perfect right away, but remember that it will look stupid if the contrast between the sides is too obvious.
<P><center><img src="tile01.gif" WIDTH=128 HEIGHT=128></center>
<P>Once you抳e got your tile, go to filter->other->offset. Now, choose wrap around, and then for the width and height parameters, enter exactly half the size of your texture. For example, if your texture is 128x128, enter 64x64. If you texture is 128x64, enter 64x32. If you did it properly, it should look something like this:
<P><center><img src="tile02.gif" WIDTH=128 HEIGHT=128></center>
<P>This is what the edges of your texture would look like if you tiled it right now. You see, mine has this nasty cross-hair type thing. To get rid of that, use the smudge tool. Zoom in and eliminate the cross-hair to your best ability. Then, offset the texture back into place. If you did it properly, you will have created a tile with very little difficulty. Here is the final result, tiled 3 times over:
<P><center><img src="tile03.gif" WIDTH=128 HEIGHT=128><img src="tile03.gif" WIDTH=128 HEIGHT=128><img src="tile03.gif" WIDTH=128 HEIGHT=128></center></P>
<!--Bottom Navigation-->
<A NAME="bottom"></A>
<!--End Bottom Navigation-->
</STRONG>
</FONT>
<!--End Body-->
<!--Bottom-->
<BR>
<IMG SRC="gradbar.jpg">
<BR>
<FONT SIZE=2 COLOR=#8B8B8B FACE=Helvetica>
<I><font color="#FBFBFB">T</font><font color="#F7F7F7">h</font><font color="#F3F3F3">e</font><font color="#EFEFEF"> </font><font color="#EBEBEB">G</font><font color="#E7E7E7">a</font><font color="#E3E3E3">m</font><font color="#DFDFDF">e</font><font color="#DBDBDB"> </font><font color="#D7D7D7">P</font><font color="#D3D3D3">r</font><font color="#CFCFCF">o</font><font color="#CBCBCB">g</font><font color="#C7C7C7">r</font><font color="#C3C3C3">a</font><font color="#BFBFBF">m</font><font color="#BBBBBB">m</font><font color="#B7B7B7">i</font><font color="#B3B3B3">n</font><font color="#AFAFAF">g</font><font color="#ABABAB"> </font><font color="#A7A7A7">M</font><font color="#A3A3A3">e</font><font color="#9F9F9F">g</font><font color="#9B9B9B">a</font><font color="#979797">S</font><font color="#939393">i</font><font color="#8F8F8F">t</font><font color="#8B8B8B">e</font> - ⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -