博客园_深蓝色右手

Silverlight游戏研发手记：(十)3D 场景与控制设计①

2012-05-23T09:33:00Z

模型和骨骼动画仅仅是开启3D游戏的敲门砖，置入基于摄像机的场景设计方能呈现最完美的3D游戏。本节，我们依旧从简单着手，一步步创建基于模型的3D游戏场景。

《XNA4.0学习指南(中文)》是一本绝对值得一看的好书，对于3D游戏的基础知识、概念以及简单应用讲解非常全面。比如书中提到关于XNA内置了创建摄像机的方案代码，根据该提示我们便可轻松实现一个名为Camera3D的类：

    /// <summary>
    /// 摄像机
    /// </summary>
    public sealed class Camera3D : Object3D {

        public Matrix View { get; set; }
        public Matrix Projection { get; set; }
        public Vector3 Target { get; set; }
        public Vector3 Up { get; set; }
        public float Near { get; set; }
        public float Far { get; set; }

        public Camera3D(ContentManager content, GraphicsDevice device, Vector3 position, Vector3 target, Vector3 up, float near, float far) :
            base(content, device) {
            this.Position = position;
            this.Target = target;
            this.Up = up;
            this.Near = near;
            this.Far = far;
        }

        /// <summary>
        /// 获取或设置视角模式
        /// </summary>
        public ViewModes ViewMode { get; set; }

        /// <summary>
        /// 更新以3D角色为中心的视口
        /// </summary>
        /// <param name="role3D"></param>
        public void UpdateViewPort(Role3D role3D) {
            if (role3D != null) {
                Vector3 p = role3D.Position;
                //通过角色眼睛位置及调节其他参数实现远近视角变化
                switch (ViewMode) {
                    case ViewModes.FirstPerson:
                        //从(0,eye,0)向(0,eye,-1)方向看,得到以下公式
                        Position = p + new Vector3(0, role3D.Eye, 0);
                        Target = p + new Vector3(-(float)Math.Sin(RotationY), role3D.Eye, -(float)Math.Cos(RotationY));
                        break;
                    case ViewModes.ThirdPersonHeadlook:
                        //从(0,eye,l1)向(0,eye-130,l2)看,得到以下公式,l1,l2值可调节远近和视角,Scale伸缩摄像机
                        float l1 = 30 * Scale;
                        float x1 = (float)(l1 * Math.Sin(RotationY));
                        float z1 = (float)(l1 * Math.Cos(RotationY));
                        float l2 = -410 * Scale;
                        float x2 = (float)(l2 * Math.Sin(RotationY));
                        float z2 = (float)(l2 * Math.Cos(RotationY));
                        Position = p + new Vector3(x1, role3D.Eye, z1);
                        Target = p + new Vector3(x2, role3D.Eye - 130, z2);
                        break;
                    case ViewModes.ThirdPersonOverlook:
                        //l值可调节远近和视角,Scale伸缩摄像机
                        float l = (role3D.Eye + 80) * Scale;
                        float x = (float)(l * Math.Sin(RotationY));
                        float z = (float)(l * Math.Cos(RotationY));
                        Position = p + new Vector3(x, l, z);
                        Target = p;
                        break;
                }
            }
        }

        /// <summary>
        /// 更新摄像机的视图矩阵和投影矩阵
        /// </summary>
        public override void Update(GameTimerEventArgs e) {
            View = Matrix.CreateLookAt(Position, Target, Up) ;
            Projection = Matrix.CreatePerspectiveFieldOfView(
            MathHelper.PiOver4,
            device.Viewport.AspectRatio,
            Near, Far);
        }

    }

摄像机是我们观查3D世界的窗口，很多游戏开发者会亲切的称之为“上帝之眼”。毫不夸张的说，有了它，市面上一切3D游戏视觉设定都能随意实现。

比如“第一人称视角”的RPG和FPS，经典代表作有《魔法门》，《反恐精英》等：

第一人称视角的最大特点是玩家置入感强，屏幕就好比玩家的眼睛，玩家通过屏幕看去仿佛置身其中，身临其境般感觉，非常真实。

当然，在此基础上又进化出来了“第三人称平视”视角，该视角很好的规避了“第一人称视角”中存在的视觉死角以及容易产生眩晕等问题，动作感及玩家操控体验更强，逐渐成为3D游戏，尤其是动作和射击类3D游戏的主流视角。

经典代表作有ACT《鬼泣》和TPS《全球使命》等：

而“第三人称俯视”视角则是我们最最常见的游戏视角，该视角非常有利于玩家时刻观察大范围周边环境，视觉面广，立体感强，操作尤为爽快。应该感谢网游，使之能够成为目前绝大多数玩家最钟爱的3D(2.5D)游戏视角模式。经典游戏耳熟能详，举不胜举，比如ARPG《暗黑破坏神》和SLG《英雄无敌》：

总体来说，游戏视角的选取应该符合游戏本身的性质以及匹配游戏的核心玩法，像《刺客信条》等神作，为了在不同动作、环境时得到最好的玩家操控体验，采用了极为复杂的动态视角切换技术。当然还有比如《上古卷轴5》和《辐射3》等大作，为了不失去任何玩家，系统可根据玩家自身适应性与操作习惯选择相应的特定视角等等。

通过对以上案例的分析，目的只想向大家传递一个思想：开发3D游戏若能很好的把握住摄像机的运作原理，对于3D游戏场景设计来说，一切都是小Case。

接下来，为了让大家更进一步理解3D摄像机，以上一节中的骨骼动画角色作为主角，以3DMAX导出的FBX格式建筑模型模拟游戏实际场景，再根据之前创建的摄像机代码，通过修改其中的Position和Target两个关键参数即可调节出任意3D视角：

当我们将摄像机置于主角的眼睛位置，并同时看向主角的正前方时，此时便形成了“第一人称视角”(通常我们会在屏幕正中心放置一个十字准心，用于方向与目标的定位)：

当摄像机置于主角身边某处(比如正后方)并穿过主角看向前方，同时仅作围绕主角的垂直方向旋转时，便形成了“第三人称平视”视角：

将摄像机固定于主角的上空，并呈一定角度的倾斜对准主角脚底俯视时，便形成了“第三人称俯视”视角：

其实很简单对吧，不妨将摄像机看作是我们的游戏屏幕，那么各类视角的实现其实都不过如此。

最后，为了配合Windows Phone等移动设备独特的操作方式，按照游戏玩家们的传统习惯，即左手控制角色移动，右手控制行为指令；那么我们便可创建出一个名为Controller的“虚拟拇指摇杆控制器”类，并分别置于屏幕左右两边：

    /// <summary>
    /// 基于虚拟拇指摇杆的控制器
    /// </summary>
    public sealed class Controller : Object2D {

        Texture2D rtexture, ltexture, backStick;
        const int maxThumbstickDistance = 50;
        const int distanceThumbsticks = 50;
        Vector2 rightCornerPosition, leftCornerPosition;
        Vector2 rightBackStick, leftBackStick;
        Vector2 rightPosition, leftPosition;
        Vector2 rightThumbstickCenter, leftThumbstickCenter;

        public Controller(ContentManager content, Vector2 size)
            : base(content) {
            backStick = content.Load<Texture2D>("Image/BackgroundStick");
            rtexture = content.Load<Texture2D>("Image/RStick");
            ltexture = content.Load<Texture2D>("Image/LStick");
            Vector2 middleTexture = new Vector2(rtexture.Width / 2, rtexture.Height / 2);

            rightThumbstickCenter = new Vector2(size.X - distanceThumbsticks - middleTexture.X, size.Y - distanceThumbsticks - middleTexture.Y);
            leftThumbstickCenter = new Vector2(distanceThumbsticks + middleTexture.X, size.Y - distanceThumbsticks - middleTexture.Y);

            rightCornerPosition = rightThumbstickCenter - middleTexture;
            leftCornerPosition = leftThumbstickCenter - middleTexture;

            rightBackStick = rightCornerPosition - new Vector2(distanceThumbsticks, distanceThumbsticks);
            leftBackStick = leftCornerPosition - new Vector2(distanceThumbsticks, distanceThumbsticks);
        }

        /// <summary>
        /// 获取或设置操作模式(精确度)
        /// </summary>
        public ControlModes ControlMode { get; set; }

        /// <summary>
        /// 获取或设置左侧虚拟拇指摇杆位置
        /// </summary>
        public Vector2 LeftThumbstick {
            get {
                //缩放向量计算触摸位置的中心,缩放最大摇杆距离
                Vector2 l = (leftPosition - leftThumbstickCenter) / maxThumbstickDistance;
                //如果长度大于1,转化为单位矢量
                if (l.LengthSquared() > 1f) { l.Normalize(); }
                return l;
            }
        }

        /// <summary>
        /// 获取或设置右侧虚拟拇指摇杆位置
        /// </summary>
        public Vector2 RightThumbstick {
            get {
                Vector2 l = (rightPosition - rightThumbstickCenter) / maxThumbstickDistance;
                if (l.LengthSquared() > 1f) { l.Normalize(); }
                return l;
            }
        }

        public override void Update(GameTimerEventArgs e) {
            TouchLocation? leftTouch = null, rightTouch = null;
            TouchCollection touches = TouchPanel.GetState();
            foreach (TouchLocation touch in touches) {
                switch (ControlMode) {
                    case ControlModes.Accurate:
                        if (Math.Pow((touch.Position.X - leftThumbstickCenter.X), 2) + Math.Pow((touch.Position.Y - leftThumbstickCenter.Y), 2) <= Math.Pow(backStick.Width / 2, 2)) {
                            leftTouch = touch;
                            leftPosition = touch.Position;
                            continue;
                        }
                        if (Math.Pow((touch.Position.X - rightThumbstickCenter.X), 2) + Math.Pow((touch.Position.Y - rightThumbstickCenter.Y), 2) <= Math.Pow(backStick.Width / 2, 2)) {
                            rightTouch = touch;
                            rightPosition = touch.Position;
                            continue;
                        }
                        break;
                    case ControlModes.Rough:
                        if (touch.Position.X <= TouchPanel.DisplayWidth / 2 && touch.Position.Y >= TouchPanel.DisplayHeight / 3) {
                            leftTouch = touch;
                            leftPosition = touch.Position;
                            continue;
                        }
                        if (touch.Position.X > TouchPanel.DisplayWidth / 2 && touch.Position.Y >= TouchPanel.DisplayHeight / 3) {
                            rightTouch = touch;
                            rightPosition = touch.Position;
                            continue;
                        }
                        break;
                }
                if (leftTouch.HasValue && rightTouch.HasValue) { break; }
            }
            if (!leftTouch.HasValue) { leftPosition = leftThumbstickCenter; }
            if (!rightTouch.HasValue) { rightPosition = rightThumbstickCenter; }
        }

        public override void Draw(GameTimerEventArgs e, SpriteBatch spriteBatch) {
            if (RightThumbstick.Length() > 0) {
                spriteBatch.Draw(backStick, rightBackStick, Color.White);
            }
            spriteBatch.Draw(rtexture, rightCornerPosition + RightThumbstick * distanceThumbsticks, Color.White);
            if (LeftThumbstick.Length() > 0) {
                spriteBatch.Draw(backStick, leftBackStick, Color.White);
            }
            spriteBatch.Draw(ltexture, leftCornerPosition + LeftThumbstick * distanceThumbsticks, Color.White);
        }

    }
}

