FishPlayer

一个喜欢摸鱼的废物

0%

Rapid UI Creation Note

发表于 更新于 分类于

When I searching some articles about MVC and MVVM, I see this talk.
Basiclly they does same stuff as my current project, but we still have some differences on our implementation.
I’d like to share it and take some notes :D

Here is the talk abour UGUI implementation.
video.
ppt.
temp.

Main note

Architecture in < Lost Survivor >

  • Artist works directly in Unity (Creating prefabs, setup aniamtions; well that’s what I my current project does, so I guess they did the same)
  • Dev works on GameLogic and UILogic
  • Dev/Art work decoupled
  • Dev/Art work parallel (This happens a lot in iteration)

The Pattern used in < Lost Survivor >

MVCVM (they choose this)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
                                                                                                                               
                                                        +---------------------------------------+                              
                                                        |                data binding           |                              
                                                        |                    <->                |                              
                                                        |                                       |                              
                                                        |                                       |                              
+------------------------------+                        |                                       |                              
|                              | +----------------------|-------+    +------------------------------+ +-----------------------+
----------Controller------------ |         Model                |    |        View Model            | |    View (UGUI View)   |
|                              | --------------------------------    -------------------------------- -------------------------
| void GainXP();               | |      int XP;                 |    |                              | | Text XP;              |
| void LevelUp();              | |      int Level;              |    |                              | | Text Attribute;       |
|                              | |                              |    |                              | | Button ReAllocate;    |
|                              | +--------------/---------------+    +---------------\--------------+ | int WeaponATK;        |
+---------------\--------------+              /-                                      -\              |                       |
                 \                          /-                                          -\            +-----------/-----------+
                  -\                      /-                                              \                      |             
                    \                   /-                                                 -\                    /             
            +---------------------------------------------------------------------------------------------------|-------+      
            |                                                                                                           |      
            |                                               Message Bus                                                 |      
            +-----------------------------------------------------|-----------------------------------------------------+      
                                                                  |                                                            
                                                                  |                                                            
                                                                  |                                                            
                                                    +-------------|------------+                                               
                                                    |                          |                                               
                                                    |      server backend      |                                               
                                                    |                          |                                               
                                                    +--------------------------+

This is the pattern they use for their project.
The one thing that I cant understand is that the View will receive events from MessageBus. IDK why they did like this. For me, I prefer to let view only receive direct events from VM, bind to many stuff to MessageBus will make it slow.

MVC

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
                                                                                                                                                                                                   
                                   +------------------------------+                                    
                                   |          Controller          |                                    
+---------------------------------------------------------------------------------------------+        
|         user action ->           |  void GainXp();              |       update ->           |        
|                                  |  Void LevelUp();             |                           |        
|                                  |  int GetAttribute(type);     |                           |        
|                                  |                              |                           |        
|                                  |                              |                           |        
|                                  +-------|--------------|-------+                           |        
|                                          |              |                                   |        
|------------------------------+           |              |            +----------------------|-------+
|    Character View            |           |              |            |         Model                |
--------------------------------           |              |            --------------------------------
| Text XP;                     |           |              |            | int AmountXp;                |
| Text Attribute;              ------------+              |            | int AttributeTypeA;          |
| Button ReAllocate;           | <- update                |            | int AttributeTypeB;          |
|                              |                          +-------------                              |
|                              |                     <- notify change? |                              |
+------------------------------+                                       +------------------------------+

I’m sure this pattern is kind of useful. I use this a lot when I did the first version of some UI pages. But later the Controller become a giant class.
And also I think the View and Controller in this pattern is not very reusable.

MVVM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
                                                                                                                            
                                                                                            +------------------------------+
                                                                                            |         Model Character      |
                                                                            +-----------------------------------------------
                                                                            |               | int AmountXp;                |
                                                                            |               | int AttributeTypeA;          |
                                                                            |               | int AttributeTypeB;          |
                                                                            |               |                              |
                                                                            |               |                              |
                                                                            |               +------------------------------+
+------------------------------+                     +----------------------|-------+                                       
|      Character View          |   data binding <->  |        View Model            |                                       
--------------------------------   notifications <-  --------------------------------                                       
| Text XP;                     |   command ->        |int AmountXP;                 |                                       
| Text Attribute;              ----------------------+int WeaponATK;                |                                       
| Button ReAllocate;           |                     |int WeaponLevel;              |       +------------------------------+
| int WeaponATK;               |                     |                              |       |         Model Weapon         |
|                              |                     |                              |       --------------------------------
+------------------------------+                     +----------------------|-------+       | int ATK;                     |
                                                                            |               | int Level;                   |
                                                                            +----------------                              |
                                                                                            +------------------------------+
  • ViewModel serves the View
  • One ViewModel per View
  • Based on Data Binding

After a few iterations, I find this pattern is also a good solutions. And I feel that we can even use CompositePattern in ViewModel to create big ViewModel for some big views(resuable).

In my current project, for the UI-View, we create some basic view that can receive similar types of data. And the good thing from this pattern is that the VM can send notificaiton to View to update, then I dun need to have lots of update method from Controller to update different data (cuz some data update need aniamtion, I cant just update all).

Problems

Previously it says that separating UIPrefabs creation and UILogic code may solve “Not my problem attitude”. But actually not.
In production state, everyone is busy, and we are iterating View-Scripts and VM-Scripts together. Sometimes it is diffcult to tell that is code issues or setup issues. Unless we have solid View-Scripts.

Summary

This talk has lots of similiar content as the DivisionUI talk. And I also realise that the game development has lots of unknow shit. It’s very difficult to have some resuable components that always works. Even the thougts are similar, the implementation can be different. A solution can be that having some solid, simple, basic and resuable compoents.