mmo架构
uniSWF is an easy to use AdobeFlash®-to-Unity UI solution. Simply publish assets from Adobe Flash and they seamlessly appear in the Unity editor. It utilizes a familiar and powerful API modeled on the Flash runtime which makes creating anything from menus to full featured games, easy. Created by the developers at Flaming Pumpkin.
uniSWF是易于使用的AdobeFlash®-to-UnityUI解决方案。 只需从Adobe Flash发布资源，它们就可以无缝显示在Unity编辑器中。 它利用了以Flash运行时为模型的熟悉且功能强大的API，可轻松创建从菜单到功能齐全的游戏的所有内容。 由Flaming Pumpkin的开发人员创建。
This is a two part tutorial. In part 1 we will setup the project and go through the basics of getting simple GUI Widgets interacting in Unity with minimal code.
这是一个分为两部分的教程。 在第1部分中，我们将设置项目，并讲解以最少的代码在Unity中进行交互的简单GUI Widget的基础知识。
To see this demo in action click here to view it on the uniSWF demos page.
要查看该演示的实际运行，请单击此处在uniSWF演示页面上进行查看。
第一步： (First Steps:)
Start by creating a new Unity project and add the tutorial 08 assets from the uniSWF 1.0.1 package. Add a MovieClipOverlayCamera to the MainCamera which is found in the components menu and change the projection to orthographic, this will render the main GUI over the 3D scene.
首先创建一个新的Unity项目，然后从uniSWF 1.0.1包中添加教程08资产。 将MovieClipOverlayCamera添加到在组件菜单中找到的MainCamera并将投影更改为正交，这将在3D场景上渲染主GUI。
Create a new Javascript behavior and call it ‘MyGUI’. Attach this behavior to your main camera. Add the following code to setup the default Skin which will map any MovieClip instances with a prefix to a GUI Widget. This is explained in more detail below:
创建一个新的Javascript行为，并将其称为“ MyGUI”。 将此行为附加到您的主摄像机。 添加以下代码以设置默认外观，该默认外观会将带有前缀的任何MovieClip实例映射到GUI小部件。 下面将对此进行详细说明：
|
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
|
import pumpkin.display;
import pumpkin.events;
import pumpkin.text;
import pumpkin.ui;
public class MyGUI extends MonoBehaviour
{
static var resourceRoot:String = "uniSWF/Examples/Tutorial 08 - MMO GUI/";
static var instance:MyGUI;
var playerPanel:Panel;
//var hotbarPanel:HotbarPanel;
//var backpackPanel:BackpackPanel;
//var playerOptionsPanel:PlayerOptionsPanel;
//var chatPanel:ChatPanel;
function Start ()
{
var stage:Stage = GetComponent.<movieclipoverlaycamerabehaviour>().stage;
// Create global skin
var skin:Skin = Skin.createDefault();
// Register skin prefix mapping
skin.registerNamePrefix( "progress_", typeof(ProgressBar) );
skin.registerNamePrefix( "btn_", typeof(Button) );
skin.registerNamePrefix( "scroll_", typeof(Scrollbar) );
skin.registerNamePrefix( "slot_", typeof(DropSlot) );
skin.registerNamePrefix( "panel_", typeof(Panel) );
}
}
|
|
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
|
import pumpkin . display ;
import pumpkin . events ;
import pumpkin . text ;
import pumpkin . ui ;
public class MyGUI extends MonoBehaviour
{
static var resourceRoot : String = "uniSWF/Examples/Tutorial 08 - MMO GUI/" ;
static var instance : MyGUI ;
var playerPanel : Panel ;
//var hotbarPanel:HotbarPanel;
//var backpackPanel:BackpackPanel;
//var playerOptionsPanel:PlayerOptionsPanel;
//var chatPanel:ChatPanel;
function Start ( )
{
var stage : Stage = GetComponent . & lt ; movieclipoverlaycamerabehaviour & gt ; ( ) . stage ;
// Create global skin
var skin : Skin = Skin . createDefault ( ) ;
// Register skin prefix mapping
skin . registerNamePrefix ( "progress_" , typeof ( ProgressBar ) ) ;
skin . registerNamePrefix ( "btn_" , typeof ( Button ) ) ;
skin . registerNamePrefix ( "scroll_" , typeof ( Scrollbar ) ) ;
skin . registerNamePrefix ( "slot_" , typeof ( DropSlot ) ) ;
skin . registerNamePrefix ( "panel_" , typeof ( Panel ) ) ;
}
}
|
Now we’re going to add the PlayerPanel to the scene, which renders the players’ state, such as health and armour. The PlayerPanel has two progress bars which need to slide from left to right to reflect the state of the player.
现在，我们将添加PlayerPanel到场景中，以渲染玩家的状态，例如健康和盔甲。 PlayerPanel有两个进度条，需要从左向右滑动以反映玩家的状态。
To create a progress bar we simply create a rectangle that represents the bar and give it a name called ‘bar'”. Now add a rectangle to define the area of the progress bar mask and call this ‘clip’.
要创建进度条，我们只需创建一个代表该进度条的矩形，并为其命名为“ bar””。 现在添加一个矩形以定义进度条蒙版的区域，并将其称为“剪辑”。
Inside PlayerPanel in the mmo_ui.fla file there are two progress bars, one called ‘progress_health’ and one called ‘progress_armour’. Notice that every component has a prefix. Name prefixes are used to map movieclip instances in flash to Widget classes such as the Button, Scrollbar and Panel class. These are automatically initiated by the framework.
在mmo_ui.fla文件的PlayerPanel内部，有两个进度条，一个叫做“ progress_health”，另一个叫做“ progress_armour”。 请注意，每个组件都有一个前缀。 名称前缀用于将Flash中的动画片段实例映射到Widget类，例如Button，Scrollbar和Panel类。 这些由框架自动启动。
All the assets for this tutorial have been prepared for you and their property names have been allocated.
已经为您准备了本教程的所有资产，并分配了它们的属性名称。
Now add the PlayerPanel to the screen. At the end of the MyGUI Start() function add the following code to create the PlayerPanel including the health and armour progress bars. This will set the progress bars to 0 by default.
现在将PlayerPanel添加到屏幕。 在MyGUI Start()函数的末尾，添加以下代码以创建PlayerPanel，其中包括运行状况和装甲进度条。 默认情况下，这会将进度条设置为0。
|
1
2
3
4
5
6
7
|
// Create player panel
playerPanel = new Panel( MyGUI.resourceRoot + "swf/mmo_ui.swf:PlayerPanel" );
playerPanel.x = 20;
playerPanel.y = 20;
stage.addChild( playerPanel.getContainer() );
setHealth( 100 );
setArmour( 50 );
|
|
1
2
3
4
5
6
7
|
// Create player panel
playerPanel = new Panel ( MyGUI . resourceRoot + "swf/mmo_ui.swf:PlayerPanel" ) ;
playerPanel . x = 20 ;
playerPanel . y = 20 ;
stage . addChild ( playerPanel . getContainer ( ) ) ;
setHealth ( 100 ) ;
setArmour ( 50 ) ;
|
Next we will create a set of functions to apply values to the health and armour as used in the above code. The progress bar accepts a value from 0 to 1. Scale the health bar range from of 0 to 100.
接下来，我们将创建一组函数，以将值应用到上面代码中使用的健康和防具。 进度栏接受0到1之间的值。将运行状况栏的范围从0扩展到100。
|
1
2
3
4
5
6
7
8
|
function setHealth( value:float ) {
var progress_health:ProgressBar = playerPanel.getWidgetByName( "progress_health" ) as ProgressBar;
progress_health.progress = value / 100.0f;
}
function setArmour( value:float ) {
var progress_health:ProgressBar = playerPanel.getWidgetByName( "progress_armour" ) as ProgressBar;
progress_health.progress = value / 100.0f;
}
|
|
1
2
3
4
5
6
7
8
|
function setHealth ( value : float ) {
var progress_health : ProgressBar = playerPanel . getWidgetByName ( "progress_health" ) as ProgressBar ;
progress_health . progress = value / 100.0f ;
}
function setArmour ( value : float ) {
var progress_health : ProgressBar = playerPanel . getWidgetByName ( "progress_armour" ) as ProgressBar ;
progress_health . progress = value / 100.0f ;
}
|
To illustrate progress bars working, we will add a click event so when the bar is clicked it will decrease by 10%. Add the following code to the end of Start() function after creating the PlayerPanel above:
为了说明进度条的工作原理，我们将添加一个click事件，以便在单击进度条时将其减少10％。 在创建上面的PlayerPanel之后，将以下代码添加到Start()函数的末尾：
|
1
2
3
4
5
|
// TEST: Progress bar interaction test
playerPanel.getContainer().addEventListener( MouseEvent.CLICK, function ( e:CEvent ) {
var progress_health:ProgressBar = playerPanel.getWidgetByName( "progress_health" ) as ProgressBar;
progress_health.progress -= 0.1f;
} );
|
|
1
2
3
4
5
|
// TEST: Progress bar interaction test
playerPanel . getContainer ( ) . addEventListener ( MouseEvent . CLICK , function ( e : CEvent ) {
var progress_health : ProgressBar = playerPanel . getWidgetByName ( "progress_health" ) as ProgressBar ;
progress_health . progress -= 0.1f ;
} ) ;
|
|
1
2
3
|
// Set Player name
var name_txt:TextField = playerPanel.getContainer().getChildByName.("name_txt");
name_txt.text = "Blain_P2";
|
|
1
2
3
|
// Set Player name
var name_txt : TextField = playerPanel . getContainer ( ) . getChildByName . ( "name_txt" ) ;
name_txt . text = "Blain_P2" ;
|
Notice the getContainer(). This returns the underlying DisplayObject which the framework manages. This can be customised to suit a required style e.g you could add a function to the base Widget class called getTextField( name:String ) for convenience.
注意getContainer()。 这将返回框架管理的基础DisplayObject。 可以对此进行定制以适合所需的样式，例如，为方便起见，您可以将一个名为getTextField(name：String)的函数添加到基本Widget类中。
Hit the play button in Unity. Now the player name should change and the progress bars should be set as the following. If you click anywhere on the bar it should activate the test code above and decrease the health bar by 10% each click.
在Unity中点击播放按钮。 现在，玩家名称应更改，进度条应设置如下。 如果您在工具栏上的任意位置单击，则应激活上面的测试代码，并在每次单击时将运行状况栏降低10％。
添加快捷栏： (Adding the Hotbar:)
Next we are going to add the HotBar panel. This holds a list of easily accessible items the player has at their disposal. Items can be rearranged by dragging and dropping them from one slot to another. This also links in the BackpackPanel and PlayerOptions panel which will be covered in part 2.
接下来，我们将添加HotBar面板。 这列出了玩家可以使用的易于访问的物品。 可以通过将项目从一个插槽拖放到另一个插槽来重新排列项目。 这还将链接到BackpackPanel和PlayerOptions面板中，这将在第2部分中介绍 。
Create a new class called HotbarPanel and extend the SlotPanel. Set the default constructor to pass the flash asset URL to initialize it. As below:
创建一个名为HotbarPanel的新类，并扩展SlotPanel。 设置默认构造函数以传递Flash资产URL对其进行初始化。 如下：
|
1
2
3
4
5
6
7
8
9
10
11
|
public class HotbarPanel extends SlotPanel {
public function HotbarPanel( uri:String ) {
name = "HotbarPanel";
super( uri );
}
protected override function OnInit() {
}
}
|
|
1
2
3
4
5
6
7
8
9
10
11
|
public class HotbarPanel extends SlotPanel {
public function HotbarPanel ( uri : String ) {
name = "HotbarPanel" ;
super ( uri ) ;
}
protected override function OnInit ( ) {
}
}
|
Now add the following to create the HotbarPanel when the game initialises on the Start() of the MyGUI class
现在添加以下内容，以在MyGUI类的Start()上初始化游戏时创建HotbarPanel。
|
1
2
3
4
|
// Create hotbar panel
hotbarPanel = new HotbarPanel( MyGUI.resourceRoot + "swf/mmo_ui.swf:HotBarPanel" );
stage.addChild( hotbarPanel.getContainer() );
ScreenUtils.bottomCenter( stage, hotbarPanel.getContainer() );
|
|
1
2
3
4
|
// Create hotbar panel
hotbarPanel = new HotbarPanel ( MyGUI . resourceRoot + "swf/mmo_ui.swf:HotBarPanel" ) ;
stage . addChild ( hotbarPanel . getContainer ( ) ) ;
ScreenUtils . bottomCenter ( stage , hotbarPanel . getContainer ( ) ) ;
|
If you test the game, you should have the player health bar at the top-left and the hotbar centered at the bottom of the screen.
如果您测试游戏，则应该在屏幕的左上角放置玩家健康状况栏，并在屏幕的底部居中放置快捷方式栏。
Hit play and you should see the following items appear with their relevant quantities:
点击播放后，您应该会看到以下项目及其相关数量：
Now add the PlayerPanel to the screen. At the end of the MyGUI Start() function add the following code to create the PlayerPanel including the health and armour progress bars. This will set the progress bars to 0 by default.
现在将PlayerPanel添加到屏幕。 在MyGUI Start()函数的末尾，添加以下代码以创建PlayerPanel，其中包括运行状况和装甲进度条。 默认情况下，这会将进度条设置为0。
|
1
2
3
4
5
6
7
8
|
setItemIcon( 1, MyGUI.resourceRoot +
"swf/mmo_ui.swf:ItemIcon:shield", "2" );
setItemIcon( 3, MyGUI.resourceRoot +
"swf/mmo_ui.swf:ItemIcon:grenade", "5" );
setItemIcon( 4, MyGUI.resourceRoot +
"swf/mmo_ui.swf:ItemIcon:grenadrpg", "1" );
setItemIcon( 5, MyGUI.resourceRoot +
"swf/mmo_ui.swf:ItemIcon:mine", "1" );
|
|
1
2
3
4
5
6
7
8
|
setItemIcon ( 1 , MyGUI . resourceRoot +
"swf/mmo_ui.swf:ItemIcon:shield" , "2" ) ;
setItemIcon ( 3 , MyGUI . resourceRoot +
"swf/mmo_ui.swf:ItemIcon:grenade" , "5" ) ;
setItemIcon ( 4 , MyGUI . resourceRoot +
"swf/mmo_ui.swf:ItemIcon:grenadrpg" , "1" ) ;
setItemIcon ( 5 , MyGUI . resourceRoot +
"swf/mmo_ui.swf:ItemIcon:mine" , "1" ) ;
|
结论： (Conclusion:)
All the source code and source Flash .FLA files to this tutorial are available within the uniSWF package on the Unity Asset Store.
本教程的所有源代码和源Flash .FLA文件都可在Unity Asset Store的uniSWF软件包中找到。
In part 2 we will show you how to set up the BackPack & PlayerOptions panels. This will show you how to enable dragging items between panels such as the Hotbar to the Backpack.
在第2部分中，我们将向您展示如何设置BackPack和PlayerOptions面板。 这将向您展示如何启用面板之间的项目拖动，例如将Hotbar拖动到Backpack。
For more information and demos on uniSWF visit uniswf.com.
有关uniSWF的更多信息和演示，请访问uniswf.com 。
Main uniSWF Site: uniswf.com
uniSWF主要网站： uniswf.com
Demos: http://uniswf.com/home/demo
演示： http : //uniswf.com/home/demo
Documentation and tutorials: http://uniswf.com/home/documentation
文档和教程： http : //uniswf.com/home/documentation
Support: http://uniswf.com/home/support
翻译自: https://blogs.unity3d.com/2012/08/06/uniswf-mmo-gui-tutorial-from-flaming-pumpkin-part-1/
mmo架构
4168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
