首页 > 代码库 > famo.us 一个JavaScript游戏引擎初探

famo.us 一个JavaScript游戏引擎初探

好久之前就看到了famo.us的优良特性,尤其是它避开浏览器弊病的跳跃思维,再加上自己使用JQM来开发Web App时的页面切换的白屏bug,又比对了sencha touch,最后还是决定将famo.us作为开发框架,它是基于浏览器的,目标就是使页面呈现性能最大化,而我不会拿它来做游戏,只是做简单的WebApp,要的就是这个界面显示性能。

但悲剧的是国内没有关于famo.us的教程,近些日子Google被天朝打压的挺惨,幸运的是famo.us官网还是可以访问的,所以以下的学习结果都来自官网http://www.famo.us/,并且famo.us针对开发者是免费开源的,所以不用担心费用问题。


famo.us的基本信息

famo.us不同于以往的HTML,是通过Javascript来驱动进行页面的渲染和切换,HTML的页面结构是通过DOM,而famo.us是通过它自己的渲染树来进行页面的结构布局,这是它与HTML的区别




famo.us的官方教程

官网提供了一个famo.us的教程,链接地址为http://www.famo.us/university,提供了一系列的demo,所见即所得的编辑器和效果,助于学习。




本人总结的学习教程

需要什么?

一共需要6个文件,5个JS文件+一个CSS文件,可以在官网下载的demo文件中找到

文件结构是怎样的?

需要的库文件已经准备好了,现在如何来使用呢?首先可以在项目中新建几个文件夹

项目名称叫做famous,css文件用于放css文件,famous_libs是放了上面的6个库文件,images中放了项目中将来会使用的图片文件,js放将来会使用的js文件,src是一个比较新奇的文件夹,里面放置了页面布局的js文件(一会儿通过一个小例子了解这个src的作用吧)。

来个小例子吧

①在项目根目录中新建一个index.html文件,这里面需要做一个简单的H5基本文档,并且需要在<head>中引入famo.us的库文件,最后需要引入src文件夹中的一个一会儿需要处理的JS文件

index.html

[html] view plaincopy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.         <title>famo.us App</title>  
  5.         <meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />  
  6.         <meta name="mobile-web-app-capable" content="yes" />  
  7.         <meta name="apple-mobile-web-app-capable" content="yes" />  
  8.         <meta name="apple-mobile-web-app-status-bar-style" content="black" />  
  9. <span style="white-space:pre">    </span><!--  引入 famo.us 库文件  START    -->  
  10.         <!-- shims for backwards compatibility   向后兼容的文件-->  
  11.         <script type="text/javascript" src="famous_libs/functionPrototypeBind.js"></script>  
  12.         <script type="text/javascript" src="famous_libs/classList.js"></script>  
  13.         <script type="text/javascript" src="famous_libs/requestAnimationFrame.js"></script>  
  14.   
  15.         <!-- module loader 模式加载    -->  
  16.         <script type="text/javascript" src="famous_libs/require.js"></script>  
  17.   
  18.         <!-- famous    famous核心文件    -->  
  19.         <link rel="stylesheet" type="text/css" href="famous_libs/famous.css" />  
  20.         <script type="text/javascript" src="famous_libs/famous.min.js"></script>  
  21. <pre name="code" class="html"><span>    </span><!--  引入 famo.us 库文件  END   -->  
<script type="text/javascript"> require.config({baseUrl: ‘src/‘}); require([‘index‘]);//这里引入页面布局的那个在src文件夹中的index.js文件 </script> </head> <body></body></html>

②配置页面布局文件 index.js

HTML文件已经准备好了,会发现我们的这个index.html的<body>中并无任何内容,那么这个页面该怎么添加进去,实际上就需要通过JS来实现了,现在需要处理一下index.js了,在src文件件中新建index.js文件。

index.js

[javascript] view plaincopy
  1. define(function(require, exports, module) {  
  2.     //引入需要使用的famo.us模块  
  3.     var Engine = require(‘famous/core/Engine‘);  
  4.     var Surface = require(‘famous/core/Surface‘);  
  5.     //创建一个界面容器  
  6.     var mainContext = Engine.createContext();  
  7.     //创建需要现实的内容  
  8.     var firstSurface = new Surface({  
  9.       content: ‘hello world <br/><h2>FAMO.US</h2>‘  
  10.     });  
  11.     //将创建的内容添加到界面容器中  
  12.     mainContext.add(firstSurface);  
  13. });  

③见证效果吧


PS:这个简单的小例子当然无法观察到famo.us的强大,具体可以到官网查看。


这里面最最核心的就是index.js了,会发现其中

[javascript] view plaincopy
  1. var firstSurface = new Surface({  
  2.       content: ‘hello world <br/><h2>FAMO.US</h2>‘  
  3.     });  

创建了一个Surface的对象,实际上这个Surface可以映射到HTML标签中的<div>,famo.us已经为我们封装好了






目前本人也就是刚刚接触到这,接下来还要继续学习,后期会完善。