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/