罗培羽 — 教你用 VB 制作 RPG 游戏

1. 罗培羽—教你用VB制作RPG游戏 第四节 精美的界面 Make it beautiful

2. 罗培羽 作品 • 网名 碧俐千仞 • QQ:345697666 • E_mail：tyxxxx@qq.com • 博客：http://hi.baidu.com/mhqy

3. 标题界面 • 创建一个窗体Title 并调整图标等 • 调整窗体布局，使它在屏幕中间 • 调整大小，使它为800*600 （还要算上包括边框） 宽度： 12120 高度： 9510 设置运行时首先启动 工程>属性 最后看看效果

4. 基本界面结构 • 我们设置窗体的autoredraw和scalemode • 我们做一个名为Pic的图片框，载入“框”的图片。和一个名为Pic2的图片框，载入背景图片（复制设置好用于显示函数的对象）

5. 添加按钮，显示图片 Cls '显示底层图片 GdiTransparentBlt Title.hDC, 0, 0, Pic2.Width, Pic2.Height, Pic2.hDC, 0, 0, Pic2.Width, Pic2.Height, false '画图 '显示框 GdiTransparentBlt Title.hDC, 0, 0, Pic.Width, Pic.Height, Pic.hDC, 0, 0, Pic.Width, Pic.Height, RGB(255, 255, 255) ‘画图 最后调试下看看

6. 让背景图片移动 • 添加timer1 时间调5 '底层图片处理 If a = 0 Then X = X - 1 If X < Title.Width / 15 - Pic2.Width Then a = 1 Else X = X + 1 If X > 0 Then a = 0 End If Call Command1_Click

7. 添加标题文字 • 建个Pic3 • 按钮代码中间添加 '显示文字 GdiTransparentBlt Title.hDC, Title.Width / 30 - Pic3.Width / 2, 100, Pic3.Width, Pic3.Height, Pic3.hDC, 0, 0, Pic3.Width, Pic3.Height, RGB(255, 255, 255) '画图

8. 让文字有动感 • 在显示图片时修改参数 • X加上 10 * Sin(X / 40) • 宽度加上 20 * Sin(X / 40) • 高度加上 5 * Cos(X / 30)

9. 添加音乐 • 在文件夹中添加 title.mp3 Form_Load() Src.WindowsMediaPlayer1.URL = AppDisk + “music/title.mp3” ‘音乐处理 Form_Unload() Unload Src 为了有震撼的效果，我们把播放器的音量加大

10. 制作按钮 • 添加图片框PicNew和PicNew2 设置PicNew2为不可见，并让它在PicNew中 Form_MouseMove() PicNew2.Visible = False PicNew_MouseMove PicNew2.Visible = true

11. 同理我们添加 PicOld PicOld2 PicMaker PicMaker2 PicExit PicExit2 并相应在mouse_down添加相应的代码 最后调整好位置

13. 制作退出游戏事件 PicExit2_Click() End

14. 制作开始游戏事件 PicNew2_Click() main.Show main.Form_Load() 同时将main的启动位置设为手工 main.Width = Title.Width main.Height = Title.Height main.Move Title.Left, Title.Top Show Unload Title

15. 制作制作团队事件 添加不可见的图片框Maker，并放到适当位置 PicMaker2_Click() Maker.Visible = True Maker_Click() Maker.Visible = False

16. “旧的回忆”我们在学习了储存与读取后再添加“旧的回忆”我们在学习了储存与读取后再添加 • 对于标题画面你可以发挥你的想象力，做到更好

17. 菜单界面 • 创建一个窗体Menu 并调整图标等

18. 调用 =1左键按下 =2右键按下 • 修改main的鼠标点击事件 If Button = 1 Then …… Else'菜单处理 Menu.Width = main.Width Menu.Height = main.Height Menu.Move main.Left, main.Top Menu.Show main.Hide End If

19. 这里我们做个简单的菜单，你可以发挥你的聪明才智做得更好这里我们做个简单的菜单，你可以发挥你的聪明才智做得更好 • 添加背景图片 • 添加文本框 • 添加叠加图片 （作为血槽）

21. 用制作标题按钮的方法制作按钮 “离开游戏”（ PicExit ） PicExit2_Click() 点离开游戏时 Unload Menu Title.Show Form_Click() 点击时返回 main.Move Menu.Left, Menu.Top main.Show Menu.Hide

22. Form_Unload() 退出时卸载窗体Src Unload Src Unload main 在main的unload中添加 Unload Menu 至于生命值的显示，我们将在学习了战斗系统后进行处理

23. 最后为了在加载窗体时的美观，我们把main和Title的背景色都设置为黑色最后为了在加载窗体时的美观，我们把main和Title的背景色都设置为黑色

24. 距离过远提示 • 我们在游戏中如果主角与Npc的距离过远，而我们点击Npc，游戏中出现距离过远的提示。

