html5网络游戏开发历程（二）

http://blog.sina.com.cn/s/blog_6486ff490101078d.html

 

昨晚写了html5网络游戏开发历程第一部分，发现很多好友都给予了支持。呵呵，在此，感谢他们的支持与关心。在这里，要特别感谢我老婆小喻，感谢她一直 对我的支持与鼓励，以及一些思想上的帮助，没有她一如既往的支持，或许真走不到今天。其实想在第一部分就想写出来，但考虑到不想把他写成了感谢信，特地放 到第二部分。呵呵，希望大家不要介意。昨天谈完了通信机制，今天主要谈前台动画效果的开发。

     很难想象，一个游戏没有动画效果怎么能被称为游戏，这是当时脑海里的第一个想法。所以，就开始琢磨着怎么用html5和javascript 来做动画。百度搜索之后，发现要实现html5的动画主要有两种方式：一种是css3，最新的css3支持一些简单的动画；另一种是javascript 实现的动画效果。关于css3，网上有好些demo，最流行的是那47个css3动画效果。为此，特地每个都点开看了，确实发现有些效果还是挺震撼的。当 时就试了几个，记得最清楚的是那个落叶的效果，将其加入到了我们游戏中。至此为止，我们的游戏总算有了点动画的效果，兴奋了好一会儿之后，总感觉有点不太 满意的地方。在这里不得不提及一下css3的缺陷，一是兼容性不怎么好。二是总感觉他的效果有点太僵硬，给人都是一种平面动态的感觉，当然我们不能对它要 求太高，毕竟它首先已经支持动画了。所以，给大家的建议就是用css3显示网页的动画还可以，用来做游戏就有点小材大用了。既然第一条路走不通，就开始探 索第二条路。在google英文中我找了一个令我惊叹的开源项目Three.js。是一个用javascript写的3D引擎。在里面，我看到了很多令我 兴奋的例子，如旋转的地球，一看就具有3D的效果。最主要的它还提供Canvas版本和WebGL版本，可以满足不同的需求。在这里，我给大家提供个网 址，你们可以自己去慢慢研究，发掘出自己感兴趣的东西。https://github.com/mrdoob/three.js/，当然，要注意别人的版 权问题。至于如何使用他们，它那边已经提供了好一些例子，稍微看看就可以弄出来了，不需要经过什么大的修改。

基本上不同的代码就是

    function init() {

        camera = new THREE.PerspectiveCamera( 75, windows.innerWidth / windows.innerHeight, 1, 10000 );        camera.position.z = 1000;        scene.add( camera );    }

在scene中加载的元素不一样，自己看要加载哪种，有好一些，当时我试了几种简单的，这里不多讲了，看个人兴趣。然后有时候你加载的东西在屏幕上没有显 示，这时候你得调节你的x,y,z坐标或者摄像头坐标，至于怎么调节，慢慢试吧，我也没有找到好的方法。还有一些动画效果并不需要3D效果，比如NPC的 活动，只是增加一些动画效果，这个javascript也可以实现，并且网上有很多的代码。

      呵呵，今天还有一点不得不要谈，那就是前台的设计和布局。真的是经历了这次开发之后才知道有些东西是需要天分的，最简单的是整个游戏的整体设计和布局，一 个场景哪个部分需要弄成什么效果。呵呵，对于我这个外行来说，头疼了好久，请教了好一些玩游戏玩得比较多的人，最后七拼八凑总算完成了一个稍微像样的场 景，总算不容易。也算让我了解了搞设计的人的不易。也稍微摸出了一点门道，做设计的时候最好使自己头脑处于发热状态，不要有任何的思维定势。最好的办法是 好几个人一起在间房间进行头脑风暴，记下所有的点子，不管当时看来多么的荒唐无聊。

     今天就写到这里了，虽然感觉还有些地方没有谈清楚，但至少这些都是我印象中比较深刻的。写下来一方面希望对有些人会有所帮助，另一方面希望留住逝去的光阴。欢迎转载，希望注明出处：http://control.blog.sina.com.cn/admin/article/article_add.php