在本节的Demo中，左手遥控杆用于移动角色。需要说明一点，基于XNA右手坐标系下，一个场景模型从3DMAX中默认坐标系中导入进游戏，角色若要在其表面上移动，改变的不是X、Y值，而是X、Z值，Y值代表实际高低深度，这与后面章节将要讲到的HeightMap有很大区别：

右手遥控杆则用来旋转摄像机和角色(模拟PC中的鼠标右键按住不放时的场景旋转功能)，实际游戏开发中大家可以在此基础上作更进一步设计，比如单击、双击、长时按压以实现主角攻击、射击、特技、魔法等行为，使得遥控杆功能得以最大化，满足游戏更多的操控需求：

本节源码中集成了EngineNine源码的核心部分，源码下载地址：(WP)SLXnaGame2

手记小结：本节主要讲解了基于不同视角的3D场景搭建以及传统的基于遥控杆的游戏操控功能实现，也算是非常简单的3D游戏开发入门级场景设计知识。后续章节我将在本节源码的基础上进行深度拓展，通过搭建出各种类型的经典3D游戏Demo案例向大家展示SL.XNA在跨平台3D游戏开发方面的强大与高效，敬请关注。

推荐参考：Nowpaper和Williams关于Windows Phone的游戏开发博客。

本文链接

Silverlight游戏研发手记：(九)3D 骨骼动画

2012-05-08T08:03:00Z

Silverlight 5和Windows Phone 7.1都已具备SL.XNA模式，这意味着我们可以在相关平台上制作高性能的3D游戏及软件产品而无需二次编码。本节，我将借助一些工具为大家讲解SL.XNA的3D实现原理，并演示如何加载并解析一个功能齐全带贴图和骨骼动画的角色模型。从今天开始，通向3D之大门正全方位为您开启！

关于传统3D游戏的原理并不是本文重点，不再赘述。我们更迫切的需要了解XNA对哪些3D格式支持以便我们可以快速的开始配置开发环境。默认的，XNA开发游戏最常用到.X和.FBX；至于其他的3D文件格式呢？比如Obj、3ds、Md2等等。其实说到底，这与2D游戏中对精灵帧图的解析原理一样，无论什么类型的3D格式，其本质不过就一树形结构文本而已，只是内容较多且相对复杂些罢了；通过之前的教程学习，相信大家都已掌握了如何解析自定义的xml文件，那么通过代码或事先编写好的工具对各类3D文件格式进行解析相信亦并非难事，然后再将之与XNA的3D API对接，从而最终达到展示模型及运行骨骼动画等功能。不难看出，XNA游戏的核心也是最关键环节便是对资源的承载与解析，我们通常称之为内容管道 (ContentPipline)，该管道提供了相应接口可随意扩展，从而达到高度自由且全方位覆盖的目的。

3D比起2D来说水深得多，因此为了效率同时也为了降低入门成本，我们完全可以通过一些网上现有资源或开源项目来获取编写好的3D模型内容管道，在此和大家分享我的经验：

1)Skinning Sample – 官方提供的XNA入门级骨骼动画演示Demo(实用度★)

这是微软官方为初学者提供的XNA解析.FBX格式骨骼动画之经典案例，从此，Dude这个名字变得家喻户晓。该源码的核心部分是以下两个类库：

然而实际情况并不乐观：我曾用它测试不下百个FBX带骨骼动画的模型，能够正确解析并正常显示的寥寥无几，尤其对骨骼数支持方面问题尤为严重。提示大家，仅作为示例学习学习便可，除非你有能力对该内容管道进行二次拓展，否则实用性极低。

2)KiloWatt Animation (实用度★★)

这是一款开源的3D骨骼动画解析示例，支持XNA4.0，但目前版本不支持Windows Phone，同时亦测试过十多款.X骨骼动画模型，支持率不高。

3)Animation Component (实用度★★★)

一位韩国3D游戏大师开发的XNA骨骼动画解析开源组件，功能还蛮全的，而且也附带了比较详细的英文教程，暂时还不支持XNA4.0和Windows Phone。

4) XNAnimation (实用度★★★)

巴西人制作的开源的高性能3D骨骼动画支持演示，据作者说将发布XNA4.0版本，可以保持关注。

5)3D FPS Source (实用度★★★)

很难得的比较完整的XNA 3D射击游戏源码，包含的知识点元素很多，只可惜同样不支持XNA4.0和Windows Phone。

6) Axiom (实用度★★★★)

作者介绍如下：

Axiom Engine is an Open-source, cross-platform 3D rendering engine for .NET and Mono licensed using the LGPL. The engine is a high-performance C# port of the powerful OGRE engine and provides full support for DirectX, OpenGL and XNA on Windows, Linux, Android, iPhone and Windows Phone.

说实话，如果真的有作者所述之强大，其前途无可掂量；但至少来说，我暂时还未完全实验成功…

7) XNA Community (实用度★★★★)

超多的XNA各平台游戏源码分享，称其为XNA入门级开发者的福音绝不为过。比如运行于WP7平台上的劳拉RPG Demo，该源码对极复杂(各种资源混合压缩)的MD3(雷神之锤3)格式的骨骼动画解析近乎完美，运行效果非常流畅：

8)Mono (实用度★★★★★)

不用多做介绍了吧，搞.NET若不知道真可以撞墙了。Write Once Play Everywhere是MONO的终极目标，也是XNA要实现全方位跨平台的主流方法。然而，Mono却又并非微软官方所支持的解决方案，这确实是个令人纠结的技术难题。

9)Engine Nine (实用度★★★★★)

一款跨微软所有游戏平台(Windows/Xbox 360/Windows Phone 7/Silverlight)的完全开源3D项目源码(若在商业项目中用到它，请保留Engine Nine的标志，或者…这个你懂的)，包含的游戏知识面比较很广，总的来说至少可以搭建一套完整的XNA 3D RPG游戏。

综合各种对比分析，并经过大量的反复测试，最终还是觉得Engine Nine来得给力。尤其是其拓展的素材管道Nine.Content.Pipeline.dll，对Kw X-port导出的.X骨骼动画的支持效果极为出色。下面，我将就如何使用该引擎制作一款SL.XNA模式下的3D模型骨骼动画Demo详细讲解。

（一）导出骨骼动画模型.X文件

从2010版本开始，3D MAX便默认集成了对.FBX格式的导出功能；然而，若想获到.X格式，我们还是得借助比如Panda Directx Exporter或Kw X-port等插件才能实现。

安装好相应插件后我们重启3D MAX，并打开事先准备好的带骨骼动画的角色模型：

这是一款国产MMORPG中非常标准的带全套动作的女侠模型，很适合作为本节Demo的主角。在导出该模型之前，我们需要特别注意此场景中所包含的全部对象并非只有女侠一个，还包括其手中握的剑；若我们直接点击导出，此时3D MAX会将场景中的所有对象一并导出，而这样得到的.X文件解析起来难度大且没什么意义，毕竟我们得考虑到游戏设计中的换装问题。因此，我们只需选中其中的人物部分，然后点击3D MAX的“导出”->“导出选定对象”即可：

至于应该选择何种文件类型，针对Engine Nine来说，经反复测试后发现还是Kw X-port导出的.X文件格式解析效果最好：

最后也是最关键的环节 - 设置导出参数：

常用的导出配置如上图所示，其中我们可以通过右上角的Animation窗口，对该模型的骨骼动画各关键帧进行截取封装并重新命名。比如角色走路动作动画“Walk”，在3D MAX中可以通过调整下方的时间轴获悉角色走路动画的帧区间为65-105之间：

因此，对应导出参数便是Start = 65, Len = 40。至于其他动作动画导出也依此类推。导出完毕后我们将得到1个.X文件和若干张贴图：

显而易见，该模型分为两部分贴图：头部和身体；这就意味着该模型在游戏中能实现3部分的换装：单手武器、头像和衣服。是否有种恍然大悟的感觉？没错，若想为游戏设计实现更为复杂的换装系统，比如衣服、裤子、头饰、护腕、手套、护膝，双手武器等等，则在建模的时候就必须和美术沟通清楚游戏角色方面的需求设定。

（二）配置游戏项目整体环境

按照第六节的方法创建一个新的SL.XNA游戏项目，然后在Content项目中将刚才导出的3个文件加载进去（置于Model文件夹下）：

是不是觉得这两张贴图文件的文件名不太好记？OK，我们双击Woman.X进入其神秘的内部，搜索一下“NP134_01.BMP”，发现它俩正好都处于文件的最尾部：

嘿嘿，至于如何处理不用我再多说了吧？

文件就位，剩下的便是解析，终于轮到Engine Nine上场了。

我们首先为Content项目添加拓展的素材管道引用，位于Engine Nice/References/x86/Nine.Content.Pipeline.dll。之后，右键点击Woman.X->属性->设置内容处理器为“Model– Engine Nine”：

接下来，在游戏项目中添加对Engine Nine/References/Windows Phone/下的Nine.dll和Nice.Graphics.dll的引用：

至此，我们便完成了整体环境的配置工作。

（三）加载并解析骨骼动画模型

万事俱备，终于可以大施拳脚。

