phaser游戏开发入门1

最新推荐文章于 2024-08-19 14:35:28 发布

101tx

最新推荐文章于 2024-08-19 14:35:28 发布

阅读量1.4k

点赞数 1

分类专栏： H5游戏开发

本文链接：https://blog.csdn.net/tx101q/article/details/83651838

版权

H5游戏开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用phaser开发十几款游戏，感觉这个引擎不错，给大家分享下。demo地址

phaser这个引擎封装做的比较好，常用的物理引擎都有封装，音频方面也特别给力，开发起来就一个字---------------------------“快”

学习一款游戏引擎只需要做的事情有

1）看他的demo演示，看他能做什么。

phaser 能做2d游戏开发，

2）看他的文档和API。看你读懂读不懂

phaser 文档我能读懂，就看你们了

3）做一些简单的代码测试。

便于你亲近它。熟悉了，才能驾驭它。

国内做的比较好的一家网站叫“phaser小站”里边都是教材，非常棒。本人在哪里学了不少，在此表示感谢。

正式开始吧！

我的目标人群是那些基础弱爆了的H5游戏开发者，像当年的自己。所以高手请移驾。教程会非常简单易懂。

(1)构建目录

一款完整的游戏目录如下

res 文件夹（存放静态资源，图片声音等）

lib 文件夹（存放所有的js文件）

index.html html 入口文件。

首先你要构建这个游戏目录。

（2）下载js引擎文件

下载地址如下：

https://cdnjs.cloudflare.com/ajax/libs/phaser-ce/2.11.1/phaser.js

大家记住这个cdnjs.com这个地址，这是一个在线的js库。里边涵盖市面上所有的js框架，大家在里边搜素phaser就能出来许多与之相关的框架。这里我选择phaser-ce版本。这个版本比较成熟。是基于pixi渲染的h5游戏框架，渲染速度方面没得说。大家也可以到官网去下载，大家如果不想动手的话，也可以下载我提供的demo包，里边内容比较齐全。

phaser官网：http://phaser.io/download

官网有ts和js两个版本。

（3）引入js引擎文件构建游戏。

展示helloworld

下面是代码

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo1</title>

  <script src="./lib/phaser.min.js"></script>
  
</head>
<body>
 <script src="./lib/main.js"></script>
</body>
</html>

main.js

//构建游戏  第一第二个参数是游戏屏幕的宽高，这里设置的是自适应屏幕宽高，第三个参数是渲染的方式，这里采用基础的canvas，可以无需服务器就能直接查看结果。如果换成WEBGL，渲染效率高，但是需要设备支持WEBGL，不布置到服务器上无法查看结果
//第四个参数是指定canvas附着的div  这里可以设置为null，第五个参数游戏开始时三个阶段。第一个阶段是预载静态资源。第二初始化游戏 第三游戏渲染更新。

var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS, 'phaser-example', { preload:preload,create: create,update:update });
var k=false;
function preload(){

console.log("预载开始");


}


function create() {
 console.log("初始化开始");
 game.stage.backgroundColor=0xfff;
 //向舞台添加文字
 // 第一参数  x; 第二个参数 y 第三个参数，文字内容，第四个文字样式
 game.add.text(100,100,"你好phaser！",{font: "65px Arial", fill: "#ff0044", align: "center" });

}
function update(){
	//此处内容循环执行，所以要加一个控制代码。
	if(!k){
	console.log("更新！");
	k=true;
	}


}

打开index.html后可以看到下面的页面