HTML5游戏开发 Chapter01 基础知识与Processing.js

来源：互联网发布：mysql over 函数编辑：程序博客网时间：2024/06/06 08:44

1.什么是Processing和Processing.js

Processing可以看成是Java语言的延伸，它的语法规则基于Java，但它是一个为开发面向图形的应用的编程语言和编程环境，你也可以把它认为是一种被简化了的Java，并且带有被简化了的用来绘画和绘图的API。

processing提供了教学可视化的编程语言及运行环境。通过编写processing程序，教师可以将复杂的物理、化学、数学原理形象的展示给学生。比如绘制各种曲线图，波线，粒子，绘制分子结构，当然在生理卫生课上还可以绘制一群小蝌蚪在游泳等动态的图形。
要使用Processing首先要有Java环境，然后去官网下载Processing。
Processing官网：https://processing.org/

Processing.js是一个Processing的Js框架，是被移植到WEB端的Processing，通过该框架可以直接将Processing程序转化成Javascript，移植的作者就是JQuery的发明者，真是应了那句话：没有什么能阻挡程序员将一切搬到WEB上了！
当然，这一切的出现和HTML5的出现有很大联系，WEB有了canvas，audio,video,这些原先只能通过flash 和java插件拥有的功能，Processing.js的画图正是在canvas中画出来的。
Processing.js官网：http://processingjs.org/

开发交互图形的还有一个开源的库：OpenFrameworks，它是基于C++的一个框架，基础就是封装了的openGL。

如果我们只是在WEB上开发一个简单的游戏，无需多么精美的画面和渲染效果（我觉得这只是相对PC或者主机等游戏而言的，毕竟现在H5的游戏画面也已经做的很漂亮了），那么Processing.js canvas足以胜任我们的需求。
当然，如果对游戏要求还是比较高，做一个专业的游戏，例如3D射击游戏等，还是采用Unity来开发吧。

2.Processing.js如何工作

Processing.js实现了一个Java的虚拟机，它的绘图其实是和canvas一起工作的，我们需要写一个sketch文件（Processing文件，后缀为.pde），然后嵌入到html中。
在canvas标签中要写入.pde文件正确的路径。
例如:

<!DOCTYPE html>  <html>  <head>  <title>Test Processing.js</title>  <script src="processing-1.3.6.min.js"></script>  </head>  <body>  <h1>Hello Processing</h1>  <p>我写了一个web.pde文件</p>  <canvas data-processing-sources="web.pde"></canvas> </body> </html>

或者，使用推荐的方式，使用Processing.js直接写Processing代码，Processing.js会将它转化成JavaScript并运行。
例如：

    <script src="processing.js"></script>      <script type="application/processing">      void setup()      {        size(200,200);        background(125);        fill(255);        noLoop();        PFont fontA = loadFont("courier");        textFont(fontA, 14);        }      void draw(){          text("Hello World!",20,20);        println("Hello ErrorLog!");      }      </script>      <canvas> </canvas> //notice no data-processing-sources attribute

3.使用JQuery与php通信

我们如果要做一个简单的H5游戏，可能会使用到一个积分排名的功能，这就需要联网，我们直接使用JQuery的post()方法和php进行通信即可。

$.post("highscorelist.php",...)

4.一些其他的知识

P*O*V 是指多Platform平台，多Operation System ,多个Version。
渲染引擎：Webkit和Gecko
大量js引擎的完善：V8，SpiderMonkey
HTML5和CSS3的API：Animation和Transition
PhoneGap框架可以把应用打包为各种操作系统平台的程序

5.CSS中Transition缓动属性设置

CSS的属性值会在指定的时间内缓缓更新，形成流畅的动画，一个缓动包括4个缓动属性。
Transition-property：设定缓动的属性，默认为all。
Transition-duration：缓动持续的时长。
Transition-delay：指定缓动开始之前延迟时长
Transition-timing=function：指定缓动的运行方式

6.Transform转换

Transform转换可以移动、选择、缩放、倾斜等二维变换操作，结合缓动会更强大。
transform-origin属性，定义变换的中心点。
transform属性，设定要执行的变换命令。
tanslate(x,y)移动
scale(x)或者scale(x,y)放大
rotate(angle)和skew(angle)旋转
transform方法的matrix(a,b,c,d,e,f)直接定义变换矩阵

7.一些其他的资源

sketchpad.cc一个在线的Processing.js sketch编辑器：http://sketchpad.cc/
openprocessing.org大量案例：https://www.openprocessing.org/
Google font用于做游戏的字体：http://www.google.com/webfonts
游戏音效网站：http://ccmixter.org
鼠标样式值：http://www.w3.org/TR/css3-ui/#cursor
缓动效果：http://www.w3.org/TR/css3-2d-transforms/

阅读全文

0 0