1）加载模型、网格及骨骼的方法代码：

        string _BodyAssetName;
        /// <summary>
        /// 获取或设置身体模型资产名称
        /// </summary>
        public string BodyAssetName {
            get { return _BodyAssetName; }
            set {
                _BodyAssetName = value;
                //加载模型资产,检索是否匹配拓展的模型处理管道,并尝试添加该模型的骨骼蒙皮动画等信息
                body = contentManager.Load<Model>(value);
                bodyGeometry = contentManager.Load<Geometry>(string.Format("{0}Geometry", value));
                bodySkeleton = new ModelSkeleton(body);
            }
        }

        string _WeaponAssetName;
        /// <summary>
        /// 获取或设置武器模型资产名称
        /// </summary>
        public string WeaponAssetName {
            get { return _WeaponAssetName; }
            set {
                _WeaponAssetName = value;
                weapon = contentManager.Load<Model>(value);
            }

2）动态切换各部位贴图的方法代码(注意Meshes和MeshParts所对应的模型部位)：

        string _FaceTextureName;
        /// <summary>
        /// 获取或设置脸部纹理贴图资产名称
        /// </summary>
        public string FaceTextureName {
            get { return _FaceTextureName; }
            set {
                _FaceTextureName = value;
                (body.Meshes[0].MeshParts[0].Effect as BasicEffect).Texture = contentManager.Load<Texture2D>(value);
            }
        }

        string _BodyTextureName;
        /// <summary>
        /// 获取或设置身体纹理贴图资产名称
        /// </summary>
        public string BodyTextureName {
            get { return _BodyTextureName; }
            set {
                _BodyTextureName = value;
                (body.Meshes[0].MeshParts[1].Effect as BasicEffect).Texture = contentManager.Load<Texture2D>(value);
            }

3）播放单个骨骼动画的方法代码(可通过名称或序号播放相应骨骼动画)：

        /// <summary>
        /// 播放独立骨骼动画
        /// </summary>
        /// <param name="name">动画名称</param>
        public void PlayAnimation(string name) {
            BoneAnimation animation = new BoneAnimation(bodySkeleton, body.GetAnimation(name)) {
                BlendDuration = TimeSpan.FromSeconds(1) //不同骨骼动画切换时的过度连贯平滑性,若为0则无过度
            };
            animationPlayer[0].Play(animation); //animationPlayer分别对不同动画进行播放,若[n]值相同，则会相互干扰

4）播放组合骨骼动画的方法代码(比如魔兽世界中，角色便跑动，便施法，还便转头；这里面涉及的技巧很多，但Engine Nine很给力)：

        /// <summary>
        /// 播放两组(上下半身)融合骨骼动画
        /// </summary>
        /// <param name="upperBodyAnimationName">上半身行为动画名</param>
        /// <param name="lowerBodyAnimationName">下半身行为动画名</param>
        public void PlayAnimation(string upperBodyAnimationName, string lowerBodyAnimationName) {
            BoneAnimationController upperBody = new BoneAnimationController(body.GetAnimation(upperBodyAnimationName));
            BoneAnimationController lowerBody = new BoneAnimationController(body.GetAnimation(lowerBodyAnimationName)) { Speed = 0.9f };

            BoneAnimation animation = new BoneAnimation(bodySkeleton) { BlendDuration = TimeSpan.FromSeconds(1) };
            animation.Controllers.Add(upperBody);
            animation.Controllers.Add(lowerBody);

            //根据模型实际情况,分上下半身处理两组骨骼动画的融合
            //比如奔跑+暗器,取上半身暗器骨骼动画显示,取下半身奔跑骨骼动画显示
            animation.Controllers[upperBody].Disable("root", false);
            animation.Controllers[upperBody].Disable("LThigh", true);
            animation.Controllers[upperBody].Disable("RThigh", true);

            animation.Controllers[lowerBody].Disable("LPelvis", false);
            animation.Controllers[lowerBody].Disable("RPelvis", false);
            animation.Controllers[lowerBody].Disable("RCollar", true);

            animation.KeyController = lowerBody; //以下半身动画为主
            animation.IsSychronized = true; //是否同步

            animationPlayer[0].Play(animation);

5）绘制真实影子的方法代码(这是最简单的实现方案，但不是最好的)：

        /// <summary>
        /// 绘制模型蒙皮动画
        /// </summary>
        /// <param name="modelBatch"></param>
        /// <param name="world"></param>
        public void DrawSkinnedModel(GameTimerEventArgs e, ModelBatch modelBatch, Matrix world) {
            if (BodyAssetName != string.Empty) {
                //绘制身体骨骼
                modelBatch.DrawSkinned(body, world, bodySkeleton.GetSkinTransforms(), bodyEffect);
                if (ShowShadow) {
                    //绘制身体影子
                    modelBatch.DrawSkinned(body, world * shadow * Matrix.CreateTranslation(new Vector3(-17, -17, -18)), bodySkeleton.GetSkinTransforms(), bodyShadow);
                }
            }
            if (WeaponAssetName != string.Empty) {
                //绘制武器模型
                modelBatch.Draw(weapon, bodySkeleton.GetAbsoluteBoneTransform("Rfinger") * world, weaponEffect); //把武器模型附加在手的位置(注:"Rfinger"为模型中手的名称)
                if (ShowShadow) {
                    //绘制武器影子
                    modelBatch.Draw(weapon, bodySkeleton.GetAbsoluteBoneTransform("Rfinger") * world * shadow * Matrix.CreateTranslation(new Vector3(-17, -17, -18)), weaponShadow);
                }
            }

最后还需要注意一点，关于如何将武器匹配到模型骨骼动画手的位置(实现武器切换功能)，代码中我们这样写：modelBatch.Draw(weapon, bodySkeleton.GetAbsoluteBoneTransform("Rfinger") * world, weaponEffect);其中“Rfinger”即对应该模型的右手指部件(当然，实际中应该至于手心处，这个需要和美术沟通好)：

总体来说，Engine Nine封装了对.X文件相当完美的骨骼动画解析，就连动画之间的平滑过渡都做得精致到位(BoneAnimation的BlendDuration 参数)，就目前来说，足以满足绝大多数手游或页游的3D游戏设计需求。

以下是本节Demo源码下载地址(之后章节将以Windows Phone平台为主，暂时不再提供Silverlight移植版本，开发者们可根据需要自行移植，非常简单)：

Windows Phone版本

Silverlight版本(在线演示)

手记小结：目前的Windows Phone平台不支持自定义着色器(电池寿命问题？)，这意味着我们只能使用比如BasicEffect和SkinnedEffect等内置的Shader。而基于浏览器的Silverlight则只能在受信任开启显卡支持的条件下使用3D功能(基于客户端操作系统/显卡等环境因素影响考虑)。虽然依旧存在诸多的不完善，但WP8和WIN8的强劲再一次让我满怀信心；好比本节通过3D MAX + Kw X-port + Engine Nine + SL.XNA构建的极具实用价值的高性能跨平台3D骨骼动画游戏案例，作为向3D进军的第一声号角，谁都无法阻挡我们勇往直前的脚步！

推荐参考：Nowpaper和Williams关于Windows Phone的游戏开发博客。

本文链接

HTML5，庞氏傀儡

2012-05-03T02:37:00Z

仅以此文献给初出茅庐以及在纠结中往复徘徊的HTML5开发者们

昨天，听朋友说HTML5开发了一款很牛气的3D页游，名叫《霸刀》。于是乎，我怀着忐忑的心打开了官方网站，注册好账号后才发现：

咋咋呼呼的原以为神一级的WebGL突然转世重生临幸人间；怎知却冒出个非得安装HTML5插件来……大哥，别忽悠我了，你是病毒吧？！

说真的，我从来没有听说过HTML5还要安装插件？至于这样玩弄我的感情吗？

算了，码农肚里能撑船，不和它计较。哥5月底还要参加在职研究生考试呢，回家好好复习去。

屁股坐稳，打开家里那台老旧的破电脑，强忍着“咯吱咯吱”比锯木头好听点的硬盘声，终于进入了神马《..研究生..平台》；你要知道，这可是能与《火车…售票网站…》一决高下的殿堂级产品，日访问量不下百万的国家顶级IT技术专家开发的网站！不管你信不信，我反正信了。

接下来又是一场惊心动魄之旅，我用Firefox打开它，突然蹦出乱七八糟的界面，顿时吓得四脚朝天，口吐白沫。你Niang的不兼容Firefox也用不着拿这东西来吓唬我吧？！

愤愤的，我果断拿起手中的行动电话致电教育部热线，信息科一位很甜美的声音回复说：您好，感谢您的宝贵意见。我们的系统已经运作了很多年，运行非常稳定，界面清晰，结构合理，得到广大考生们的一致好评，将来打算长期使用下去。

生气，真的很生气。做为一名职业高强度密集型技术宅男，这是对我智商最深层次的侮辱！郁闷，难道支持HTML5的浏览器比中国人活得还要艰难？

算了，哥想得开。因为，还有Chrome嘛。

嘿嘿，这可是我的最爱；记得上次还在女朋友的电脑里装过，没几天便收到反馈啦：除了说下载很不方便，网银无法正常使用，一些网页打不开，很多网页都怪怪的外，其他都还蛮正常的。这件事让我至今记忆犹新，每每谈起都好不得意。

打断一下，那个啥，兄弟，Chrome?

不会吧？你真不知道什么是Chrome？来，哥教你百度一下：

Chrome，乃谷歌亲生子，曾经的HTML5强力推手；当然了，现在Google又开始了华丽的转身，重新回归插件技术。第一款号称将改写“网页游戏”基于Chrome浏览器独占游戏Bastion登陆App Store了，定睛一看原文如下：

Bastion这款游戏的上架充分证明了Chrome的潜力——之前人们可能认为Chrome充其量只能做出一个Flash或HTML游戏中心，Web Store最终将成网页游戏和浏览器插件的下载中心，比如供用户射射小鸟之类的……但事实证明这严重低估了Google的野心：浏览器窗口就是游戏窗口，凡是能在机器上运行的游戏，都能在Chrome里直接运行，不需要额外打开任何进程。Google已经通过当前版本的Chrome实现了这个目标。

可见，Google正打算将Chrome打造成为浏览器即操作系统的趋势已近成型，这将意味着HTML对它来说完全可忽略不计，所有能为它带来Money的游戏、软件等“各种插件应用程序”才是最终的上帝！

刚刚才骂完Firefox的Niang，现在又遇到个龌蹉的超级间谍Google，昨天还在推HTML5，今天就已经开始盘算着全方位转向插件技术，还是干爹说得对：进口货都不是好东西，专坑没文化的中国人。

哎，伤不起呀，亲。

那我躲总行吧。

10数年风霜折磨过的HTML4还是比较靠谱的，你瞧我身边那些号称网页工程师的，哪个桌面上不摆上这三个图标那可真叫一个落伍：

网页工程师能力如何体现？当然是开发的HTML4代码兼容的浏览器越多越赞啦。

“啥？为什么还要做兼容测试？HTML代码不是在所有浏览器下都可以运行吗？”一位即将实习的大三学生路人庚问我。

朋友，W3C知道吗？IE6知道吗？还有IE7/IE8/IE9，Firefox和Chrome，这些浏览器(版本)造就了各自的网页显示标准，同样的HTML代码在不同的浏览器下的显示效果都不一致。记得曾经一位同行老泪纵横的对我说：远离HTML吧，我女朋友就是因为实在看不惯我每天反复不停的在这3款万恶的浏览器中不停的刷新调试，终于弃我而别了…兄弟，回头是岸…

天杀的！无尽的JS+CSS代码兼容多浏览器轮换调试，消耗了我们网页开发者多少青春和热血？这是对生命最无耻的亵渎…

终于，我想通了。

我要用破笔杆子比作枪，把一肚子怨恨化作子弹，向世界揭露HTML5的傀儡阴谋论！

-有名无实，傀儡天子 -

HTML5 作为世人所尊称的IT界天子，目前的境地非常尴尬：标准由W3C制定并由国外软件巨头们推动，而我们国人开发应用却又得适应国内落后的操作系统及浏览器环境。

更可悲的是，微软、谷歌、苹果等IT巨头们都各怀私心，盘算着挟天子以令诸侯之事。

微软的目的：通过宣传IE9/10对HTML5的完美支持进一步推销自己的IE系列浏览器，同时发展HTML5新标准向有利于微软产品方向延伸(不觉得IE10下的HTML5更像是XAML了吗？)，并借此提升在HTML5标准制定方面更强劲的话语权。

谷歌的阴谋：作为Javascript的干爹，成为最早推动HTML5进程的巨头看似理所当然，然而不久前高调发布的Native Client却让其猥琐的阴谋原形毕露：干掉FLASH再发布自己的“Flash++”，真乃“螳螂捕蝉，黄雀在后”，高，实在是高！

苹果的算盘：务实的乔布斯告诉世界：开发苹果游戏产品，用objective-c已近无敌，而为了降低iPhone和iPad中浏览网页的电池消耗，拒绝Flash并使用新版本的HTML让整机性能最优化，绝对是不二选择。

另外，对于某些Javascript高手来说，推动Javascript的发展，即等同于对自身利益价值的最大化：比如提高Javascript新书销量，获得更多的演讲邀请以及工作机会等等，很现实嘛，人不为己，天诛地灭。

总之一句话道破天机：HTML4擅长做什么，HTML5就擅长做什么。没有<Canvas>，HTML4一样可以做动画；没有<Video>，HTML4一样可以播放视频。HTML5只是重新封装了一些控件标签，稍微提高了些性能罢了，仅此而已，不要想太多了。

- 无需安装插件？别扯蛋了兄弟 -

注意了朋友们，HTML5扯了一个天大的谎言：在目前世界绝大多数的电脑上要运行HTML5程序，都必须安装比插件更可怕，名字叫IE9/Firefox/Chrome的浏览器；如果说插件已足够让客户/玩家闻风丧胆，那么安装浏览器不等同于自掘坟墓？别告诉我你不知道啥是浏览器呀，请百度一下。

口说无凭，好吧，翻箱倒柜愣是给我找到了一款名叫《命令与征服》的HTML5网页游戏，撇开该游戏我10年前便能独立开发完成不说，如此古老的产品硬是般上本来就不成熟的HTML5平台，那个性能呀…算了，我们还是来看原文吧，亮点大家自己找哈：

啥？我欺负人？好吧，暂时把HTML5放一边,我们不妨来看看它的老爸HTML4啥德行。

这是一款HTML4开发的网页游戏：《三国魂》

别惊讶，官方大义凌然，毫不留情的撇开中国数以亿计装着IE6/IE7的XP用户，指名道姓点名必须使用它所推荐的3款浏览器方能正常游戏；造反呀！哥们？你当玩家是萝卜呀？到底你是上帝还是客户是上帝？

类似的案例数不胜数，就好比每次看到下面这个对话框所带给我的视觉冲击，让我彻夜难寐…，我谨代表中国80%+的用户对此深表遗憾。

事实便是如此，Windows XP全球依旧占据着46%的份额，仍然最受欢迎；注意了，46%是相对于全球而言，很抱歉的告诉大家，中国这个神奇的国度拖了世界的大后腿，至于具体多少，问问中国的网民不就知道了？

为什么中国的网吧不用WIN7操作系统？Google回答说：

为什么中国的企事业单位及家庭大多是XP操作系统？国内的开发人员回答说：

还记得之前每天都在上演的IE6棺材闹剧吗？敢问你敢当着局长面卸载掉他的WIN XP？敢问你有胆量把网吧里的所有电脑都换成WIN 7 ？敢问你有绝对实力重写所有银行网银插件？敢问你有无限超能力让所有传统行业软件都兼容WIN7？别美了，VB6在他们心中依旧是神。

白云呀！黑土！只恨XP下的IE版本永远升级不到9，你说这是可歌可泣呢还是双输模式？

- 未来所有游戏都使用HTML5开发？你呀的喝多了吧 -

HTML5从小立志成为一位伟大的游戏设计师。人小志气大，自身标准都还未确定的HTML5便已凭借其先天优势在IT界崭露头角。

某天，HTML5敲开苹果公司的大门：“你好，我想应聘IOS游戏主程？”

苹果游戏专家Objective-c微笑着回答说：“小伙子，你更适合帮助用户浏览网页”。

HTML5极不甘心一辈子帮Objective-c打下手，于是来到了Google的人力资源部：“你好，我想应聘高级工程师。”

正巧编程大师Java就坐在旁边：“兄弟，来切磋一下，是比性能还是效率？你选。对了，我也是开源的哦。”

此处省略250个字……

HTML5灰头灰脸的捧着简历来到了微软大厦楼下，这是它的最后一个Offer了。深深的吸了一口气，心想：“若是能够成为Windows Phone的项目一把手，钱途无量呀！”

卯足了勇气，可HTML5万万没想到此次面对的乃是有着微软双煞之称的Silverlight和XNA。

此处省略386个字……

HTML5仰天长叹！

回家的途中偶遇一算命先生，看过手相后连连摇头，伸出手指有三：

其一：朋友，你想成为移动设备游戏开发工程师，你是否考虑过电池方面的问题？一大堆几乎得不到硬件加速的图片、粒子、动画、特效甚至3D模型，这让本就极其珍贵的移动设备电池电量情何以堪？

其二：你是否考虑过你那低效的解释执行脚本语言Javascript是否能够胜任复杂而庞大的游戏项目开发？就它那性能？用“悲剧”来形容都嫌对不起这词。

其三：你是否考虑过当别人接手你开发的产品进行升级维护或二次开发时的无限痛苦？连强大的开发工具都不具备，产品的安全性及拓展性从何谈起？难道你打算让其他程序员陪你加班熬夜事倍功半？

小兄弟，你还是得多反思下自己为什么不能用C#、JAVA或者Object-C进行游戏开发，成天守着Javascript你侬我侬的，吊死在一棵树上有意思吗？看看人家Unity3D多聪明，脚踏几条船；你也不比Flash，毕竟人家先入为主；你又不像富二代Silverlight那样有个强悍的亲爹。所以，还是安分的从基层开始打拼吧。既然上帝赋予你了Canvas这么好的天赋技能，做做小游戏，小动画之类的，搞点网页创意也能赚钱呀，行行出状元嘛。

听此一席话，HTML5茅舍顿开。

- HTML5，敢问路在何方 -

HTML5作为HTML4的下一个版本，无可非议，按照进化论法则，新事物总会取代旧事物，有那么一天HTML5会全面取代HTML4。不过可别忘了一点，HTML4、HTML5甚至什么HTML6、HTML7…其本质不过都是HTML标记语言而已，后面版本号加个1就能成仙啦？

在国外，尤其是欧美国家，对HTML5呼声很高，推崇的团体也很多，但实际的应用却很少，更多的则是在探路；欧美人比中国人更热衷于追求时尚，他们对HTML5的前期铺垫与布局总是显得义无反顾。因此，如果你的HTML5应用/外包是针对欧美等发达国家，相信这条路你没选错。

反观国内，瞎跟风是国人本性，很多朋友就算一无所知，但浏览网页时一不小心看到了HTML5的软文水文便开始上瘾成性，仿若IT界的庞氏传销，深陷其中而不可自拔；不可否认，本人也是类似的始作俑者，但我更加务实而非追虚；我更习惯用实实在在的代码和Demo证明我所命题的结论是正确的。而目前HTML5在国内甚至连一款成功的产品都没见过，更别说向大规模领域进军了。

或许5至10年后，甚至更久的未来，HTML5终会迎来登基的那天，可惜地球依旧在转。对于程序员来说，网页里的Javascript程序会显得不那么别扭了；而对于用户来说，其实啥也没有改变。客户们永远不知道什么叫Canvas，什么是HTML5，他们只知道屏幕里摆着一张比较炫的网页，仅此而已。

5至10年后，相信那时很多像我一样的中年人已经不再写代码了。程序员这个行业兴起较晚，仅仅几十年依旧无法通过科学的概率统计归纳和证明长期电脑辐射与高强度脑力劳动对人体机能的潜在影响；外加持续的颈椎病、肩周炎和腰椎间盘突出等职业病困扰。试想，我仅用了整3年业余时间便已完成了60余万字的博文和无法统计的超量原创代码，而5年呢，我心中的梦想已了然实现了吧；至于10年后或者更久，我想还是等过了2012再从长计议吧。

- 脱掉有色眼镜看HTML5 -

看到这，相信依旧有那么一群HTML5的卫道士们会对此嗤嗤以鼻。没错，反观你们在喷C#，在喷Silverlight时那种猥亵表情，我宁愿用事实证据和案例来捍卫我忠贞不渝的立场；可是，你们拿得出来吗？别愤青了，伤不起啊小朋友们。

HTML5其实充其量不过一概念车，相当的酷炫。然而你是否想过，假如让这么一辆还在完善中的概念车跑上高速公路，会是件多么恐怖的事？

一位大哥曾经说过：“HTML5是未来的趋势，但不是现在的优势。”进化论演绎着万事万物进化的完整过程而非一蹴而就。随时间沉淀，伴着“天时、地利、人和”，进化必然降临，无须多虑；拔苗助长与急于求成只会物极必反。

有那么一天，我会用它来制作超酷的网站，就像我10年前用FrontPage打开我生命中第一张网页一样兴奋不已。

本文链接

Silverlight游戏研发手记：(八)向Windows Phone移植之2D跨平台迁移

2012-05-02T03:11:00Z

Silverlight 5集成了XNA，Windows Phone 7.1同样也拥有SL.XNA模式，基于Mono的开源产品Moonlight更能实现多平台部署；可见，Silverlight离跨平台的终极目标已越来越近。

为了向伟大的梦想迈进，我们不妨先从Silverlight与Windows Phone 2D的双向迁移开始深入探索。

本系列前5节我曾为大家讲解了一款基于Silverlight浏览器插件的SLG游戏Demo，该游戏作为向Windows Phone平台无缝迁移案例再好不过，只需简单几个步骤而已：

1、按照第六节的方法创建一个SL.XNA模式的Windows Phone游戏项目。

2、打开第五节的那款SLG Demo游戏源码，将其中的所有类和代码拷贝到第1步的项目中。

3、运行游戏项目(WP版本源码下载)。

无语了…这不是开玩笑吧？有这么简单？

没错，若将两个项目的代码整合成一个，就成了真正意义上的完美跨平台了。为了进一步证明该观点的正确性，我通过以上方法如法炮制了另外一款教程中的Silverlight ARPG游戏Demo源码，整个过程不过几分钟而已(WP版本源码下载)：

苍天呀！大地呀！坑爹呀？

先莫感叹，这样的跨平台移植效率很夸张，对于性能要求不高的2D游戏来说性价比非常不错，尤其是优化过Storyboard和DispatcherTimer的Silverlight 2D游戏，其实际效果尤其出色；

不过，凡事还得两面看。

若游戏运算量大，同屏呈现的图形数量多、尺寸大，甚至大量3D模型，那么对于配置依旧还不算太高的Windows Phone手机来说，该方案绝对不可取。于是我们便得从Silverlight 5和Windows Phone中的SL.XNA模式着手进一步探寻完美解决之道。

是动真格的时候了，从下一节开始，我将肩负起构建跨平台3D游戏之重任，更加深入的为大家讲解如何搭建基于Silverlight与Windows Phone之间的高性能3D游戏框架，Silverlight 3D之门明天即将全面开启~敬请关注。

推荐参考：Nowpaper和Williams关于Windows Phone的游戏开发博客。

本文链接

Silverlight游戏研发手记：(七)向Windows Phone移植之双向交互

2012-04-11T03:49:00Z

继完成游戏主体框架搭建后，接下来我将通过SL.XNA模式中Silverlight控件与XNA对象之间双向交互操作的例子，向大家进一步讲解框架的拓展使用及简单的承载演示。在此之前大家需要理解Windows Phone移动设备与传统桌面设备在操作方面的差异。

直观上看，桌面应用大多使用鼠标加键盘的操作方式：鼠标左键、中键、右键，包括单击(按下、放开)、双击以及滑动、拖动、滚动等；而Windows Phone的操作方式则以触控加虚拟键盘为主：按下、放开、按住滑动、各种(多指)手势等；当然，也可以实现像NDS那样通过麦克风实现语音与游戏的交互。而Windows Phone游戏开发中则触摸以为主要输入方式，下面我将分开讲解各种触控操作在Windows Phone中的代码实现。

一、XNA中的触控操作

在此之前，很有必要向新手朋友们简要阐述一下XNA的运行机制：XNA是通过传统的轮询(循环)方式呈现游戏的，即每秒钟对游戏逻辑进行N次数据更新(Update)并将对象重新绘制到屏幕上(Draw),这个频率N在代码中的设定为timer.UpdateInterval = TimeSpan.FromTicks(333333); 即30fps(30帧每秒)。

举个例子：假如我们想让一名战士从(0,0)坐标向(300,300)坐标移动，若该战士的移动速度系数Speed=5，那么我们只需在Update()方法中让他的位置属性(X,Y)分别加上Speed(X+Speed,Y+Speed)，于是两秒钟后战士将到达目的地(X+2*5*30，Y+2*5*30)=(300,300)。根据前面所述游戏循环机制，每执行Update数据一次，屏幕就会擦除掉之前的画面然后重新Draw新的画面，于是在这两秒钟内，战士的位置会发生2*30=60次变化，依次为(0,0),(5,5),(10,10),(15,15)……(295,295),(300,300)。短短2秒钟的时间里战士位置连续变化了60次，游戏屏幕好比黑板一样，擦了60次，又画了60次，由于频率很高，好比电视欺骗人眼球同样原理，呈现的是一种连续的动态效果，最终便形成了游戏意义上的“战士移动”动画。

由此我们可以明确：XNA中无论编写什么都必须基于循环，因此XNA模式中无论是低级触控(按下、放开、按住滑动)还是高级(路由)手势，都得放在游戏循环（Update）中进行时时的监测(轮询式)：

        private void Update(object sender, GameTimerEventArgs e) {
            inputHandler.MonitorTouch();
            inputHandler.MonitorGestures();
        }

        /// <summary>
        /// 监测触摸(XNA模式,置于Update轮询中)
        /// </summary>
        public void MonitorTouch() {
            TouchCollection touchCollection = TouchPanel.GetState();
            foreach (TouchLocation location in touchCollection) {
                TouchEventArgs e = new TouchEventArgs() { Location = location };
                switch (location.State) {
                    case TouchLocationState.Pressed: if (Press != null) { Press(this, e); } break;
                    case TouchLocationState.Moved: if (Move != null) { Move(this, e); } break;
                    case TouchLocationState.Released: if (Release != null) { Release(this, e); } break;
                }
            }
        }

        /// <summary>
        /// 监测手势(XNA模式,置于Update轮询中)
        /// </summary>
        public void MonitorGestures() {
            while (TouchPanel.IsGestureAvailable) {     //判断是否还有手势尚未被处理
                GestureSample gesture = TouchPanel.ReadGesture(); //读取尚未处理的手势
                GesturesEventArgs e = new GesturesEventArgs() { Gesture = gesture };
                switch (gesture.GestureType) {
                    case GestureType.Tap: if (Tap != null) { Tap(this, e); } break;
                    case GestureType.DoubleTap: if (DoubleTap != null) { DoubleTap(this, e); } break;
                    case GestureType.Hold: if (Hold != null) { Hold(this, e); } break;
                    case GestureType.VerticalDrag: if (VerticalDrag != null) { VerticalDrag(this, e); } break;
                    case GestureType.HorizontalDrag: if (HorizontalDrag != null) { HorizontalDrag(this, e); } break;
                    case GestureType.FreeDrag: if (FreeDrag != null) { FreeDrag(this, e); } break;
                    case GestureType.DragComplete: if (DragComplete != null) { DragComplete(this, e); } break;
                    case GestureType.Flick: if (Flick != null) { Flick(this, e); } break;
                    case GestureType.Pinch: if (Pinch != null) { Pinch(this, e); } break;
                    case GestureType.PinchComplete: if (PinchComplete != null) { PinchComplete(this, e); } break;
                }
            }
        }

如果还不能理解XNA的游戏循环原理，大家不妨将游戏循环频率设定为每3秒/次，再进一步测试XNA中触控操作，是否发现了什么？

二、Silverlight控件的触控操作

如果你是一位Silverlight(Web)开发者，你会发现Windows Phone中的Silverlight控件相当给力(以Image控件为例)：

图中所有框住的事件均为路由触控事件，且慢，居然还有Mouse……事件，刹那间泪崩了，这不是BUG，我反正信了。就如智能感知提示的那样：Mouse这一系列事件是“触笔的笔尖接触屏幕”时发生的，类比桌面鼠标事件。而其余紫色框住的部分则为Windows Phone专有触控事件，其中Tap、DoubleTap、Hold和XNA中的一致，剩下的手势则可通过3个Manipulation连锁事件自由实现，灵活度相当高。此时或有有朋友会问：同样是路由的MouseLeftButtonDown和Tap到底有何区别？不妨拿起你手中的Windows Phone测试一下不就知道啦 ^ ^

当然，Silverlight同样也拥有类似XNA中的非路由低级触控。于是我将以上关于XNA与Silverlight的触控操作进行最终整合，以代码的形式封装成一个名为InputHandler（输入处理器)的类，内置了Silverlight与XNA的所有触控操作(注意了，如果使用该类中的XNA模式触控必须将MonitorTouch()和MonitorGestures()两个方法放置于主循环的Update()中方能起效)：

    /// <summary>
    /// 输入处理器
    /// </summary>
    public sealed class InputHandler {

        /// <summary>触摸按下时触发</summary>
        public event EventHandler<TouchEventArgs> Press;
        /// <summary>触摸持续按住并移动时触发</summary>
        public event EventHandler<TouchEventArgs> Move;
        /// <summary>触摸放开时触发</summary>
        public event EventHandler<TouchEventArgs> Release;

        /// <summary>
        /// 创建输入处理器
        /// </summary>
        /// <param name="mode">模式</param>
        public InputHandler(TouchModes mode) { Mode = mode; }

        TouchModes _Mode;
        /// <summary>
        /// 获取或设置触控模式
        /// </summary>
        public TouchModes Mode {
            get { return _Mode; }
            set {
                _Mode = value;
                Touch.FrameReported -= Touch_FrameReported;
                TouchPanel.EnabledGestures = GestureType.None;
                if (value == TouchModes.Silverlight) {
                    Touch.FrameReported += Touch_FrameReported;
                } else if (value == TouchModes.XNA) {
                    //启动所有手势(也可根据实际情况选择部分启动)
                    TouchPanel.EnabledGestures = GestureType.Tap | GestureType.DoubleTap | GestureType.Hold | GestureType.FreeDrag | GestureType.Flick | GestureType.Pinch;
                }
            }
        }

        #region Silverlight模式

        /// <summary>
        /// 获取或设置参照物(Silverlight模式)
        /// </summary>
        public UIElement Reference { get; set; }

        void Touch_FrameReported(object sender, TouchFrameEventArgs args) {
            TouchPoint point = args.GetPrimaryTouchPoint(Reference); //参数若为null则相对于屏幕垂直呈现时的左上角(按键右置水平呈现时的左下角)
            if (point != null) {
                TouchEventArgs e = new TouchEventArgs() { Point = point };
                switch (point.Action) {
                    case TouchAction.Down: if (Press != null) { Press(this, e); } break;
                    case TouchAction.Move: if (Move != null) { Move(this, e); } break;
                    case TouchAction.Up: if (Release != null) { Release(this, e); } break;
                }
            }
        }

        #endregion

        #region XNA模式

        /// <summary>短暂地触控了屏幕上的一个点时触发</summary>
        public event EventHandler<GesturesEventArgs> Tap;
        /// <summary>快速连续点按了屏幕两次时触发</summary>
        public event EventHandler<GesturesEventArgs> DoubleTap;
        /// <summary>触控屏幕上的某一点约一秒钟时间时触发</summary>
        public event EventHandler<GesturesEventArgs> Hold;
        /// <summary>触控屏幕，然后执行水平（从左到右，或从右到左）手势时触发</summary>
        public event EventHandler<GesturesEventArgs> VerticalDrag;
        /// <summary>触控屏幕，然后执行垂直（从顶部到底部，或从底部到顶部）手势时触发</summary>
        public event EventHandler<GesturesEventArgs> HorizontalDrag;
        /// <summary>触控屏幕，然后执行自由格式的拖动手势时触发</summary>
        public event EventHandler<GesturesEventArgs> FreeDrag;
        /// <summary>触控屏幕上的两点，然后聚合或分开两点时触发</summary>
        public event EventHandler<GesturesEventArgs> DragComplete;
        /// <summary>同时执行触控与快速擦过屏幕的操作时触发</summary>
        public event EventHandler<GesturesEventArgs> Flick;
        /// <summary>拖动手势（VerticalDrag、HorizontalDrag 或 FreeDrag）已完成时触发</summary>
        public event EventHandler<GesturesEventArgs> Pinch;
        /// <summary>收缩操作已完成时触发</summary>
        public event EventHandler<GesturesEventArgs> PinchComplete;

        /// <summary>
        /// 监测触摸(XNA模式,置于Update轮询中)
        /// </summary>
        public void MonitorTouch() {
            TouchCollection touchCollection = TouchPanel.GetState();
            foreach (TouchLocation location in touchCollection) {
                TouchEventArgs e = new TouchEventArgs() { Location = location };
                switch (location.State) {
                    case TouchLocationState.Pressed: if (Press != null) { Press(this, e); } break;
                    case TouchLocationState.Moved: if (Move != null) { Move(this, e); } break;
                    case TouchLocationState.Released: if (Release != null) { Release(this, e); } break;
                }
            }
        }

        /// <summary>
        /// 监测手势(XNA模式,置于Update轮询中)
        /// </summary>
        public void MonitorGestures() {
            while (TouchPanel.IsGestureAvailable) {     //判断是否还有手势尚未被处理
                GestureSample gesture = TouchPanel.ReadGesture(); //读取尚未处理的手势
                GesturesEventArgs e = new GesturesEventArgs() { Gesture = gesture };
                switch (gesture.GestureType) {
                    case GestureType.Tap: if (Tap != null) { Tap(this, e); } break;
                    case GestureType.DoubleTap: if (DoubleTap != null) { DoubleTap(this, e); } break;
                    case GestureType.Hold: if (Hold != null) { Hold(this, e); } break;
                    case GestureType.VerticalDrag: if (VerticalDrag != null) { VerticalDrag(this, e); } break;
                    case GestureType.HorizontalDrag: if (HorizontalDrag != null) { HorizontalDrag(this, e); } break;
                    case GestureType.FreeDrag: if (FreeDrag != null) { FreeDrag(this, e); } break;
                    case GestureType.DragComplete: if (DragComplete != null) { DragComplete(this, e); } break;
                    case GestureType.Flick: if (Flick != null) { Flick(this, e); } break;
                    case GestureType.Pinch: if (Pinch != null) { Pinch(this, e); } break;
                    case GestureType.PinchComplete: if (PinchComplete != null) { PinchComplete(this, e); } break;
                }
            }
        }

        #endregion

    }

最后经过反复的对比测试，得出以下结论：Silverlight模式在触控方面对比XNA最大优势在于：Silverlight的触控是基于事件驱动的(触发式)，是同步的。显而易见，针对低级触控操作，Silverlight模式性能更高；相对于具体控件，Silverlight触控事件效率更高，使用更方便；总体来说，不论是精确度、灵活度还是开发效率和维护效率，Silverlight触控模式都明显优于XNA模式。

因此，这也是为什么微软会在WP7.1开始重点推出SL.XNA模式的主要原因了：SL负责游戏的UI部分，而XNA则负责绘制游戏对象，分工明确，效率与性能兼具。

为了精确论证以上观点的完美可执行性，我特意编写了一个SL控件与XNA精灵交互的Demo：

如上图，不仅有2D精灵，也有3D骨骼动画模型；有Silverlight按钮(UI)，也有XNA按钮(UI)；所有对象均同屏显示，且可相互操作(封装了一个名为UIHandler的UI管理类，详见本文结尾处源码)。以最左边“SL控件+XNA 2D精灵”的“转向”交互为例，首先我们赋予XNA精灵一个Direction属性：

        /// <summary>
        /// 获取或设置朝向
        /// </summary>
        public virtual Directions Direction { get; set; }

当点击“转向”Button时，触发Click事件修改该精灵的Direction属性：

        button.Click += delegate {
            int direction = (int)role1.Direction + 1;
            role1.Direction = direction > 3 ? 0 : (Directions)direction;
        };

同时，该精灵的Direction属性新值重新反馈给Silverlight的TextBlock控件并显示出来:

textBlock.Text = ((Directions)role1.Direction).ToString();

由此便完成了SL -> XNA –> SL这样一个双向交互的演示。从该案例中大家是否体会到了Silvelight UI和XNA Sprite之间的亲密无间？当然了，SL与XNA 3D对象的交互也同样方便快捷（详见源码），不过需要注意一点，在绘制模型代码段中必须加入以下三句话方能正常显示(否则会出现因与SpriteBatch混合作用而导致的贴图呈现部分透明状态)：

            //呈现模型蒙皮网格
            foreach (ModelMesh mesh in currentModel.Meshes) {
                foreach (SkinnedEffect effect in mesh.Effects) {
                ......

                    effect.GraphicsDevice.BlendState = BlendState.AlphaBlend;
                    effect.GraphicsDevice.DepthStencilState = DepthStencilState.Default;
                    effect.GraphicsDevice.SamplerStates[0] = SamplerState.PointClamp;
                ......
                }
            }

至于纯XNA界面与XNA精灵的交互例子我就不再多说了，开发过XNA的朋友都清楚，需要将UI绘制出来后时时判断触控点与各UI间的位置关系最终做出判断，代码量大，编码繁琐；总之XNA做UI吃力不讨好，巨蛋痛，真的。

结尾，我认为很有必要提醒大家一下关于游戏开发中使用非常广泛的Point结构体和Math数学库。WPF/Silverlight/XNA中的Point设计各不相同，移植时需特别注意；System.Math和Microsoft.Xna.Framework.MathHelper针对的领域各不相同，前者在三角函数方面更全面(double)，如正弦、余弦、正切、余切等；而后者则主要针对float类型的计算，比如弧度和角度之间的换算等常用的静态方法。

OK，至此我们摸透了SL.XNA中各元素的操控原理与实现，下一节我将对第5节的Demo进行移植，进而向大家展示该框架强而有力的实用性，敬请关注。

本节源码下载地址：SLXnaGame2.zip

手记小结：SL.XNA模式乃集大成者，无论开发2D或是3D游戏，Silverlight负责制作UI高效且便捷，XNA则专业绘制高性能精灵与模型，分工明确，结构合理，互利互补。掌握好SL.XNA开发模式，深刻透析游戏结构布局，分工合作处理好游戏各环节逻辑关系，游戏整体“效率”与“性能”必将最大化。

推荐参考：Nowpaper和Williams关于Windows Phone的游戏开发博客。

本文链接

Silverlight游戏研发手记：(六)向Windows Phone移植之框架构建

2012-03-29T08:00:00Z

海量的美术、庞大而繁杂的人员与资源配备使得网游和端游开发难度系数高居不下；移动开发时代的来临为游戏设计师们提供了第三条绿色通道，这是一次愈加趋近梦想的迅捷契机。

作为一个专情的人，深爱着C#，毋庸置疑的原因；于是，我也爱上了Windows Phone，爱上了C#在Silverlight.XNA中放荡的游走；因为它的存，使得代码移植在页游、端游与手游之间显得格外畅快淋漓。

今天，打开的不仅是一扇门，更是通往美丽新世界的崭新道路；握紧了，战士，你手中无比锋利的C#，鞭笞吧！XAML，神秘的游戏世界正等待您来探索。

轻轻的，我步入了这个陌生而又激动的新圣域，困惑悄然而生：该如何开启Windows Phone游戏开发这个潘多拉之盒？

Sprite，精灵，永恒不变的游戏灵魂铸就者，生命万象之密匙；从精灵的起源去探究创世之初尤能缅怀我的虔诚。

翻开上帝之书MSDN，古老的文字向人类印示着Windows Phone游戏精灵的两种主要创生方式：Silverlight的UElement(所有UI控件的基类)和XNA中的Texture2D(2D纹理)。性能方面，后者绝对专业；不过相对于效率而言，前者则更为出色。彷徨中的我恍然大悟，其实一切真想早已被远古神器Visual Studio 2010暴露得一览无余，抹去岁月的尘土，赫然印着：基于Silverlight与XNA的无缝集成打造最完美之解决方案：

通过Silverlight(Blend)制作游戏界面，XNA实现游戏对象的绘制，双管齐下。开发者不仅能够延续传统.NET基于事件驱动的低耦合编程模式，同时也能享受到XNA高性能的图形绘制与渲染；正如MSDN所述，Silverlight与XNA的完美结合带来的是开发“效率”与“性能”质的飞跃：

由此我们也不难看出，目前的Silverlight不论是作为浏览器插件，还是Windows Phone的主要开发工具，其与XNA融合构建.NET开发者最熟悉的事件驱动架构已成为主流趋势；本节作为系列Demo向Windows Phone平台移植的第一步，我将向大家详细讲解如何搭建游戏的主体框架。

一）配置开发环境

安装Windows Phone SDK 7.1

二）新建游戏项目

打开Visual Studio，点击文件->新建->项目->选择模板 Silverlight for Windows Phone中的“Windows Phone Silverlight和XNA应用程序”，这里我取名叫SLXnaGame：

三）分析解决方案

在解决方案管理器SLXnaGame项目中第一眼看到.xaml顿时泪流满面，无比熟悉的App.xaml以及主页面MainPage.xaml和游戏场景页面GamePage.xaml让所有Silverlight游戏开发者倍感亲切：

四）核心框架搭建

新项目默认为我们打开了MainPage.xaml的前端部分，除了左边垂直摆放着一个偌大的Windows Phone模型外，右边那一长串的xaml再熟悉不过了。由于SLG游戏以水平方向呈现效果更好，因此我们不妨对这个所见即所得的展示窗口进行一些调整，并以一张很炫的图片作为游戏的封面：

如上图，xaml代码中我们可以通过SupportedOrientations="Landscape" Orientation="LandscapeLeft" 设置Windows Phone模拟器横向显示；当然，如果不需要观看预览(比如后面讲到的GamePage)，我们也可以在后台cs文件中编写this.SupportedOrientations = SupportedPageOrientation.Landscape; 实现同样的效果。另外，游戏中所有Silverlight控件所用到的图片资源均统一存放在SLXnaGame项目的(新建)Resource文件夹中，这样我们便可通过如下xaml代码实现图片装载：Source="/SLXnaGame;component/Resource/UI/FrontPage.jpg" 除此之外，为了构建更为灵活的游戏框架，同样可以仿造之前Silverlight游戏教程的做法，编写一个名为Global.cs的全局辅助类存放于SLXnaGameLib(控件类库)项目中：

namespace SlXnaDemoLib {

    /// <summary>
    /// 全局(数据和方法)
    /// </summary>
    public static class Global {

        /// <summary>
        /// 主项目名
        /// </summary>
        static string ProjectName = Application.Current.GetType().Assembly.FullName.Split(',')[0];

        /// <summary>
        /// 项目Resource资源路径
        /// </summary>
        public static string ProjectPath(string uri) {
            return string.Format("/{0};component/Resource/{1}", ProjectName, uri);
        }

        /// <summary>
        /// 获取项目Resource中的位图
        /// </summary>
        /// <param name="uri">路径</param>
        /// <returns></returns>
        public static BitmapImage GetImage(string uri) {
            return new BitmapImage(new Uri(ProjectPath(uri), UriKind.Relative));
        }
    }
}

注意，这里需要添加对System.Windows.dll动态链接库的引用：右键点击SLXnaGameLib项目中的引用->添加引用->选择System.Windows

到此为止，游戏初始界面制作完毕，按F5调试运行；正常情况下我们将看到前面精心设计好的游戏初始画面，此时细心的朋友肯定会注意到一个特殊的警告提示：

由于Silverlight与XNA的兼容模式是从7.1开始才有的新模板，其本质由7.0衍生而来。编译后会发现警告提示“无法引用项目‘SLXnaGameLib’”，但实际上SLXnaGame项目还是能够使用的，如果出现由于兼容问题导致可能出现的无法找到命名空间或类名，可删除对这个SLXnaGameLib的引用后重新再引用一次即可永久解决问题。此处稍作说明提醒大家无需紧张，框架之间的协调问题在后续版本中将进一步完善。

回到正题，接下来我们点击“点击开始”这个闪烁的按钮便会跳转到项目默认自带的第二个页面：GamePage.xaml。对于新手来说，MainPage.xaml是如何通过点击Button实现跳转的呢？机关就在MainPage.xaml左边的小箭头上：

熟悉Silverlight的朋友都清楚，Silverlight中的用户控件(页面)都是以两个文件partial的形式存在：前台(.xaml)和后台(.cs)。常规的做法是通过在前台注册Button的Click="Button_Click"事件，并于后台编写相应代码实现页面之间的点击跳转功能。

        // 简单的按钮单击事件处理程序可使我们转至第二页
        private void Button_Click(object sender, RoutedEventArgs e) {
            NavigationService.Navigate(new Uri("/GamePage.xaml", UriKind.Relative));
        }

接下来我们将目标转向第二个页面，首先打开GamePage.xaml，赫然写着“不需要XAML内容……”，其实我想说：…哥还是留个Canvas吧，哈哈。

继续打开GamePage.cs，终于来到了我们游戏框架的核心部分。默认的代码有些凌乱，稍做调整后我们不妨先对比一下它与标准的XNA游戏中的Game1.cs有什么区别：

做过XNA开发的朋友是否有种豁然开朗的感觉 (新手朋友们可以参考一下XNA的游戏开发机制)。把Silverlight.XNA（以下简称SL.XNA）中的OnNavigatedTo()和OnNavigatedFrom()分别看做是纯XNA中的LoadContent()和UnloadContent()，两者相似度几乎一模一样，只是SL.XNA模式通过一个timer实现了游戏的主循环；注意了，这个timer可是XNA线程框架中的GameTimer，因此我们无需担忧其性能方面的问题：

至于绘图方面，SL.XNA和纯XNA在代码方面几乎是无缝移植。比如我们希望绘制字体，完全可以一字不差的照搬现有的XNA教程中的字体示例；而音乐和音效的播放则同样，将mp3或wav等音频资源加入到SLXnaGameLibContent资源项目中，然后编写一样的代码实现一模一样的功能(注意，mp3和wav的资源存放形式不同，播放方式亦不同)：

        SoundEffect sound;
        Song song;

        // 构造函数
        public MainPage() {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, EventArgs e) {
            content = (Application.Current as App).Content;
            song = content.Load<Song>("Media/MySong");
            MediaPlayer.Play(song);
        }

        // 简单的按钮单击事件处理程序可使我们转至第二页
        private void Button_Click(object sender, RoutedEventArgs e) {
            sound = content.Load<SoundEffect>("Audio/MyAudio");
            sound.Play();
            NavigationService.Navigate(new Uri("/GamePage.xaml", UriKind.Relative));
        }

到此有朋友要问了：仅仅是调用了XNA中的字体和音乐，与纯XNA又有何区别？Silverlight控件呈现问题甚至还不需要字体呢，干嘛非得多次一举给XNA加个Silverlight壳？

别急，接下来便是Silverlight与XNA交互实现的关键：UIElementRenderer

就像本文开头所述那样，完美的交互必须是Silverlight的UElement和XNA的Texture2D之间的非跨线程交互操作，大家不妨先看看最终的实现代码：

       UIElementRenderer elementRenderer;
        public GamePage() {
            InitializeComponent();
            this.SupportedOrientations = SupportedPageOrientation.Landscape;
            this.LayoutUpdated += GamePage_LayoutUpdated;
            ....
        }

        /// <summary>
        /// 允许页面绘制自身。
        /// </summary>
        private void Draw(object sender, GameTimerEventArgs e) {
            graphicsDevice.Clear(Color.CornflowerBlue);
            elementRenderer.Render(); //通过elementRenderer呈现Silverlight中的UElement
            spriteBatch.Begin();
            spriteBatch.Draw(elementRenderer.Texture, Vector2.Zero, Color.White); //通过XNA的形式将elementRenderer整体绘制出来
            spriteBatch.End();
        }

        /// <summary>
        /// 创建一个可以被XNA绘制的Silverlight-UI展示器UIElementRenderer
        /// </summary>
        void GamePage_LayoutUpdated(object sender, EventArgs e) {
            if (ActualWidth > 0 && ActualHeight > 0 && elementRenderer == null) {
                elementRenderer = new UIElementRenderer(this, (int)ActualWidth, (int)ActualHeight);
            }
        }

其实，UIElementRenderer的原理便是将Silverlight中的UElement对象以XNA的绘制形式在Draw()方法中画出来，真想大白：不论是Silverlight的东西还是XNA的东西，所有能看得到的对象最终都将以XNA的形式绘制出来，这也是成就SL.XNA模式得以完美兼具“效率”与“性能”的根本原因。

接下来我们也来俗一把，分别用Silverlight的TextBlock和XNA的Font编写Hello Game：

        protected override void OnNavigatedTo(NavigationEventArgs e) {
            // 设置图形设备的共享模式以启用 XNA 呈现
            graphicsDevice.SetSharingMode(true);
            // 创建可以用来绘制纹理的新 SpriteBatch。
            spriteBatch = new SpriteBatch(graphicsDevice);
            // TODO: 使用 this.content 在此处加载游戏内容
            textBlock = new TextBlock() { Text = "Hello Game, I,m Silverlight TextBlock" };
            LayoutRoot.Children.Add(textBlock); //将textBlock添加进Canvas画布中
            Canvas.SetLeft(textBlock, 10); Canvas.SetTop(textBlock, 20); //设置textBlock在画布中的绝对位置
            font = content.Load<SpriteFont>("Font/MyFont");

            timer.Start();
            base.OnNavigatedTo(e);
        }

        /// <summary>
        /// 允许页面绘制自身。
        /// </summary>
        private void Draw(object sender, GameTimerEventArgs e) {
            graphicsDevice.Clear(Color.CornflowerBlue);
            elementRenderer.Render(); //通过elementRenderer呈现Silverlight中的UElement
            spriteBatch.Begin();
            spriteBatch.Draw(elementRenderer.Texture, Vector2.Zero, Color.White); //通过XNA的形式将elementRenderer整体绘制出来
            spriteBatch.DrawString(font, "Hello Game, I,m XNA Font", new Vector2(20, 55), Color.Yellow); //第三个参数代表绘制的绝对位置
            spriteBatch.End();
        }

默认情况下，后Draw的对象显示在最顶层；当然，如果你想动态更改他们之间的层级深度关系，可以使用Draw方法的其他形态，比如：

值得一提的是，如上面代码所示UIElementRenderer对象创建于GamePage_LayoutUpdated事件中，它的第一个UIElement类型参数为this，即指整个GamePage页面(UserControl)：

试想一下，如果换成是一个Image或者ListBox等控件呢？高度自由的UIElementRenderer给了我们SL.XNA游戏开发无限遐想空间，不是吗？

至此，资源布局及代码结构这些毛坯级也是最核心的框架构建完毕，无论您是单纯的Silverlight开发者，或者XNA游戏开发者，亦或者两者通杀型，这个框架都能为你提供可无限拓展的高性能空间。下一节，我将继续为大家深入讲解SL.XNA中的控件交互，关注哦，^ ^。

本节源码下载地址：SLXnaGame1.zip

手记小结：本节非常详细的为大家讲解了如何从0开始一步步搭建基于Silverlight.XNA游戏框架；新手、老手，又或者你擅长的是Silverlight、WPF或XNA；对于初出茅庐的Windows Phone开发者来说这都是一篇开卷有益的启蒙之章，包括后续的更多章节，旨在通过自身的开发经历让朋友们高效率的掌握Windows Phone开发中关于C#、xaml、Silverlight、XNA等多方面知识。毕竟，一个人的能力与时间极其有限，卓越而经典的游戏需要更多的开发者参与进来，相信我们的共同努力可以铸成属于中国人辉煌的游戏江山！

推荐参考：Nowpaper和Williams关于Windows Phone的游戏开发博客。

本文链接

Unity3D 页游测评报告

2012-03-16T08:03:00Z

目前，能够实现3D页游的主流技术有Silverlight.XNA、Flash、HTML5和Unity3D。其中，Unity3D作为一款专注于3D游戏的浏览器插件，近期在国内外页游产品线骚动异常；本人从多方收集到可注册的Unity3D页游测试发现，当下的Unity3D技术应用尤其在国内正遭遇着尴尬而无奈的窘迫境地，原因为何？大伙不妨先看看其中7款游戏测试数据：

《骑士的远征》（国产）

类型：SLG

模型与场景环境：低

性能：一般

下载体验：动态加载UI和模型动画，但很卡，耗时久

操作：典型的保姆管家式引导，不顺手

综合：单机英雄无敌精简山寨版，传统回合制战棋战斗玩法

论坛玩家评价：卡，枯燥

截图：

《天宠岛》（国产）

类型：休闲对战

模型与场景环境：低

性能：动态对象少，画面较简单，性能一般。

下载体验：第一次进入加载量巨大(本人10M带宽加载了超过5分钟)，对于网吧和普通带宽玩家来说是毁灭性体验，极易造成用户流失。

操作：3D物件动态加载，但没加载完成前均无法被鼠标点击命中，对于新手引导等方面用户体验较差。

综合：3D引擎做的2D游戏，有种鸡肋的感觉，即没有发挥3D特长，同时在动态加载资源方面反而相当劣势。

论坛玩家评价：没有新意，很傻，很无聊

截图：

《Uberstrike》韩国

类型：FPS第一人称射击

模型与场景环境：中等， CS1.6画面水平

性能：动态下载资源时会导致卡屏

下载体验：第一次进入加载量巨大(10M带宽加载了超过5分钟)。

操作：和CS一样

综合：无亮点，还算流畅

论坛玩家评价：加入了科幻元素的CS网页版。

截图：

《InvinciCar》（美国）

类型：竞速

模型与场景环境：很低…

性能：英语不好，一点Go FullScreen，浏览器马上死掉。

下载体验：下载起来没什么感觉，很快

操作：简单

综合：感觉HTML上有无数比他优秀的竞速游戏……

论坛玩家评价：这游戏比较坑爹，连登陆都不用，进去直接可玩，难道这就是传说中的Free Play?还是只是一个演示Demo？

截图：

《自由星球》（国产）

类型：高度自由休闲游戏

模型与场景环境：方块，正如主题所述 - 世界就是方块(Minecraft)

性能：方块好多，有时蛮卡

下载体验：第一次进入加载量挺大，每次打开网页都要重新全部加载？？啊？是Chrome的问题吗？？

操作：非常非常非常……简单

综合：该游戏拥有非常浓厚的国外某块大作影子，应该也算得上页游界首款“硬游戏”了，针对国内非常特殊的页游玩家群体，游戏是否能把握住此类“大爱玩家群体”的心成为游戏成败关键。换个角度，或许该游戏在国外或移动平台上会比Web表现得更亮眼也说不定呢。另外，游戏极易导致浏览器崩溃…难道Chrome是垃圾！？

论坛玩家评价：还是看看CEO致玩家信吧。

截图：

《推倒》（国产）

类型：MMORPG（注意：以下仅是对目前正处于测试阶段半成品的测评报告）

模型与场景环境：中

性能：暂无深度测试

下载体验：这方面做得比其他的好些，对于10M带宽来说还算可以接受

操作：传统3D操作方式，但在宣传时还存在一些联动缺陷

综合：平平淡淡

论坛玩家评价：毕竟还是半成品

截图：

《铁血联盟Online》(美国)

类型：SLG

模型：低，不过很平滑精细(老外设计师就是不一样)

性能：一般

下载速度：场景加载耗时很长

操作：较简单，与经典的《铁血联盟》仍有很大差距

综合：目前应该是公测，但BUG超多，更像是目前“盖房子”类页游的“二战雇佣兵3D单机版”

论坛玩家评价：卡，BUG多，像单机版，每次打开游戏页面都需要重新更新，且更新时间很长。

截图：

除此之外，还有比如《图腾王》、《决斗之刃》、《胸怀三国志》（韩国）、《蓝月》（韩国）等等可搜索到的Unity3D页游，不过由于种种原因无法测试到，所以暂且就告一段落。

经过以上亲测体验，本人感触最深的是3D页游的发展，尤其在国内面临着“巨大”的推广瓶颈：

1、就目前测试到的Unity3D页游来说，基本都是简单休闲类，但这正是2D的强项-亲切而简约；并且3D资源总比2D庞大许多，后期加载的资源容量随便就会达到数百兆之多，如果无法很优秀的处理好动态加载这个环节的话，对于国内以2M网速居多的家庭及单位用户来说，浪费玩家时间即等同于自我毁灭。

2、企事业单位电脑基本无独立显卡，对于3D GPU加速来说是致命性的。

3、就目前所体验到的Unity3D游戏直观效果来说，其实以各种微端技术开发，不用10M，甚至有的0.7的容量便能达到一模一样设置更流畅而华丽效果(目前很流行的微端后期后台异步多线程动态加载模式)，玩家为何不选择高性能微端而采用还加了个壳，性能大降的3D插件？这个真有待开发者深入琢磨琢磨。

4、普遍看来，目前不光是Unity3D页游产品，微端和其他插件3D产品也都处于摸着石头过河阶段，大都以实现功能为主，没有看到创新和亮点…，这便意味着和Money还很难搭上边，如果财力雄厚，为10年磨一剑贮备培养未来人才倒是不错的铺垫：前人栽树，后人乘凉嘛。

5、国内所有Unity3D页游都不推荐使用占有率高达50%以上的IE6，其他插件似乎没这个说法，因本人未开发过Unity3D，所以具体原因尚不清楚。

6、国内与国外环境的迥异，比如国外Unity3D页游首页都不会放什么“Unity3D插件下载安装”之类的按钮，甚至你可能从头到尾都不会知道该游戏到底是什么技术开发的，只有当你的电脑没有安装Unity3D插件时才会提示下载安装，然后跳转到Unity3D国外官网；而国内则因为运营商和XP+IE6的存在，所以出现了前面所述令外国人觉得异常怪异的事情，或许这种情况还会持续long long time，没办法，这就是社会主义国家之国情。

综上，Unity3D页游被夹杂在2D页游和3D微端之间的尴尬境地，难道就没有解决之道吗？想想当年的《雷神之锤》在如此低配置电脑上流畅运行，我们不难想象，单单怪插件公平吗？

大家是否还记得Silverlight.XNA中的一个名为Babylon 3D Engine的开源项目吗？它在动态加载模型方面做得异常出色，我们是不是可以从中得到一些启发呢？

不可否认，3D页游前方的路依旧漫长；既有客观大环境的因素在限制阻挠，其实更多的是开发者们畏惧创新，畏惧优化，畏惧一切现实无法参考的事物；抄袭之风已在全世界蔓延，而不仅仅是中国，这才是3D页游最大的瓶颈。

一款游戏如果真的很有趣，我会毫不吝惜口袋那些钞票，甚至呼朋唤友，兴奋得到处张扬；然而反过来，试问在坐的开发者们：你们开发的游戏真的好玩吗？

本文链接

Silverlight - 无畏前行之刀锋战士

2012-02-21T02:42:00Z

Silverlight，一个低调而伟大的人名，是他创世了Silverlight。

Silverlight发展至今一直遭受着内外多方压力，其根源离不开主流技术之间的博弈以及微软内部利益集团间的名争暗斗。

Silverlight早期1.0时，开发模式为Javascript+C#+xaml，最初的目的是打算实现Flash所不能实现的跨平台以及SEO，同时吸收所有Javascript阵营和.NET阵营的开发者融入，可谓集大成者。随着2.0的发布，慢慢的Silverlight越来越倾向于独立的.NET开发者，且功能越发的超越WPF范畴，不仅得罪了原先的Javascript开发者，同时亦背弃了WPF/E的初衷，大幅分化了WPF开发者，这并不是微软内部某些利益集团高层所希望看到的；而后的Silverlight 5又将XNA给集成了，从那时起，微软内部各方开始恐惧Silverlight这个洪水猛兽，害怕某天连同自己苦心经营的产品也给吞噬了。介于此，Silverlight发展至今受到来自内部WPF\XNA\IE以及外部Flash/Javascript等利益集团的极力阻挠，一路走来非常坎坷。

尤其最近，很朋友开始纠结到底还有没有Silverlight 6？从心里学角度分析，这是人类对完美事物追求的潜意识情节，大家都喜欢越来越好的事物，喜欢永远保值增值的东西，试问谁不想“永葆青春”、“长生不老”？

最典型的例子要属当下许多不明真相的无良人士对HTML5的追捧，该现象便源于对所谓“完美”技术的盲目崇拜。然而背离真理的事实告诉我们完美的东西并不存在。完美便意味着“终结”，谁都如此。我们不妨假设HTML5就是完美技术，当所有的程序员都在用Javascript编程时，日子久了人们会逐渐发现HTML5+Javascript的不足甚至弊端，会否有英雄站出来挑战它呢？当然，而且还会有很多，揭竿而起各抒己见，新的超越HTML5的技术必将出现，以次往复。历史前进的车轮走过无数世纪，见证了无数朝代变迁与科技演化，就人类目前的认知能力而言，说“完美”还尚早了。

近期，与Silverlight工作人员的交流让本人茅舍顿开，原来事实并非网上流传的那样Silverlight即将终结；相反，该现象映射了微软对Silverlight技术的功能及定位已趋向成熟的最终肯定。

Silverlight目前最大的弱势便在于装机量，当然，随着时间的推移并伴随着Win8+对Silverlight的集成，这个数据会急速飙升。Silverlight 5目前已经集成了WPF和XNA的所有精髓，未来，Silverlight作为浏览器插件、WindowPhone平台开发模式以及Win8内置的重要组件，其最合理的存在形式便是“自动更新”。我们完全可以从今天起，将Silverlight 5看做是没有版本号的Silverlight，这样，就算每次更新、升级、改造、维护，用户都无需重新下载安装新的Silverlight.exe，“一键式自动更新”将极大的提升和优化用户体验，同时也避免了在安装Silverlight过程中可能出现的新版本与旧版本之间的冲突而导致的用户流失。

Flash已彻底放弃移动平台，退而选择固守其原有地位；HTML5依旧与HTML4一样，专心扮演好新一代浏览器基础应用活雷锋角色；而Silverlight则以精简的.NET框架形式，秉持最具潜力的C#开发语言优势统一未来桌面及浏览器高级应用领域，通过在Windows Phone与Windows Pad移动平台上的优秀表现与技术积累，逐步向跨平台快速开发方向延伸。

而对于开发者来说，产品胜过雄辩，这才是IT技术领域永恒不变之法则。

本文链接

Silverlight游戏研发手记：(五)SLG动感增效之《幻影粒子》

2012-01-19T10:49:00Z

随着电子技术发展与普及，人们使用电脑时间越来越长，由于人类自身身体比如眩晕症、眼球衰老等客观因素存在，未来玩家会更加倾向于低视疲劳度/低神经刺激的绿色健康休闲2D游戏而非3D。《希魔复活》2D/3D双版本发售后截然不同的反响再一次向印证了2D游戏是永远不会被3D取代的，甚至超越！当然，超越的关键便在于游戏的动态细节处理与把握，这是一种历史必然的进化而非简单回归。

如果说过去，因为计算机的性能瓶颈开发不出高画质、华丽的SLG游戏；但今天，足够的条件让这一切成为现实：Silverlight + 《幻影粒子》，我们正全力打造下一代动感十足之SLG。

还在为游戏中华丽的魔法特技而流口水吗？

其实这一切效果包括阳光、雨滴、瀑布、火焰、爆炸、烟雾、涟漪、魔法等等，我们都可以通过一款名为《幻影粒子》的工具轻松制作：

《幻影粒子》是一款专业级的2D动画特效制作软件(自带有庞大的粒子特效库，官方定期更新，且网上也可以找到很多第三方发布的特效库)，绝对是2D游戏锦上添花之利器，其做出来的粒子效果毫不逊色于3D。不夸张的说，甚至完全可以制作仿真级电影级特效。

没错，是它让我深刻感受到，动画已不再是美术的专利，《幻影粒子》让万能的游戏程序员神奇崛起！

当然，本人也仅仅是一名初学者，有兴趣深入学习的朋友可以在网上搜罗大量相关教程；对于大多数游戏开发者来说，以修改现成的案例作为入门，可以更好的了解该软件的整体使用流程和大致细节处理，掌握在如此庞大而现成的粒子效果库上进行修改和二次创作是性价比最高的使用方案。

那么就暂且班门弄斧一回，分享一下我为本系列教程SLG Demo添加几味特效的制作过程。

以上为一幅传统的RPG地图，对于老游戏来说，或许这样的效果已经很精致了；但是现在的多核电子设备迅猛如此迅猛，以至于为了不让性能白白浪费，我们完全可以在画面方面更进一步，让效果最大化。

如何让静止的烟囱冒出滚滚浓烟？如何让古老的宝箱闪闪发光？如何让失落的水井格外突出？

传说，森林中的每一口水井深处都隐藏着神秘宝藏，当它的主人出现时便会放射出耀眼的绿色光芒。那好吧，我们就先为这口水井添加一道绿光吧！

循着光的轨迹，我们打开《幻影粒子》：

在库面板上右键->快速载入粒子库，我们可以看到已经集成了十多款非常经典的的粒子特效库。

其中的“火花粒子”库中便有一款很有神秘感名为Star Trail 3的粒子特效：

播放后发现尺寸大了些且颜色也不对，必须得修改。于是我们双击打开它的“发射器属性”并对其局部细节及“缩放”和“粒子颜色”属性进行调整：

对比地图中水井的大致尺寸对整个项目进行缩放：

接下来在项目窗口正中间点击一下，便可将该特效放置于项目中：

点击绿色播放按钮，嘿嘿~闪耀的绿光出现啦~！

剩下的问题是，在Silverlight的游戏中如何使用它？当然，首先得将这个动画进行输出：

《幻影粒子》提供的输出格式还挺多的，经过本人一一测试，最终的结论是：只有AVI(无损)和PNG(有损)比较靠谱，分别对应电影特效和游戏特效应用领域。

对于Silverlight来说，毫无疑问，当然选择PNG。当然，特别需要注意的是尽量规避黑色的元素部件；因为《幻影粒子》导出的PNG并非无损，尤其是粒子效果中若掺杂有黑色像素，导出的图片相当糟糕：

OK，按照以上参数点击确定后，我们便可得到连续的120帧粒子动画PNG序列图片。实际上绝大多数2D游戏基本都用不上如此高的帧频，所以我们可以根据游戏的实际品质需求，截取中间部分，并间隔提取必要帧图，比如每间隔4提取一张便足以构建一个连贯循环的绿光动画，再以连续有规律的数字对它们进行命名：

最后，将这些图帧添加到游戏中并通过一个名为Animation的控件呈现出来。以同样的方法，我们在《幻影粒子》中也能找到现成类似的冒烟及闪光动画，将它们稍作修改后便可加入到游戏中烟囱和宝箱上面~哈，瞬间整个游戏生动了许多！

这是一款基于Silverlight的SLG游戏引擎的一部分，在线演示Demo如下(点击下载该Demo源码)：

手记思考：其实，最让人兴奋的莫过于通过《幻影粒子》制作出来的动画特效所有权完全属于制作者，制作者们再也不用担心版权问题(如此大量的变化参数，改动后的样式外观都会发生千变万化)，在它的辅助下进行Silverlight游戏开发真乃如鱼得水~高性能开发效率搭配高品质，这难道不是我们所有游戏开发者最梦寐的追求吗！

中游在线的《WOWO世界开源》，所有游戏厂商都开始在移动平台布局；随着多核手机将成为趋势，手机游戏中多量炫彩动画将不再成为性能问题。近期诺基亚宣布亚太总部将由新加坡迁至北京，这对于Windows Phone应用开发来说锦上添花！加油吧，开发者们！

本文链接

Google的Native Client微笑着抽了HTML5一记漂亮的耳光

2011-12-14T11:40:00Z

日前，Google在加州总部的一次会议上首次公开演示了Native Client项目（简称“NaCl”），Google已经花了三年多时间研发此项目并表示未来的浏览器中将整合该技术，同时宣布Native Client即将起飞，开发者们准备好了吗？

Native Client究竟是啥东西？Google居然撇开HTML5释放如此妖怪，摘录相关介绍中的一段话：Native Client 简单来说就是一套让网络应用 / 软件开发者能够直接利用计算机中资源，而不需要间接透过浏览器来执行的开放原始码技术，技术上跟 ActiveX、Adobe 的 Alchemy 类似。

此文一出，众人纷纷表示那么它肯定是类似.net或者java之类的技术，Google在重新发明ActiveX/Flash。习惯了Google和各位跟班每天叫嚣着HTML5就是未来，就是上帝，就是如来；怎知却实在忍不住蹦出个Google版Flash - Native Client，着实让诸位HTML5崇拜者大跌眼镜：不是约定好了不玩插件了吗？不是说ActiveX是垃圾吗？我靠，又被断臂，你让HTML5崇拜者情何以堪？难道2012真是世界末日？

顺便引用Zipline Game首席执行官的话：“许多人都在谈论HTML5。但其中大多是虚假宣传。目前，我觉得它根本就是名不副实。”Hooper说道，“HTML5开发小组在各大发布会上吹得天花乱坠，但我们却没能见到游戏成品。实际情况是，大部分游戏开发者都不是HTML5程序员。而且，大部分游戏程序员都不愿意使用JavaScript。”

世界就是这样，微软的官僚作风让人难以接受，Google的无间道更让人云里雾里。

或许还是老人家说得对：成功，只青睐行动和事实，而非口舌之快者。Silverlight再好其本身也不会给你带来什么，HTML5目前更不可能带来什么，问下你自己的双手吧，它们给你带来了什么？

本文链接