📄 menupic.htm
字号:
<!--Header-->
<HTML>
<HEAD>
<TITLE>GPMega - Graphics Section - Creating A Menu Graphic</TITLE>
<META NAME="DESCRIPTION" CONTENT="A graphical creation tutorial on creating a cool looking main menu for your game.">
</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/menupic.htm/" + random_num + "/@Top'>");
document.write("<IMG SRC='http://www.ugo.net/RealMedia/ads/adstream_nx.cgi/www.perplexed.com/GPMega/graphics/menupic.htm/" + random_num + "/@Top' BORDER='0' WIDTH='468' HEIGHT='60'></A>");
//-->
</SCRIPT>
</TD>
</TR>
</TABLE>
</CENTER>
<!--End Advertiser-->
<!--Splitter-->
<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="#FFF400">C</font><font color="#FFE900">r</font><font color="#FFDE00">e</font><font color="#FFD300">a</font><font color="#FFC800">t</font><font color="#FFBD00">i</font><font color="#FFB200">n</font><font color="#FFA700">g</font><font color="#FF9C00"> </font><font color="#FF9100">A</font><font color="#FF8600"> </font><font color="#FF7B00">M</font><font color="#FF7000">e</font><font color="#FF6500">n</font><font color="#FF5A00">u</font><font color="#FF4F00"> </font><font color="#FF4400">G</font><font color="#FF3900">r</font><font color="#FF2E00">a</font><font color="#FF2300">p</font><font color="#FF1800">h</font><font color="#FF0D00">i</font><font color="#FF0200">c</font><BR><FONT SIZE=-2>By: <A HREF="mailto:darklord@darknet.net">Steve King</A></FONT></H3>
<!--End Title-->
<P>I've noticed there aren't too many Photoshop tutorials on game design web sites, and
the ones that are there aren't too advanced.. (how to make easy drop shadows,
etc.. boring.) I decided to try making my own game graphics tutorial, but this
same technique would work exactly the same for web pages, so I hope at least
someone finds it useful! For my computers class I'm working on a game called
"Planet of Darkness". In this tutorial, I'm going to create a simple
menu interface based on the one I did for the game.
<P>Once you have the basic idea for your menu in mind, and
you know the size the menu will be, you can start creating the graphic.. Since
my game has a futuristic theme to it, I decided to make the menu, game console,
etc. look like control panels. I found a really cool metal plate-type texture on
the net, and tiled it to my image. (see other tutorials for how to tile a
texture) This exact same procedure works for any texture, try it with one of the
ones from my <A href="http://www.darknet.net/fusion/textures/">Texture
Archive</A>, or one you find on the net, or one of your own. <I>(tip: With a
"natural" looking texture, such as wood, rock, etc. straight lines
often look too artificial. Try doing the shadows freehand, and don't rely on
selection boxes or using Shift to make a straight line..)</I>
<P ALIGN=CENTER><IMG SRC="menu1.jpg">
<P>I set my foreground color to black, and selected
the airbrush tool. 30% pressure, size 35 brush. By holding the Shift button
while using a tool, you can create straight lines without having to move your
mouse perfectly straight. I did this along the sides and the bottom, making it
look somewhat 3 dimensional. You can do this in the center as well, but there is
an easier way. I created a rectangular selection, feathered the selection to a 5
pixel radius, and filled with black. I did the same thing with a bit of the
image at the top, so I can later add in something to make this control panel
look more interesting.
<P ALIGN=CENTER><IMG SRC="menu2.jpg">
<P>I created a simple grid texture for the menu
background, but pretty much anything can be used depending on the texture you're
using for the menu. In my game the menu scrolls down from the top of the screen,
so I decided to add in something like a tube for the wires or whatever to be in.
I created this with the gradient tool, with my colors set to black and a
medium-light grey. I repeated this pattern, and then used the airbrush tool,
this time set to 100, to create a 3D shadow effect. Simple, huh?
<P ALIGN=CENTER><IMG SRC="menu3.jpg">
<P>Now for the easy part.. I chose LCD font, with a
bright green color, and placed some text.. Because I code with DJGPP &
Allegro (tho I am learning DirectX at the moment), I will make parts of this
menu bright pink so they will be transparent. That depends on what language
you're programming with however. As for graphics, you're done.. The rest is all
done with code. My game has the menu options light up when the mouse moves over
them, and it plays a sound when you click them. Not a lot of work, and it looks
much nicer than a plain text menu! ;)
<P ALIGN=CENTER><IMG SRC="menu4.jpg">
<P>In case anyone was wondering how I got the menu to scroll, it was extremely easy..
<CENTER><P><TABLE WIDTH=65% CELLPADDING=0 CELLSPACING=0>
<TR><TD>
<TABLE><TR><TD>
<PRE><FONT COLOR=#FF0000 FACE=Courier SIZE=2>
stretch_sprite(menubuffer,menuscreen,0,0,screen_w,screen_h);
while (menu_move_y < menu_h)
{
stretch_sprite(menubuffer,menuscreen,0,0,screen_w,screen_h);
stretch_sprite(menubuffer,console,menu_x,menu_move_y-menu_h,menu_w,menu_h);
stretch_sprite(screen,menubuffer,0,0,screen_w,screen_h);
menu_move_y+=6;
}
stretch_sprite(screen,menubuffer,0,0,screen_w,screen_h);
</FONT></PRE>
</TD></TR></TABLE>
</TD></TR>
</TABLE></CENTER>
<P>I used stretch_sprite instead of blit because one of the features of my game is
multiple screen resolutions.. I think the rest of the code is pretty easy to
understand.. I know, it's far from the most efficient way to do this probably..
let's just say I'm a better artist than programmer. ;)</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 + -