25. 两点间的距离公式 '距离过远判断 If Sqr((Xn + Role.Width / 2 - (Npc(i).Left + Npc(i).Width / 2)) ^ 2 + (Yn + Role.Height / 1.5 - (Npc(i).Top + Npc(i).Height / 1.5)) ^ 2) >= 100 Then MsgBox "距离过远" Exit Sub End If '距离判断结束

26. 图片提示 • 添加一个图片框 TooFar，并设为不可见 • 添加timer2 在图片内，时间调为300，Enabled=false

27. MsgBox “距离过远“换成 TooFar.Move Npc(i).Left + Xm, Npc(i).Top + Ym TooFar.Visible = True Timer2.Enabled = True Timer2中 TooFar.Visible = False Timer2.Enabled = False 移动图片到NPC的位置 图片出现 计时器开始计时 计时器在一定时间后 图片消失 计时器失效

28. 行走目的地提示 • 在我们点击鼠标让角色行走的时候，游戏会在这一点上做个标记

29. 添加图片框PositionT，设autoredraw=true里面加上一个Timer3，设置时间为300，Enabled=false添加图片框PositionT，设autoredraw=true里面加上一个Timer3，设置时间为300，Enabled=false Call SetPosition(x, y)后加上 Timer3.Enabled = True Timer3_Timer() Timer3.Enabled = False Call Draw(Xs, Ys)

30. 绘图 '画目的地提示点 If main.Timer3.Enabled = True Then GdiTransparentBlt main.hDC, Xt + Xm + main.Role.Width / 2, Yt + Ym + main.Role.Height / 1.5, main.PositionT.Width, main.PositionT.Height, main.PositionT.hDC, 0, 0, main.PositionT.Width, main.PositionT.Height, RGB(255, 255, 255) '画图 End If

31. 对话框系统 • 添加图片框T1,T2

32. Public Sub talk(Tname As String, Tcontext As String, Tpic As String) '画人物图像 main.T2.Picture = LoadPicture(Tpic) GdiTransparentBlt main.hDC, 0, 0, main.T2.Width, main.T2.Height, main.T2.hDC, 0, 0, main.T2.Width, main.T2.Height, RGB(255, 255, 255) '画图 '画对话框 GdiTransparentBlt main.hDC, 0, main.Height / 15 - main.T1.Height - 23, main.T1.Width, main.T1.Height, main.T1.hDC, 0, 0, main.T1.Width, main.T1.Height, RGB(255, 255, 255) '画图 '写名字 main.CurrentX = 30: main.CurrentY = 470 main.ForeColor = RGB(255, 255, 255) main.FontSize = 14 main.Print Tname '写内容 main.CurrentY = main.CurrentY + 10 main.CurrentX = 30 main.Print Tcontext End Sub CurrentX 和CurrentY 设置Print的位置 Print 显示

33. 调用 • Call talk("苏媚", "你好，王小虎", appdist + "face/sm.gif")

34. 但我们要字一个一个显示 添加Ttimer Public Context As String '字符串内容 Public Tn As Integer ‘目前的显示位置 '写内容 Context = Tcontext '赋值 Tn = 1 main.TTimer.Enabled = True main.CurrentY = main.CurrentY + 10 main.CurrentX = 30

35. 从context 中间的Tn位置 开始取一个字符 后加“;”表不空行 Ttimer 时间50，不生效 main.Print Mid(Context, Tn, 1); Tn = Tn + 1 If main.CurrentX > main.Width / 15 - 30 Then Print "": main.CurrentX = 30 If Tn > Len(Context) Then TTimer.Enabled = False End If 显示到一定长度 就换行 如果显示的字符大于 要显示内容的长度

36. 做个提示对话结束的跳动图标 添加T3和timer4并进行相关设置（时间500，无效） TTimer.Enabled = False后加上 Timer4.Enabled = True Timer4_Timer() T3.Visible = True If T3.Top = 550 Then T3.Move 650, 560 Else T3.Move 650, 550 End If

37. 当对话结束后才能行走 Do_talk 中 Public Ctrlable As Boolean ‘可控制判断 Talk()后加上 Ctrlable = False Form_MouseDown()的内容放在一下代码里 If Ctrlable = True Then …… End if Formload 中加上Ctrlable = True Mousedown最后加上Ctrl = 1

38. Public Ctrl As Integer '按下时变为1 Public Sub Wait() Ctrl = 0 Do: DoEvents Loop Until Ctrl = 1 Ctrlable = True End Sub 循环，且在循环时 可以处理其他事件

39. Ttimer() TTimer.Enabled = False Timer4.Enabled = True 后面加上 Call Wait Call Draw(Xs, Ys) Timer4.Enabled = False T3.Visible = False

40. Talk()最后加上 Do: DoEvents Loop Until main.TTimer.Enabled = False 可进行一个事件中的多个对话显示

41. 完成 • 下一节我们将教你如何制作战斗系统

42. 谢谢支持 碧俐千仞 作品 绝对监视,深入防毒