avatar group

fe/src/Avatar.ts

+class Avatar extends egret.Sprite {
+
+  public constructor(userData) {
+    super()
+    this.init(userData)
+  }
+
+  private avatar = new egret.Bitmap()
+  private bg = new egret.Bitmap()
+  private imageLoader = new egret.ImageLoader()
+
+  private init(userData) {
+    this.bg.width = 100
+    this.bg.height = 100
+    this.bg.texture = RES.getRes("avatar_bg_jpg")
+    this.addChild(this.bg)
+
+    this.avatar.x = 10
+    this.avatar.y = 10
+    this.avatar.width = 80
+    this.avatar.height = 80
+    this.imageLoader.addEventListener(egret.Event.COMPLETE,this.loadCompleteHandler,this)
+    this.imageLoader.load(userData.avatar_url || "http://www.insajderi.com/wp-content/uploads/2018/01/asdja.jpg")
+    this.addChild(this.avatar)
+
+  }
+
+  private loadCompleteHandler() {
+    let texture = new egret.Texture()
+    texture._setBitmapData(this.imageLoader.data)
+    this.avatar.texture = texture
+  }
+}

fe/src/AvatarGroup.ts

+class AvatarGroup extends egret.Sprite {
+
+  public constructor(userDatas) {
+    super()
+    this.init(userDatas)
+  }
+
+  private init(userDatas) {
+      userDatas.forEach((userData, index) => {
+          let avatar = new Avatar(userData)
+          avatar.x = index * 100
+          this.addChild(avatar)
+      })
+  }
+}
\ No newline at end of file

fe/src/scenes/RoomScene.ts

@@ -2,7 +2,10 @@ class RoomScene extends egret.Sprite {
 
   private startLabel: egret.TextField
   private players: Array<any>
-  private playerContainer: egret.DisplayObjectContainer
+  private avatars: any
+
+  private transition_runner_jpg = "transition_runner_jpg"
+  private transition_catcher_jpg = "transition_catcher_jpg"
 
   public constructor() {
     super();
@@ -14,11 +17,10 @@ class RoomScene extends egret.Sprite {
     console.log('RoomScene.init')
     this.initBg()
     this.initStartLabel()
-    this.initPlayerContainer()
-    this.addChild(this.startLabel);
     // var sound: egret.Sound = RES.getRes("catched_0_mp3");
     // sound.play();
     // put display object to this scene
+
   }
 
   public update(data) {
@@ -45,8 +47,15 @@ class RoomScene extends egret.Sprite {
       this.startLabel.touchEnabled = false
     }
     const members = payload.members
-    this.addChild(this.playerContainer)
+    if(this.avatars && this.avatars.parent){
+      this.avatars.parent.removeChild(this.avatars)
     }
+    this.avatars = new AvatarGroup(members)
+    this.avatars.y = 330
+    this.avatars.x = 667 - (members.length * 100) / 2
+    this.addChild(this.avatars)
+  }
+
   private countDown(res) {
     this.startLabel.text = '3'
     const timer = setInterval(() => {
@@ -55,13 +64,27 @@ class RoomScene extends egret.Sprite {
       }
       if (this.startLabel.text == 'Go!') {
         clearInterval(timer)
+        const bg = Store.isCatcher ? this.transition_catcher_jpg : this.transition_runner_jpg
+        this.showTransition(bg, () => {
           SceneManager.getInstance().changeScene('gameScene')
+        })
         return
       }
       this.startLabel.text = `${Number(this.startLabel.text) - 1}`
     }, 1000)
   }
 
+  private showTransition(transition, callback){
+    let img = new egret.Bitmap()
+    img.texture = RES.getRes(transition)
+    this.addChild(img)
+    var tw = egret.Tween.get( img )
+    img.alpha = 0
+    tw.to( {alpha:1}, 1000 ).wait(2000).call(() => {
+      callback()
+    })
+  }
+
   private initBg() {
     var shape: egret.Shape = new egret.Shape();
     shape.graphics.beginFill(0x343E5F);
@@ -84,11 +107,7 @@ class RoomScene extends egret.Sprite {
     this.startLabel.x = 1334 / 2
     this.startLabel.textAlign = egret.HorizontalAlign.CENTER;
     this.startLabel.y = 1136 / 2
-  }
-  private initPlayerContainer() {
-    this.playerContainer = new egret.DisplayObjectContainer()
-    this.playerContainer.width = 600
-    this.playerContainer.height = 200
+    this.addChild(this.startLabel);
   }
 
   private startHandler() {