famo.us 3D游戏引擎初探
好久之前就看到了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
- <!DOCTYPE HTML>
- <html>
- <head>
- <title>famo.us App</title>
- <meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
- <meta name="mobile-web-app-capable" content="yes" />
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <meta name="apple-mobile-web-app-status-bar-style" content="black" />
- <span style="white-space:pre"> </span><!-- 引入 famo.us 库文件 START -->
- <!-- shims for backwards compatibility 向后兼容的文件-->
- <script type="text/javascript" src="famous_libs/functionPrototypeBind.js"></script>
- <script type="text/javascript" src="famous_libs/classList.js"></script>
- <script type="text/javascript" src="famous_libs/requestAnimationFrame.js"></script>
- <!-- module loader 模式加载 -->
- <script type="text/javascript" src="famous_libs/require.js"></script>
- <!-- famous famous核心文件 -->
- <link rel="stylesheet" type="text/css" href="famous_libs/famous.css" />
- <script type="text/javascript" src="famous_libs/famous.min.js"></script>
- <pre name="code" class="html"><span> </span><!-- 引入 famo.us 库文件 END -->
②配置页面布局文件 index.js
HTML文件已经准备好了，会发现我们的这个index.html的<body>中并无任何内容，那么这个页面该怎么添加进去，实际上就需要通过JS来实现了，现在需要处理一下index.js了，在src文件件中新建index.js文件。
index.js
- define(function(require, exports, module) {
- //引入需要使用的famo.us模块
- var Engine = require('famous/core/Engine');
- var Surface = require('famous/core/Surface');
- //创建一个界面容器
- var mainContext = Engine.createContext();
- //创建需要现实的内容
- var firstSurface = new Surface({
- content: 'hello world <br/><h2>FAMO.US</h2>'
- });
- //将创建的内容添加到界面容器中
- mainContext.add(firstSurface);
- });
③见证效果吧
PS:这个简单的小例子当然无法观察到famo.us的强大，具体可以到官网查看。
这里面最最核心的就是index.js了，会发现其中
- var firstSurface = new Surface({
- content: 'hello world <br/><h2>FAMO.US</h2>'
- });
创建了一个Surface的对象，实际上这个Surface可以映射到HTML标签中的<div>，famo.us已经为我们封装好了
目前本人也就是刚刚接触到这，接下来还要继续学习，后期会完善。