[Teaching] [Silverlight] 用 Silverlight 一起開發Kuso小遊戲《捏氣泡》- 設計人員篇
楔子
當程式人員完成遊戲的骨架後,就交給設計人員,將介面的部分一鼓作氣地製作完成吧!
我們採用的技術平台及工具如下:
1. Silverlight 4
2. Visual Studio 2010
3. Blend 4
《圖說:捏氣泡最終完成圖》
在本文中,設計人員會學到下列遊戲開發上的相關技巧
l 圖形匯入
l 相依屬性&樣式的使用
l 封裝屬性的使用
l 行為的使用
l 動畫腳本的使用
事前準備
整款《捏氣泡》遊戲架構如下,共有4頁以及一個氣泡的Usercontrol,另外需要準備3款氣泡的圖,以及一個氣泡破裂的音效。
StartPage.xaml:遊戲開始頁。按一下會開始遊戲。
PlayPage.xaml:遊戲進行頁。
InstallPage.xaml:遊戲安裝頁。可安裝《捏氣泡》到本機桌面執行。
EndPage.xaml:遊戲結束頁。可統計分數,返回首頁或重新遊戲。
BubbleControl.xaml:氣泡的Usercontrol。
圖形匯入
首先,我們會先準備4款氣泡的顏色,每款氣泡包含了一組正常的氣泡,以及兩組破裂的效果,共16張圖。
在開始之前,先透過Blend開啟專案,將圖檔匯入。
Step 1. 準備16張圖檔
Step 2. 開啟Blend 建立bubble_Images資料夾 ,新增圖檔到資料夾中
Step 3. 將圖檔匯入
Step 4. 在專案中,會發現程式人員已經幫我們製作好一組名為BubbleControl的Usercontrol
Step 5. 打開後,會發現裡面有四組控制項,分別是三個image和一個mediaElement,image是圖片的容器,mediaElement則是拿來撥放音效使用的。
Step 6. 先設定 image控制項的Souce,方便待會預覽特效的時候使用。
動畫腳本的使用
《捏氣泡》遊戲希望氣泡本身有一組特效,可以讓氣泡看起來更生動一些。另外氣泡破裂後,有2組不同的狀態。這些效果,都將使用動畫腳本(Storyboard)來控制。
Step 1. 打開動畫腳本(Storyboard),會發現程式人員已經預先設定好了3組動畫腳本,我們先從設定氣泡特效開始
Step 2. 我們希望氣泡有放大縮小的效果,因此我們在0.3的時候,將整個layoutroot的容器整個放大
Step 3. 在0.3的時候,設定layoutroot的rendertransform
Step 4. 接著,我們點擊紅框處,設定StoryBoard的撥放方式
Step 5. 讓該StoryBoard可以在撥放完畢後,自動恢復,並且設定持續撥放
Step 6. 設定氣泡破掉的動畫腳本
Step 7. 透過設定Image控制項的visibility來達到不同氣泡破裂的效果
音效檔案的匯入
Step 1. 程式人員已經協助建立一組mediaElement,只要將要撥放的音效放入即可
Step 2. 透過設定source設定要撥放的音效
相依屬性的使用
《捏氣泡》遊戲在程式人員製作的部分時,已經完成相依屬性的基礎設定,設定相依屬性的主要目的是讓UserControl的屬性,未來在PlayPage中也可以進行設定,方便樣板的建立,讓整個設計的彈性更高。
Step 1. 選擇一個image控制項
Step 2. 點擊Source最左邊的小方塊
Step 3. 設定資料繫結項目
Step 4. 選擇元素屬性,點擊Usercontrol項目,繫結程式人員所撰寫好的相依屬性,設定完成後Source的設定項目,會被黃色框線圍繞,表示項目已經繫結上去,同時,原本設定的圖片也會消失,是正常的狀況。(本文只示範一組image控制項,其他兩組的設定方式相同)
行為的使用
在BubbleControl中,設計人員可以自行透過行為,來設定一些動作。這裡將示範如何使用changepropertyaction,來讓氣泡被按下後,自動變更氣泡的狀態。
Step 1. 透過資產,行為,可以選擇changepropertyaction
Step 2. 將此行為用拖曳的方式拉到BubbleControl
Step 3. 設定當滑鼠點擊這個BubbleControl的時候,自動將IsBroken (氣泡破裂)屬性設定為true
樣式的設定及使用
在設定完BubbleControl的相依屬性後,我們將前往playpage設定氣泡本身的樣式。透過製作樣式的方式,未來要切換不同顏色的氣泡,將十分方便。
Step 1. 點擊playpage.xaml
Step 2. 透過資產,搜尋bubblecontrol可以找到bubblecontrol這個usercontrol
Step 3. 將bubblecontrol透過拖曳的方式,拉到playpage中,會發現,這組usercontrol是空白的,這是由於我們還沒有進行任何樣式的設定
Step 4. 選取該組usercontrol,透過物件、編輯樣式、建立空白,可以設定這組樣式
Step 5. 選擇定義於應用程式,設定會寫入app.xaml,可以在任何usercontrol內使用
Step 6. 建立前,會發現樣板是空白的
Step 7. 在雜項的部分,會發現有相依屬性可以進行設定,將對應的圖檔一一設定上去,就可以完成一組樣式的設定
Step 8. 完成樣式設定後,隨時可以前往資源面板,編輯過去設定好的樣式
Step 9. 將所有樣式設定完後,接下來,只要點擊bubblecontrol,就可以進行樣式的套用,要變更顏色,相當方便
封裝屬性的使用
Step 1. 點擊bubblecontrol,在雜項的部分,可以找到兩組由設計人員定義的封裝屬性,設計人員可以設定該氣泡是否要呈現特效,特效開始前的延遲時間為多久
版面調整
Step 1. 最後,只需要調整面板,將氣泡排列整齊,界面美化,就完成了整款遊戲的製作
結語
相信各位跟著步驟,已經對於整款《捏氣泡》遊戲開發有大致的瞭解,這幾個部份其實只是幫助大家對於Silverlight開發遊戲有一個非常快速的入門。
當然,如果有任何不清楚的地方,或是對於Silverlight開發遊戲有任何的問題,也歡迎大家隨時透過Facebook的塗鴉牆,或留言,跟我們連繫。
转载于:https://www.cnblogs.com/bplus/archive/2010/10/05/1844423.html
[Teaching] [Silverlight] 用 Silverlight 一起開發Kuso小遊戲《捏氣泡》- 設計人員篇相关推荐
- 我的中間層開發,我的 DataSnap
歷史篇 DataSnap 和 MIDAS 應用程式和資料庫的關係演變 為什麼要用 DataSnap?--兩層的優缺點 為什麼要用 DataSnap?--DataSnap 解決兩層問題的方法 緣起篇 一 ...
- 创建Silverlight 1.0 開發環境
建置 Silverlight 1.0 開發環境 摘至网络 MSN Space.Google Doc .Google Blog Chui-Wen Chiu 2007.07.26 下載 1. Sliver ...
- 建置 Silverlight 1.0 開發環境
摘至网络 MSN Space.Google Doc .Google Blog Chui-Wen Chiu 2007.07.26 下載 1. Sliverlight 1.0 Beta Runtime 2 ...
- [Teaching] [Silverlight] 30秒快速建立遊戲迴圈 (Game Loop)
如果你想拿Silverlight開發遊戲,不管是在PC上採用Silverlight 3.4,或是Windows phone 7上採用Silverlight for windows phone,都離不開 ...
- 快速android app开发,快速學會開發 Android App
快速學會開發Android App 作者:吳玉舒 / 臺灣大學計算機及資訊網路中心程式設計組幹事 智慧型手機發展迅速,其中以Android和iOS為主要的平台,根據 2012年6月Nielsen 的調 ...
- 2017 .NET 開發者須知
筆記-Scott Hanselman 的 2017 .NET 開發者須知 转载http://blog.darkthread.net/post-2017-01-16-dotnet-dev-should- ...
- 基於IIS的WCF的分布式多層架構開發實現
曾用.NET Remoting,基於IIS,為公司實現過分布式多層架構,客戶端采用Web Browser瀏覽,當時,公司領導告訴我可能會有多臺中間服務器用於系統,又不想每臺電腦的去安裝程序,所以,我最 ...
- (筆記) 如何使用Visual C++ 6.0開發Win32 DLL? (C/C++) (VC++)
Abstract本文討論使用Visual Studio 6.0的Visaul C++開發Win32 DLL. Introduction 使用環境:Visual Studio 6.0, Visual C ...
- 多層開發注重效率的注意點
多層開發注重效率的注意點 1.不同資料型態的傳遞負荷成本 注意不要任意的使用 Variant,因為 Variant 雖然好用,但是相對上它使用的成 本也非常的高.例如如果你使用 Variant 來代表 ...
最新文章
- 第一次听人用男女关系讲 N(Non-Blocking)I(进)O(出),涨姿势了
- 《机器学习实战》朴素贝叶斯
- linux中kafka主题修改分区,kafka_2.11-2.0.0的部署与配置修改
- 解决MySQL查询数据不一致诟病
- 八 理解各种不同含义的new和delete
- 帆软动态列之数据集实现动态列
- 计算机网络 校园网规划与设计方案,校园网设计方案—计算机网络课作业
- 【渝粤题库】广东开放大学物业管理基本制度与政策 形成性考核
- 用arcgis裁剪面时出错,ERROR 999999: 执行函数时出错
- 448. Find All Numbers Disappeared in an Array
- Smbus host controller not enabled Assuming drive cache : write through
- 【React Native】react-native-vector-icons用法避坑
- matlab用雅可比(Jacobi)迭代法求解方程组
- OSChina 周五乱弹 ——程序员会喜欢的 12 款键盘
- java 依赖的项目报错_关于eclipse的maven项目Java Build Path中maven依赖报错问题
- C++ using的使用
- php获取搜索框的函数,PHP自定义函数获取搜索引擎来源关键字的方法
- 微信提醒事项功能怎么设置
- java 桌面客户端开发
- LrcView逐行歌词
热门文章
- python 数据结构包_Python Redistr包_程序模块 - PyPI - Python中文网
- 运维基础(13)日志切割工具 Logrotate
- 阿里巴巴副总裁陈丽娟:我对阿里云产品生态的思考 | 云原生加速器观点
- KubeDL 0.4.0 - Kubernetes AI 模型版本管理与追踪
- 涂鸦智能 dubbo-go 亿级流量的实践与探索
- Service Mesh 最火项目 Istio 分层架构,你真的了解吗?
- log4jdbc oracle,通过weblogic配置log4jdbc数据源,在项目中使用该数据源,输出sql
- 实现同步请求_Redis的复制是如何实现的?
- 5g时代新型基础设施建设白皮书 下载_全文下载 | 5G时代新型基础设施建设白皮书...
- sql-server基础知识四(视图和索引)