Phase.js介绍

最新推荐文章于 2020-06-29 10:34:53 发布

weixin_34310127

最新推荐文章于 2020-06-29 10:34:53 发布

阅读量304

点赞数

文章标签：游戏移动开发操作系统

原文链接：http://www.cnblogs.com/sutgroup/p/phaser.html

版权

　　Phaser是国外一款免费开源的html5 2d游戏引擎框架,能创建运行在pc端和手机端的html5游戏和应用,而且phaser是一款非常优秀的html5游戏开发框架.

　　phaser.js支持IE9+,firefox,chrome,safari等浏览器,当然移动端的ios5以上的Mobile safari,android2.2以上的stock browser都可以支持.

　phaser.js有两种渲染模式,canvas 和webGL,而且用简单的代码就可以实现图片,声音,文本,精灵图,二进制文件等资源, 　　并且pheaser内置了三个物理引擎,还可以自定义物理引擎

首先,如何获取phaser源码呢,phaser.js是将源码托管到github上的,可以访问https://github.com/photonstorm/phaser/tree/master/build进行下载phaser.js即可,当然里面还有一些精简版可以下载.

下载好了,那么我们就可以写代码了,首先,如果你没有编辑器的话,可以下载sublime当然你还得需要一个服务器环境,我用的是一款比较方便的xampp以上编辑器和服务器环境可以在windows linux Mac OS 上运行,准备好这些,就可以进行html5游戏的开发了!

转载于:https://www.cnblogs.com/sutgroup/p/phaser.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34310127

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Node.js之高性能探秘

DUDUfine的专栏

11-09

1442

高性能Node.js nodejs是什么 Node.js是一个开源和跨平台的基于 Chrome的 V8 引擎的JavaScript运行时环境。可以脱离浏览器环境执行JavaScript代码。 V8引擎：V8是谷歌的开源高性能JavaScript和WebAssembly编译引擎。chrome浏览器中的JavaScript和Nodejs都在V8引擎上运行，该引擎将JavaScript代码转换为更快的机器代码。计算机可以直接运行而无需先解释它。 JavaScript运行时环境：Node 运行时环境包含执行 Ja

three.js学习笔记用Tween.js做动画

mystery的专栏

01-06

7260

Tween.js 可以定义某个属性在两个值之间过渡。我们可以通过Tween.js控制我们的camera(相机)进行漫游或是控制物体或是粒子进行补间动画的操作。添加补间动画 1.定义要控制的属性 var option = { px: camera.position.x, pz: camera.position.z }; 我们这里控制camera(相机)的x,z轴

参与评论您还未登录，请先登录后发表或查看评论

Phase.js:简单的 JavaScript 路由

07-03

