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

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

2024-07-09 04:51:34   220人阅读

好久之前就看到了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已经为我们封装好了





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






























        

            
                
                  
                
                

                    联系

                    我们