Web Game Design

授課教師江素貞

First Chat Project

Create Login UI 宣告LoginScreen類別(LoginScreen.as)，於建構子中載入SWF檔

讀取檔案資訊 (loader為 Loader物件)

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, getComponents);

public function getComponents(e:Event):void

{

var info:LoaderInfo = e.target as LoaderInfo;

var loader:Loader = info.loader as Loader;

var a:MovieClip = loader.getChildAt(0) as MovieClip;

var myMC:MovieClip = a.getChildAt(0) as MovieClip;

loader.x = stage.stageWidth / 2 - info.width/2; //info內含影片片段Size

loader.y = stage.stageHeight / 2 - info.height/2;

myMC.name_txt.text = "player" + Math.round(10000 * Math.random());

}

Create Login Screen(Dispatch Message) 按下LoginScreen上之login按鈕，取得輸入的登入資料

public var login_btn:Button;

public static var OK:String=“OK”; //定義事件名稱public function getComponents(e:Event):void

{

……

login_btn = myMC.login_btn;

login_btn.addEventListener(MouseEvent.CLICK, onClick);

}

public function onClick(e:MouseEvent)

{

dispatchEvent(new Event(OK));

}

Create Login UI(Listen Event)var login:LoginScreen = new LoginScreen();

login.addEventListener(LoginScreen.OK, onLoginToServer);

Chat

使用者清單與訊息傳送 ConnServer中，登入成功時建立Chat物件(將

ElectroServer instance傳入)，接手處理訊息工作

ChatScreen類別為顯示聊天畫面 載入完成時派送”OK”訊息

按下[send]按鈕時派送”MSG”訊息

Chat.as：處理訊息 顯示聊天畫面

收到”OK”訊息時，讓使用者進入預設的Lobby房間

進入房間後顯示自己的名字及玩家清單

收到”MSG”訊息時，傳送訊息

收到PublicMessageEvent訊息時，顯示訊息

MessageType Properties UserListUpdateEvent: 房間內有新玩家進入時觸發

ZoneUpdateEvent: Zone裡有房間被創造出來時觸發

PublicMessageRequest PublicMessageEvent

CreateRoomRequest JoinRoomEvent

ZoneUpdateEvent

Show Chat UI Chat construcor

chatScreen= new ChatScreen();

addChild(chatScreen);

chatScreen.addEventListener(ChatScreen.OK,

onChatScreenReady);

chatScreen.addEventListener(ChatScreen.MSG, onChat);

Enter Lobby Roomprivate function JoinRoom(roomName:String):void {

var crr:CreateRoomRequest = new CreateRoomRequest();

crr.setRoomName(roomName);

crr.setZoneName("chat");

es.send(crr);

}

Who Am I If you have ElectroServer instance, you can obtain your

name anytime and anywhere.

Example:

The es is a ElectroServer instance.

es.getUserManager().getMe().getUserName()

getUserManager(): Returns the UserManager instance. The UserManager is used to keep track of users that you should be able to see.

getMe(): Gets User that represents you.

Show User Listprivate function showUserList()

{

chatScreen.usr_list.removeAll();

var users:Array = room.getUsers();

for (var i in users) {

var user:User = users[i] as User;

if(user.getUserName()!=myName)

chatScreen.usr_list.addItem( {label: user.getUserName(), data:user})

}

}

Show User List1. 加入房間成功時呼叫 showUserList()

2. 接收到 UserListUpdateEvent 時呼叫 showUserList()

es.addEventListener(MessageType.UserListUpdateEvent,

"onUserListUpdate", this);

public function onUserListUpdate(ev:UserListUpdateEvent)

{

showUserList();

}

Send Public Messagevar pmr:PublicMessageRequest = new PublicMessageRequest();

pmr.setMessage(chatScreen.chatInput_txt.text);

pmr.setRoomId(room.getRoomId());

pmr.setZoneId(room.getZoneId());

es.send(pmr);

(附件：Simple Chat Tutorial.docx)

Joint and Leave Room

偵測使用者進入或離開public function onUserListUpdate(ev:UserListUpdateEvent)

{

//ev提供相關函式，可取得造成user list變更的使用者資訊

if (ev.getActionId() == UserListUpdateEvent.DeleteUser){

//使用者離開

}

if (ev.getActionId() == UserListUpdateEvent.AddUser) {

//使用者進入

}

}

設定TextArea之文字顏色private function appendMessage(msg:String, color:String="#000000")

{

var msgStr:String = "<font color='" + color + "'>" + msg + "</font>";

chatScreen.chatList_txt.htmlText+=(msgStr);

}

Show Room Listprivate function showRoomList() {

var rooms:Array =

es.getZoneManager().getZoneByName("chat").getRooms();

chatScreen.room_list.removeAll();

for (var i in rooms) {

var rm:Room = rooms[i] as Room;

var lab=rm.getRoomName()+"("+rm.getUserCount()+")“;

chatScreen.room_list.addItem( { label:lab, data:rm } );

chatScreen.room_list.sortItemsOn("label", "ASC");

}

}

加入房間public function onChangeRoom(e:Event){

var rm:Room = chatScreen.room_list.selectedItem.data;

if (rm.getUserCount() == rm.getCapacity()) {

//房間已滿

}

else{

leaveCurrentRoom(); //離開房間

JoinRoom(rm.getRoomName());

}

}

離開房間private function leaveCurrentRoom()

{

var lc:LeaveRoomRequest = new LeaveRoomRequest();

lc.setRoomId( myRoom.getRoomId() );

lc.setZoneId( myRoom.getZoneId() );

es.send(lc);

}

(附件：Advanced Chat Tutorial.docx)