阶段.js Phase.js 是用于构建 JavaScript 应用程序的框架。它在将自身注册到依赖项的模块中工作。如果您的模块的依赖项尚未加载，它将把它放在一个堆栈上，等待它需要的所有模块都加载完毕，然后它就会执行。下面是一个例子： phase . module ( 'bar' , [ 'foo' ] , function ( scope ) { alert ( 'i am ready' ) ; } ) ; phase . module ( 'foo' , [ ] , function ( scope ) { scope . doAwesomeStuff = function ( ) { //Do awesome stuff here } } ) ; 不管代码的顺序如何，这都会显示“我准备好了”。如果删除 foo 模块，则 ba

Farm-Game:基于Phase JS框架的儿童农场游戏

05-19

移相农场游戏使用Phase JS框架构建的儿童农场游戏移相器：演示：

js执行顺序(Compile phase and execute phase)

okyoung188的博客

03-13

346

StackOverFlow:JavaScript function declaration and evaluation order

使用phaserjs开发简单h5小游戏

福尔摩杰的博客

07-03

1488

发现很多人玩h5小游戏，感觉比较有意思，加上目前在项目中没什么很忙的事情，然后就想研究一下h5小游戏。在网上搜索了一下，有人推荐使用白鹭引擎（Egret），但是我下载下来之后一直打不开，不知道什么情况。后来在网上发现了一个js框架phaser，然后就尝试了一下。本次是记录一下使用phaserjs开发h5小游戏的过程。（这里面有免费教程Phaser小站，还在学习中）先看一下成果图一、开发前首...

Phase4 Day4 JavaScript & DOM

weixin_43798860的博客

05-07

147

文章目录JS概述变量和声明语言逻辑核心对象1.NumberStringArrayMathBooleanDOM JS 概述 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript是一种弱类型语言它的解释器被称为JavaScript引擎，为浏览器的一部分主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。 ...

fumble:Phase.js中的Fumble游戏

03-26

Fumble游戏，标题中的"Fumble:Phase.js中的Fumble游戏"，显然是使用Phaser.js创建的一款游戏。这款游戏中可能包含了一些基本的游戏机制，如角色移动、碰撞检测、计分系统以及动画效果等。 Phaser.js的核心特性包括...

Pheasant.js:简单的颜色操作

07-03

没有依赖，只有 15ko 的纯 JavaScript (4.5ko gzip'd)。 Pheasant 也可以用作 AMD 模块。用法 Pheasant 暴露一个对象Pheasant 。它有以下方法： .parse 此函数返回已解析字符串的Pheasant.Color对象，如果无法...

基于Web的2D图形引擎Matter.js.zip

07-19

browser (Chrome, Firefox, Safari, IE8 )Mobile-compatible (touch, responsive)An original JavaScript physics implementation (not a port)示例代码：// Matter.js module aliases var Engine = Matter....

php-moon-phase:一个PHP类，用于计算月相以及其他相关变量

05-07

一个用于计算月球相位PHP类。 MoonPhase是一个PHP类，用于计算月球的相位以及其他相关变量。它基于。安装 MoonPhase在Packagist上可用（），可以使用安装。或者，您可以直接从GitHub上获取代码，并直接或通过PSR-0自动加载器包含MoonPhase.php脚本。用法创建Solaris\MoonPhase类的实例，为您想要确定月相的时间提供UNIX时间戳（如果没有，则将使用当前时间）。然后，您可以使用以下类函数来访问对象的属性： phase() ：终结器相位角，以一个完整圆的分数表示（即0到1）。 0和1都对应于月朔，而0.5对应于满月。 get('illumination') ：月球的照明比例（0 =新，1 =满）。 get('age') ：月球的年龄，以天为单位。 get('distance') ：月亮到地球中心的距离（千米）。

启示：适用于Phaser（WebGL渲染）的简单而快速的灯光引擎

02-03

启示适用于Phaser（WebGL渲染）的简单而快速的灯光引擎。例演示版查看！用法启蒙包括3个主要类别： LightSystem类 LightSystem([WIDTH, [HEIGHT, [DEBUG]]]) 这是您需要实例化以生成必要的着色器和渲染图像的主要类。宽度/高度（可选）：用于渲染光照贴图的屏幕外图像的大小。分辨率越高，质量越好。我建议使用256x256，因为较大的值会对性能产生重大影响。 DEBUG（可选）：设置为true以绘制调试内容。 // Create light system var lightSystem = new LightSystem ( 256 , 256 , true ) ; // Call this in your `update` method: lightSystem . update ( ) ; // You *must* call this every time you add/move/remove lights or objects: lightSystem . updateUniforms ( ) ; Ligh

phoria.js:用于在 HTML5 画布 2D 渲染器上进行简单 3D 图形和可视化的 JavaScript 库。它不使用 WebGL。适用于所有 HTML5 浏览器，包括桌面、iOS 和 Android

05-30

phoria.js 用于画布 2D 渲染器上的简单 3D 图形的 JavaScript 库。它不使用 WebGL。适用于任何可以显示 HTML5 Canvas 的设备 - 所有现代浏览器，包括 iOS 和 Android。它使用优秀的向量和矩阵数学库激动人心的现场演示页面： - 测试 0 - 网格上的基本立方体 - 测试 0t - 纹理立方体 - 测试 0uv - UV 坐标纹理 - 测试 0k - WASD 和箭头键在场景中移动 - 测试 0r - 增量旋转 - 鼠标控制 - 测试 0q - 使用四元数的世界和局部轴旋转 - 测试 0p - 对象选择“挑选” - 测试 1 - 立方体周围的动画点光源 - 测试 1d - 场景中的实时调试信息 - 测试 1t - 透明多边形，平原和纹理 - 测试 2 - 示例 WaveFront .obj 文件导入

mario：Phase在PhaserJS中重制Mario

02-04

您可以在上阅读有关实现的书面教程。 :video_game:

phaser.js介绍

Ping果狸的博客

01-17

2362

phaser.js介绍 phaser.js是一款跨平台的HTML5游戏开发引擎，支持以下平台和浏览器：桌面端 IE9+、Firefox、Chrome、Safari等移动端 IOS5以上的Mobile Safari、安卓2.2以上的Stock Browser和Chrome等 CocoonJS加速并打包成原生应用 phaser.js的特征 phaser.js内部支持pixi.j

html5游戏引擎-Pharse.js学习笔记（一）

找寻你的足迹123

04-25

4602

1.前言　　前几天随着flappy bird这样的小游戏的火爆，使我这种也曾了解过html5技术的js业余爱好者也开始关注游戏开发。研究过两个个比较成熟的html5游戏引擎，感觉用引擎还是要方便一些。所以决定从今天正式开始研究html5游戏引擎，并且将从看官网demo的学习整理成博客和大家一起分享。　　我了解过cocos-2d for html5和phaser.js这两个引擎，其中前者比较

pharse.js开发

08-05

1184

http://phaser.io/getting-started-js.php http://blog.lessmilk.com/make-html5-games-with-phaser-1/ ...

phaser.js前端游戏引擎

这是一个前端小白的博客。

06-29

1736

1.创建一个phaser 首先引入<script src="js/phaser.min.js"></script> var game = new Phaser.Game(750, 1214, Phaser.CANVAS, 'box'); 他的参数分别对应，宽，高，使用什么画出，载入的元素。 2.创建一个背景 1.第一步定义一个game.scalManager = {};对象挂载到phaser上，然后在创建场景。 game.scalManager.state = { prel

用pharser 开发消灭星星游戏【草稿】

一名普通码农的菜地

12-04

2368

下面要说一说如何用pharser开发一个消灭星星的游戏。以后再慢慢完善文章及打包，现在先记录一下。 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" conten

three.js 实现波纹效果

最新发布

08-13

### 回答1：要实现波纹效果，可以使用three.js中的ShaderMaterial和WebGLRenderTarget等功能。以下是具体实现步骤： 1. 创建一个平面几何体，并将其放置在场景中。 ```javascript const planeGeometry = new THREE.PlaneGeometry(10, 10, 128, 128); const planeMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff }); const plane = new THREE.Mesh(planeGeometry, planeMaterial); scene.add(plane); ``` 2. 创建一个ShaderMaterial，并将其绑定到平面几何体上。ShaderMaterial中需要定义一个uniform变量用于接收时间信息。 ```javascript const vertexShader = ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `; const fragmentShader = ` uniform float time; varying vec2 vUv; void main() { float strength = 0.05; float speed = 2.0; float frequency = 20.0; vec2 p = -1.0 + 2.0 * vUv; float sx = p.x * cos(time * speed * 0.1); float sy = p.y * sin(time * speed * 0.1); float d = sqrt(sx * sx + sy * sy); float offset = sin(d * frequency - time * speed) * strength; vec4 color = vec4(0.0, 0.3, 0.5, 1.0); gl_FragColor = color + vec4(offset, offset, offset, 0.0); } `; const waveMaterial = new THREE.ShaderMaterial({ vertexShader, fragmentShader, uniforms: { time: { value: 0 }, }, }); plane.material = waveMaterial; ``` 3. 创建一个WebGLRenderTarget，并将其绑定到渲染目标中。这个渲染目标将用于保存平面几何体的渲染结果。 ```javascript const renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight ); waveMaterial.uniforms.map.value = renderTarget.texture; ``` 4. 在每一帧动画中，将时间信息传递给ShaderMaterial中的uniform变量，并将平面几何体的渲染结果渲染到渲染目标中。 ```javascript function animate() { requestAnimationFrame(animate); const time = performance.now() * 0.001; waveMaterial.uniforms.time.value = time; renderer.setRenderTarget(renderTarget); renderer.render(scene, camera); renderer.setRenderTarget(null); renderer.render(scene, camera); } ``` 5. 最后，将渲染得到的波纹效果应用到场景中。 ```javascript const wavePlane = new THREE.Mesh( new THREE.PlaneBufferGeometry(10, 10), new THREE.MeshBasicMaterial({ map: renderTarget.texture, transparent: true, opacity: 0.5, }) ); scene.add(wavePlane); ``` 以上就是使用three.js实现波纹效果的基本步骤。需要注意的是，这里使用的是简单的sin函数实现波纹效果，如果需要更加真实的效果，可以使用更加复杂的算法和纹理贴图。 ### 回答2：实现波纹效果需要使用three.js库，并结合WebGL渲染技术。下面简要介绍实现波纹效果的大致步骤：首先，需要创建一个three.js场景(scene)，并添加一个相机(camera)以及一个渲染器(renderer)来渲染场景。接着，创建一个平面几何体(geometry)，并应用一个材质(material)来呈现平面效果。可以选择使用平面几何体的网格(geometry)和基础材质(basic material)，也可以根据需要进行扩展。然后，为平面几何体添加顶点着色器(vertex shader)和片段着色器(fragment shader)程序，以实现波纹效果。顶点着色器主要用于控制顶点的位置和变换，而片段着色器用于控制像素的颜色等属性。在顶点着色器中，首先定义一个时间(time)变量，用于控制波浪效果的变化速度。然后，使用sin函数或其他数学函数来计算顶点的偏移量，以产生波纹效果。可以通过调整振幅(amplitude)、频率(frequency)和相位(phase)等参数来调整波纹效果的形状和动画。在片段着色器中，可以根据需要定义波纹效果的颜色、透明度、反射等属性。可以根据顶点的位置、法线等信息来计算像素的属性，从而实现波纹效果的逼真度和光照效果。最后，将平面几何体添加到场景中，并通过动画循环渲染器来更新和呈现场景。可以使用requestAnimationFrame函数来实现循环渲染，每次更新波纹效果的时间(time)，并重新计算顶点和片段的属性值。通过上述步骤，就可以实现使用three.js库来实现波纹效果。具体的实现细节和效果参数可以根据实际需求进行调整和优化。 ### 回答3： three.js 是一个用于创建3D图形的Javascript库。要实现波纹效果，可以使用three.js中的ShaderMaterial和PlaneGeometry来创建一个平面，并使用自定义的着色器来表示波纹效果。首先，我们创建一个场景、相机和渲染器： ``` var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` 接下来，创建一个平面和一个着色器材质来表示波纹效果： ``` var geometry = new THREE.PlaneGeometry(10, 10, 100, 100); var material = new THREE.ShaderMaterial({ vertexShader: document.getElementById('vertexShader').textContent, fragmentShader: document.getElementById('fragmentShader').textContent }); var plane = new THREE.Mesh(geometry, material); scene.add(plane); ``` 在HTML文档中，添加一个标签来保存顶点着色器和片段着色器的源码： ``` <script id="vertexShader" type="x-shader/x-vertex"> varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } </script> <script id="fragmentShader" type="x-shader/x-fragment"> varying vec2 vUv; void main() { float strength = 0.5; // 波纹强度 float speed = 1.0; // 波纹速度 float time = performance.now() / 1000.0 * speed; vec2 p = -1.0 + 2.0 * vUv; float a = atan(p.y, p.x); float radius = strength / length(p); float wave = radius * cos(a - time); vec3 color = vec3(1.0, 0.0, 0.0); // 波纹颜色 gl_FragColor = vec4(color * wave, 1.0); } </script> ``` 最后，使用animate函数来循环渲染场景： ``` function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); ``` 通过上述代码，你就可以在浏览器中看到一个实现波纹效果的平面了。你可以调整着色器中的参数来改变波纹的强度、速度和颜色。