uFrame MVVM(Without Editor) + uFrame Kernel + SS-System(UIManager)
What is uFrame ?
uFrame Of Mind
uFrame, specifically created for the Unity game engine, uses a pattern-based framework called MVVM (Model View ViewModel). It is designed to provide developers with the visual editing tools, code structure and knowledge to develop games faster and more efficiently. This “frame of mind” for creating games is different than what most Unity developers are used to, but once understood the possibilities of where an idea can go are limitless.
What is uFrame MVVM ?
Here is the core concept of uFrame MVVM in short, for more detail, you can check the document of uFrame
Making things simple
When using Unity to develop, people always need to handle a huge bunch of game objects and components.
In order to help developer to focus on their core game concepts, uFrame use Elements to separate visual noise and core game logic. Elements consists of ViewModel, Controller, View and sometimes ViewComponents. Controller handle your core game logic, ViewModel is a interface between View(visual noise) and Controller(game logic)
Always Consider Portability
You should consider Controller and ViewModels are “portable” parts of your game, which means taking them outside of Unity and it still works, especially when you developing or extending them.
Making The Noise Sing
View and View Component connect the game logic and visual noise. When element’s data (ViewModel) change, a bind View will be notified and change your visual part of game, directs View Components to execute the appropriate action.
Views also execute the commands of events and interactions that occur in the scene (e.g. Collision, MouseClick, Hover).
How It Works Together
In uFrame, an emphasis is placed on separating out the pieces of your game into certain categories (often referred to as “layers”), based on this hybrid MVCVM pattern. The reasoning behind this is to help enforce separation of concerns, and allow you to quickly split things into these categories and think about them up-front. These parts are defined as:
- ViewModels: The objects, including properties and available commands
- Controllers: The rules, where you implement logic of commands
- Views: The visual/auditory representation of your objects in a game engine environment
And below is how they works together
What is uFrame Kernel ?
Why Kernel ?
Unity is easy for you to prototype your simple game, but there isn’t a solid project architecture for you to organize your game.
You may meet problems below when you develop a game
Game Flow : How to define start and end of the game
Scene Management : How to change the scene and make them works together
Assets Management : Preloading asset when you need
Back-end Communication : How to interact with the server
And many other things like Game Stats, achievements, multiplayer, in-app purchase, etc
Making things work is easy, however, your design is quite different for each problem, which may cause inconsistency of your code and game structure, and it will be the first step of project failure.
The other problem is the Game Life-Cycle, Unity provide us a global life cycle in Monobehaviour, but sometimes, your want the things work when the game start, when the game end, after you download something or loads a level, your have to design those by yourself manually.
Another problem is the dependencies of your game, Unity doesn’t have a build-in tool to help you resolve the dependencies of your scripts, Singleton is one of the solution but it just make your game into high-coupling and cause a nightmare to maintain a bunch of singleton, also, Unity Event is ok for small project but it’s hard to maintain when you have many of them. So, a dependency injection container and type base events is what should have.
In order the save your time in working out the same design problem, we can use uFrame Kernel as a architecture foundation. Kernel will force you to structure your game using services and system loaders, and help you to control your game flow using events.
What uFrame Kernel Consist of ?
uFrame Kernel is just a set of scripts, there are
uFrameKernel : A bootstrapper which loads all the other components
GameContainer : A dependency injection container
EventAggregator : Provide type base events
SystemService : A base class of all your services
SystemLoader : To load a set of service
SceneManagementService
SceneLoader
SceneTypes
SceneSettings : To Manager your scenes
Why without uFrame Designer (Editor)?
uFrame Designer is an amazing edtior plugin
It helps you
- Generate a bunch of Code automatically
- Give you the visual “Frame Of Mind”
But otherwise, it
- Makes you can’t fully understand the truth of uFrame MVVM, it hides a lot behind the designer
- A lot of restrict (uFrame Designer need further develop) , may cause a hard work around on something which you can easily finish with pure code
- Slow update to match Unity version
- May cause some problem when working with others, for example :Get conflict with designer describe .asset filesGet conflict with auto generate code etc..
So, although uFrame Designer is a good “Frame of Mind” editor, it may not good enough when working with others
How to use uFrame MVVM without uFrame Designer ?
Since uFrame Designer help us generate a lot of code automatically, someone may think it will be a hard code work to use uFrame MVVM without uFrame Designer. But I have to say it’s not a totally hard code work, because coding with “Frame Of Mind” can make your project much readable and easier to extend and maintenance, actually, there are not so much code waiting you to write.
Before you start your work, you need to pull the uFrame Kernel and uFrame MVVM from github, and remove all the editor code
uFrame Kernel : https://github.com/InvertGames/uFrame-MVVM.git
uFrame MVVM : https://github.com/InvertGames/uFrameKernel.git
First, have a clear mind of code folder structure
Game
└─── MainDiagram //Should be the only one for your Game
│ ├ Scenes
│ ├ SceneSettings
│ ├ Services
│ ├ SimpleClass
├─ System //A System Folder template
│ ├ Controllers
│ ├ Services
│ ├ SimpleClasses
│ ├ SystemLoaders
│ ├ ViewModels
│ ├ Views
Second, create files below with specific element which you want to create
Scene
"Name of your Scene".cs (inherit of uFrame.Kernel.Scene)
"Name of your Scene" + Loader.cs (inherit of uFrame.Kernel.SceneLoader)
"Name of your Scene" + Settings (inherit of uFrame.Kernel.SceneSettings)
Service
"Name of your Service" + Service.cs
(inherit of uFrame.Kernel.SystemService or uFrame.Kernel.SystemServiceMonoBehavior )
System
"Name of your System" + SystemLoader.cs
(inherit of uFrame.Kernel.SystemLoader)
Element( A combine of Controller and ViewModel )
"Name of your Element" + Controller.cs (inherit of uFrame.MVVM.Controller)
"Name of your Element" + ViewModel.cs
View
"Name of your View" + View.cs (inherit of uFrame.MVVM.ViewBase)
ViewModel Command
ViewModelCommands.cs
(All ViewModel Commands Class can write into this files, and Class should inherit of uFrame.MVVM.ViewModelCommand)
(ViewModel Command Class name can be "Name of your command" + Command)
Commands & Events
Commands.cs
Events.cs
(If you need to define commands and events with just a simple Class, can write into these
two files)
Third, Implement each file you have create
Scene
%Scene.cs
#Implement A getter setter of SceneSettings
%SceneLoader.cs
#override LoadScene
#override UnloadScene
Service
%Service.cs
#override Setup()
System
%SystemLoader.cs
#define global ViewModel with private property and a public getter setter
#define global Controller with private property and a public getter setter
#override Load()
Register Controller, ViewModel, ViewModelManager into container
ViewModel
%ViewModel.cs
#define ViewModel property with :
a private P<Type> property,
a public P<Type> getter setter,
a public getter setter;
#define ViewModel collection property with
a private ModelCollection<Type> property
a public ModelCollection<Type> getter setter
a public getter setter;
#define ViewModel Command property with
a ViewModel command class inherit of uFrame.MVVM.ViewModelCommand
a private Signal<Type> property (Type should be a ViewModelCommand Type)
a public Single<Type> getter setter;
#Implement a constructor use base constructor
public %ViewModel(uFrame.Kernel.IEventAggregator aggregator):base(aggregator){}
#override Bind()
new P<Type> property
new ModelCollection<Type> property
new Signal<Type> property
#override Read()
Deserialized public property
#override Write()
Serialized public property
#override FillCommands()
Add all ViewModel Commands into a list as ViewModelCommandInfo
#override FillProperties()
Add all property into a list as ViewModelPropertyInfo
#Implement public method to Execute Command
public virtual void Execute%(){ this.%.OnNext(new %Command()); }
Controller
%Controller.cs
#Provide a ViewModelManager with
a private uFrame.MVVM.IViewModelManager property
a public uFrame.MVVM.IViewModelManager getter setter with [Inject("%")] attribute
#Provide ViewModel IEnumerable Collctions
#Implement ViewModel Initialize method
public virtual void Initialize%(% viewModel){ %ViewModelManager.Add(viewModel); }
#Implement Create ViewModel method
public virtual %ViewModel Create%ViewModel(){ return ((%ViewModel)(this.Create(Guid.NewGuid().ToString()))); }
#override Setup()
#override Initialize()
need to call Initialize%ViewModel(%ViewModel viewModel) in here
#override CreateEmpty()
public override uFrame.MVVM.ViewModel CreateEmplty(){ return new %ViewModel(this.EventAggregator)}
#override DispoingViewModel(uFrame.MVVM.ViewModel viewModel)
%ViewModelManager.Remove(viewModel)
View
%View.cs
#override ViewModelType getter
public override System.Type ViewModelType{ get { return typeof(%ViewModel); }}
#provide a public getter return ViewModelObjct with cast
public %ViewModel % { get { return (%ViewModel)ViewModelObject; }
#override Bind()
can bind viewModel property or command here
Last, Create Kernel Scene and Scenes of your game, add them into your build setting
Kernel Scene
Scene structure
Kernel
├─ Service (Attach ViewService, SceneManagementService, other Services)
├─ SystemLoaders (Attach All SystemLoaders)
├─ SceneLoaders (Attach All SceneLoaders)
...
Your Game Scene
Scene structure
SceneRoot(Attach %Scene)
├─ ...(Stuff in your Scene)
...
That’s all, now you can open one of your game scene and see things work.
What is SS-System(As UIManager) ?
SS-System is a free library for Unity & Unity Pro which can manage your scenes and your UI layout easily.
SS-System is very simple as a core system which you can make your own template from it. Beside manage your UI, it helps you load & cache scenes, change BGM-sound automatically, send data to other scenes, catch event of other scenes, manage show/hide message command by queue which brings to you short & safe coding. Last, it supports NGUI.
Why use SS-System(As UIManager) ? And How it works ?
If you work on a bigger project, one of the problems is how to manage your UI, which UI is above, which is below, have to block other touch input when show up a popup, place loading when communicating with server. And most of the team save their UI as a prefab to load, which makes the share of common component become difficult.
Working out a good UIManager cost a lot of time and sometimes it doesn’t work as good as you think. To save your time, SS-System give you a good mind of UI management, it’s simple and easy to reform, can fit any project
How SS-System Manage UI ?
There are four UI layers in SS-System, they are
Screen
Sub-Screen
Menu
Popup
They layout of them are below
With SS-System, all UI save as a scene, when loading a UI, we just load the scene and add it into current scene
Save UI as scene can bring us the benefits as below:
- Easy to check how many UI in the project and have a edit
- Can share common components between different UI as prefab, for example, button, item icon, etc
- Better for Unit Testing, programmer can test UI separately from other UI, for example, if just want to check the In-App purchase UI works fine, just open the In-App purchase UI and run, no need to boot your game from the start point, which may save you a lot of time
PopUp are managed by stack, it makes very easy to show/hide a popup.
All the UI show and close command are managed in queue, for example
provide void Test()
{
SSSceneManager.Instance.PopUp("P1");
SSSceneManager.Instance.PopUp("P2");
SSSceneManager.Instance.Close();
SSSceneManager.Instance.Close(true);
}
Above Test Function, what SS-System done is :
Show the popup P1,
Wait the ‘show animation’ finish,
Show popup P2,
wait the ‘show animation’ finish,
Close popup P2,
wait the hide animation’ finish,
Close popup P1 immediately.
Your can keep your code short and safe, no need to worry about mess up the things
Hybrid uFrame and SS-System (as UIManager)
To make uFrame and SS-System works together, I reform SS-System as a Menu System in uFrame
What I have done is
Create a Menu System
Create a Menu Service
Separate SSSceneManager into Menu Service (Handle menu shown and hide logic), MenuRoot (Handle load UI and place UI into property place)
Change SSController to MenuView
Change SSSceneManager’s public function into commands and call them with event
For more detail, please check the demo
References
1.uFrame MVVM wiki
https://github.com/InvertGames/uFrame.Documentation
2.SS-System Support
Tony Tan Games 