Les 4 ppt

746 views
647 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
746
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Les 4 ppt

  1. 1. 網路遊戲設計<br />Web Game Design<br />授課教師 江素貞<br />
  2. 2. Chapter 5 Chat<br />First Chat Project<br />
  3. 3. Create Login UI<br />宣告LoginScreen類別(LoginScreen.as),於建構子中載入SWF檔<br />讀取檔案資訊 (loader為 Loader物件)<br />loader.contentLoaderInfo.addEventListener(Event.COMPLETE, getComponents);<br />public function getComponents(e:Event):void<br /> {<br /> var info:LoaderInfo = e.target as LoaderInfo;<br /> var loader:Loader = info.loader as Loader;<br /> var a:MovieClip = loader.getChildAt(0) as MovieClip;<br /> var myMC:MovieClip = a.getChildAt(0) as MovieClip;<br /> loader.x = stage.stageWidth / 2 - info.width/2; //info內含影片片段Size<br /> loader.y = stage.stageHeight / 2 - info.height/2;<br /> myMC.name_txt.text = "player" + Math.round(10000 * Math.random());<br /> }<br />
  4. 4. Create Login Screen(Dispatch Message)<br /><ul><li>按下LoginScreen上之login按鈕,取得輸入的登入資料</li></ul> public varlogin_btn:Button; <br /> public static varOK:String=“OK”; //定義事件名稱<br /> public function getComponents(e:Event):void<br /> {<br /> ……<br />login_btn = myMC.login_btn;<br />login_btn.addEventListener(MouseEvent.CLICK, onClick);<br /> }<br /> public function onClick(e:MouseEvent)<br /> {<br />dispatchEvent(new Event(OK));<br /> }<br />
  5. 5. Create Login UI(Listen Event)<br />var login:LoginScreen = new LoginScreen();<br />login.addEventListener(LoginScreen.OK, onLoginToServer);<br />
  6. 6. Chat<br />
  7. 7. 使用者清單與訊息傳送<br />ConnServer中,登入成功時建立Chat物件(將ElectroServer instance傳入),接手處理訊息工作<br />ChatScreen類別為顯示聊天畫面<br />載入完成時派送”OK”訊息<br />按下[send]按鈕時派送”MSG”訊息<br />Chat.as:處理訊息<br />顯示聊天畫面<br />收到”OK”訊息時,讓使用者進入預設的Lobby房間<br />進入房間後顯示自己的名字及玩家清單<br />收到”MSG”訊息時,傳送訊息<br />收到PublicMessageEvent訊息時, 顯示訊息<br />
  8. 8. MessageType Properties<br />UserListUpdateEvent: 房間內有新玩家進入時觸發<br />ZoneUpdateEvent:Zone裡有房間被創造出來時觸發<br />PublicMessageRequest PublicMessageEvent<br />CreateRoomRequest JoinRoomEvent<br /> ZoneUpdateEvent<br />
  9. 9. Show Chat UI<br />Chatconstrucor<br />chatScreen= new ChatScreen();<br />addChild(chatScreen);<br />chatScreen.addEventListener(ChatScreen.OK, onChatScreenReady);<br />chatScreen.addEventListener(ChatScreen.MSG, onChat);<br />
  10. 10. Enter Lobby Room<br />private function JoinRoom(roomName:String):void {<br />varcrr:CreateRoomRequest = new CreateRoomRequest();<br />crr.setRoomName(roomName);<br />crr.setZoneName("chat");<br />es.send(crr);<br />}<br />
  11. 11. Who Am I<br /><ul><li>If you have ElectroServer instance, you can obtain your name anytime and anywhere.
  12. 12. Example:</li></ul> The es is a ElectroServer instance.<br />es.getUserManager().getMe().getUserName()<br /><ul><li>getUserManager(): Returns the UserManager instance. The UserManager is used to keep track of users that you should be able to see.
  13. 13. getMe(): Gets User that represents you.</li></li></ul><li>Show User List<br />private function showUserList()<br />{<br />chatScreen.usr_list.removeAll();<br />varusers:Array = room.getUsers();<br /> for (vari in users) {<br />varuser:User = users[i] as User;<br /> if(user.getUserName()!=myName)<br />chatScreen.usr_list.addItem( {label: user.getUserName(), data:user})<br /> }<br />} <br />
  14. 14. Show User List<br />加入房間成功時呼叫 showUserList()<br />接收到 UserListUpdateEvent 時呼叫 showUserList()<br />es.addEventListener(MessageType.UserListUpdateEvent, "onUserListUpdate", this);<br /> public function onUserListUpdate(ev:UserListUpdateEvent)<br /> {<br />showUserList();<br /> }<br />
  15. 15. Send Public Message<br />varpmr:PublicMessageRequest = new PublicMessageRequest();<br />pmr.setMessage(chatScreen.chatInput_txt.text);<br />pmr.setRoomId(room.getRoomId());<br />pmr.setZoneId(room.getZoneId()); <br />es.send(pmr);<br /><ul><li>(附件:Simple Chat Tutorial.docx)</li></li></ul><li>Chapter 5 Chat<br />Joint and Leave Room<br />
  16. 16. 偵測使用者進入或離開<br />public function onUserListUpdate(ev:UserListUpdateEvent)<br />{<br /> //ev提供相關函式,可取得造成user list變更的使用者資訊<br /> if (ev.getActionId() == UserListUpdateEvent.DeleteUser){<br /> //使用者離開<br /> }<br /> if (ev.getActionId() == UserListUpdateEvent.AddUser) {<br /> //使用者進入<br /> }<br />}<br />
  17. 17. 設定TextArea之文字顏色<br />private function appendMessage(msg:String, color:String="#000000")<br />{<br />varmsgStr:String = "<font color='" + color + "'>" + msg + "</font>";<br />chatScreen.chatList_txt.htmlText+=(msgStr);<br />}<br />
  18. 18. Show Room List<br />private function showRoomList() {<br />varrooms:Array = es.getZoneManager().getZoneByName("chat").getRooms();<br />chatScreen.room_list.removeAll();<br /> for (vari in rooms) {<br />varrm:Room = rooms[i] as Room;<br />var lab=rm.getRoomName()+"("+rm.getUserCount()+")“;<br />chatScreen.room_list.addItem( { label:lab, data:rm } );<br />chatScreen.room_list.sortItemsOn("label", "ASC"); <br /> }<br />}<br />
  19. 19. 加入房間<br />public function onChangeRoom(e:Event){<br />varrm:Room = chatScreen.room_list.selectedItem.data;<br /> if (rm.getUserCount() == rm.getCapacity()) {<br /> //房間已滿<br /> }<br /> else{<br />leaveCurrentRoom(); //離開房間<br />JoinRoom(rm.getRoomName());<br /> }<br />}<br />
  20. 20. 離開房間<br />private function leaveCurrentRoom()<br />{<br />varlc:LeaveRoomRequest = new LeaveRoomRequest();<br />lc.setRoomId( myRoom.getRoomId() );<br />lc.setZoneId( myRoom.getZoneId() ); <br />es.send(lc);<br />}<br /><ul><li>(附件: Advanced Chat Tutorial.docx)</li>

×