开发 HTML5 小游戏
Html5小游戏
在介绍小游戏之前,先看一个框架 Phaser。 Phaser
框架是一个 快速、免费且开源的 HTML5
游戏开发框架,它提供了 Canvas 和 WebGL 两种渲染方式,兼容 PC 端与移动端浏览器。
一、Phaser 版本
在启动 Phaser
游戏前,需要定义一个 Phaser.Game
对象实例,并同时将配置信息传至该实例:var game = Phaser.Game(config)
。在 Phaser2
版本中,定义的是一个全局变量,并作为几乎全部的系统或者场景的入口。但升级至 Phaser3
版本之后,不再使用全局变量来存储游戏实例了。
Phaser2
版本之前
// Phaser.Game(
// width,
// height,
// renderer,
// parent,
// state,
// transparent,
// antialias,
// physicsConfig
// );
Phaser.Game(800, 600, 'Phaser.AUTO', 'game');
复制代码
Phaser3
版本之后
const config = {};
Phaser.Game(config);
复制代码
二、游戏配置 config
const config = {type: 'Phaser.AUTO',title: "Starfall",width: 800,height: 600,parent: "game",backgroundColor: "#18216D",scene: [WelcomeScene, PrizeScene, GameScene, ScoreScene],transparent: false,antialias: true,loader: {baseURL: 'https://raw.githubusercontent.com/wqjiao/phaser-prize/master/', // 资源基本地址crossOrigin: 'anonymous'}physics: {default: "arcade",arcade: {debug: false}},
}
复制代码
1.
type
游戏使用的渲染环境 可选值: Phaser.AUTO、Phaser.WEBGL、Phaser.CANVAS 推荐值: Phaser.AUTO 自动尝试使用WebGL
,如果浏览器或设备不支持,它将回退为Canvas
父节点:Phaser
生成的画布元素canvas
将径直添加到文档中调用脚本的那个节点上,也可以在游戏配置中指定一个父容器parent
。2.
title
游戏界面标题3.
width
、height
Phaser 生成的画布尺寸,即游戏界面的分辨率 默认:width -- 800、height -- 6004.
parent
自定义Phaser
生成画布(游戏界面)的父容器5.
backgroundColor
游戏界面的背景颜色,Phaser3
版本配置项6.
scene
游戏场景- 单场景
const config = {scene: {preload: preload, // 预加载create: create, // 生成游戏界面update: update, // 更新游戏界面}, } 复制代码
- 多场景
// 游戏配置 const config = {scene: [welcomeScene, gameScene], } // 场景1 let welcomeScene = new Phaser.Class({Extends: Phaser.Scene,initialize: function welcomeScene() {Phaser.Scene.call(this, {key: 'welcomeScene'});},// 预加载资源preload: function () {this.load.image('wheel', 'assets/wheel.png');},// 生成游戏界面create: function () {// 游戏界面跳转this.input.on('pointerdown', function () {this.scene.start('gameScene');}, this);},// 更新游戏界面update: function () {console.log('update')}, }); // 场景2 let welcomeScene = new Phaser.Class({Extends: Phaser.Scene,initialize: function gameScene() {Phaser.Scene.call(this, {key: 'gameScene'});},// 预加载资源preload: function () {this.load.image('pin', 'assets/pin.png');},// 生成游戏界面create: function () {// 游戏界面跳转this.input.on('pointerdown', function () {this.scene.start('welcomeScene');}, this);},// 更新游戏界面update: function () {console.log('update')}, }); 复制代码
以上是
Phaser3
版本的配置,但是在Phaser2
版本中的场景设置是放在States
中的:var game = new Phaser.Game(240, 400, Phaser.CANVAS, 'game');game.States = {};game.States.preload = function() {this.preload = function() {game.load.image('wheel', 'assets/wheel.png');game.load.image('pin', 'assets/pin.png');};this.create = function() {// 点击画布 -- 场景跳转game.input.onDown.add(function () {game.state.start('main');}, this);}; }; game.States.main = function() {this.create = function() {};this.update = function() {}; }; 复制代码
7.
transparent
是否设置游戏界面为透明,默认 false,Phaser2
版本配置项8.
antialias
是否显示图片抗锯齿,默认 true9.
loader
表示加载器 baseURL -- 资源的基础地址10.
physics
游戏物理引擎配置
三、Phaser API
以下分三个阶段(preload、create、update)做 Phaser3 API 的介绍
1、preload
preload
表示预加载函数,通过调用 Phaser
中的 Loader
加载器预先加载所需要的各种资源 图片、视频、雪碧图等。
function preload () {this.load.setBaseURL('https://raw.githubusercontent.com/wqjiao/phaser-prize/master/');this.load.setCORS('anonymous');this.load.setPath('assets/');this.load.image('sky', 'sky.png');this.load.spritesheet('dude', 'dude.png', { frameWidth: 32, frameHeight: 48 });this.load.image('btnStart', 'assets/btn-start.png');
}
复制代码
this.load.setBaseURL(basePath)
修改服务器基本路径 basePath -- 基本路径地址(资源位置的服务器地址),如果所有场景的图片路径均一致,可以在config
的加载器loader
中预先配置 但是本地运行时,需要注意环境搭建,可以在本地搭建一个服务,或者资源放在远程服务。this.load.setCORS([crossOrigin])
设置加载文件时使用的跨源资源共享值this.load.setPath('assets/')
设置资源路径,与this.load.setBaseURL(basePath)
类似this.load.image(key, [url])
预加载图片 key -- 表示资源的key,这个字符串是一个链接,指向已加载的资源,在生成游戏对象中使用。 url -- 表示图片路径this.load.spritesheet(key, [url], [frameConfig], [xhrSetting]);
this.load.spritesheet({key: 'bot',url: 'images/robot.png',frameConfig: {frameWidth: 32,frameHeight: 38,startFrame: 0,endFrame: 8}
});
复制代码
key -- 雪碧图的key url -- 雪碧图路径 frameConfig -- 框架配置对象,至少有一个icon的宽高属性 frameWidth
、frameHeight
xhrSetting -- XHR设置配置对象。用于替换加载器的默认XHR设置,不常用。
this.load.audio(key, [urls])
预加载音频this.load.bitmapFont(key, [url])
预加载字体图像文件
this.load.bitmapFont({key: 'goldenFont',textureURL: 'images/GoldFont.png',fontDataURL: 'images/GoldFont.xml'
});
复制代码
textureURL -- 加载字体图像文件的绝对或相对 URL fontDataURL -- 加载字体 xml 数据文件的绝对或相对 URL
2、create
create
表示生成/创建函数,生成游戏对象,比如在 preload
函数中预加载的图片,在该函数中生成显示在画布中
function create () {let sky = this.add.image(400, 300, 'sky');sky.setOrigin(0, 0);let dude = this.add.sprite(32, 48,'dude');let imgText = this.add.text(60, 70, '');this.add.button(200, 300, 'btnStart', function () {this.scene.start('GameScene');}, this);
}
复制代码
this.add.image(x, y, [key])
添加图像 x,y -- 图像坐标;key -- 在preload
中预加载图片的key 注意:图片的添加顺序是有层叠性的this.add.sprite(x, y, [key])
添加雪碧图 x, y -- 图像坐标;key -- 在preload
中预加载图片的key 注意:可以设置动画this.anims.create([config])
// 向左走
this.anims.create({key: 'left',frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),frameRate: 10,repeat: -1
});
// 转身
this.anims.create({key: 'turn',frames: [ { key: 'dude', frame: 4 } ],frameRate: 20
});
// 向右走
this.anims.create({key: 'right',frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),frameRate: 10,repeat: -1
});
复制代码
setOrigin(originX, originY)
设置图像的原点位置 (0, 0) || (0) -- 图像左上角 (0.5, 0.5) || (0.5) -- 图像中心 在Phaser2
版本中使用anchor
锚点做设置anchor.set(0.5)
this.add.text(x, y, [text])
添加文本内容 x,y -- 文本坐标;text -- 文本内容 注意:可以通过imgText.text = '测试文本'
设置文本内容this.add.button(x, y, [key], function () {}, this)
添加按钮this.input.on('pointerdown', function () {}, this)
点击画布this.scene.start([scene])
场景跳转 scene -- 场景名称
3、update
update
表示更新函数,聚焦画布市,即可执行该函数
四、Phaser 相关网站
- phaser 官网
- Phaser 环境配置
- Phaser -- Github
- phaser3 API 中文
- channingbreeze 博客
- Phaser 小站
开发 HTML5 小游戏相关推荐
- egret开发HTML5小游戏-《猫猫大作战》(一)
ps:本文适用于和我一样刚刚入门egret的同学们,大佬看到这里可以忙别的去了. 之前用egret引擎设计了一款双人设计小游戏-<疯狂大乱斗>,算是初步了解了引擎的使用,这次打算开发一款基 ...
- egret开发HTML5小游戏-疯狂大乱斗
简介 寒假开始,花了5天时间利用Egret引擎开发了一款HTML5小游戏,最终界面效果如下: [游戏首页] [游戏图鉴] [游戏截图] 项目结构 主要的类就是list.ts和Main.ts,再就是存放 ...
- Egret开发HTML5小游戏代码分享
本游戏为<Egret HTML5游戏开发指南>中的案例.作者将代码在这里做一下分享.案例中有两个主要的代码文件,一个Main.ts,一个Circle.ts.在Circle.ts中使用了eg ...
- H5页面制作和HTML5小游戏制作平台哪家好
H5页面是由第五代HTML互联网超文本语言进行开发实现的,多数在微信上进行宣传,例如TOM游戏制作平台的游戏案例中也是基于h5进行开发的,包括现在我们看到的网页,都是基于h5这个规范的实现的,现在随着 ...
- 分享21个丰富多彩的 HTML5 小游戏
作为下一代的网页语言,HTML5 拥有很多让人期待已久的新特性.HTML5 的优势之一在于能够实现跨平台游戏编码移植,现在已经有很多公司在移动设备上使用 HTML5 技术.随着 HTML5 跨平台支持 ...
- 初识html5小游戏
本次Html5小游戏使用createjs来开发.基本涵盖这个游戏的全部核心代码. 如下是主要用到的元素: createjs.SpriteSheet 创建雪碧图,将生成好的雪碧图读取出来 createj ...
- 推荐10款超级有趣的HTML5小游戏
HTML5的发展速度比任何人的都想像都要更快.更加强大有效的和专业的解决方案已经被开发......甚至在游戏世界中!这里跟大家分享有10款超级趣味的HTML5游戏,希望大家能够喜欢! Kern Typ ...
- 如何利用C#开发“扫雷”小游戏
本文详细说明了利用C#语言开发"扫雷"小游戏的开发过程.
- 如何不用服务器来开发一个小游戏
我是代长新,来自上海享物说,主要负责游戏客户端研发. 享物说是一个大家可以互相赠送物品,有趣.不花钱的社区平台.为了创造更好的社区氛围,我们决定通过小游戏来增加社区的趣味性和互动性. <乐享花园 ...
最新文章
- FasterRCNN代码解读
- 第六阶段 小学期(一)——电子商务
- Hibernate查询语言(HQL)
- 频率分布直方图组距如何确定_吃透教材理解教参,《直方图》教学反思
- 3.3v转5v开关电源芯片LM2731
- VC++的应用程序框架中各类之间的访问方法
- 无意中发现一个有趣的事情
- Numpy基础(part1)--ndarray数组
- Ajax — 第四天
- leetcode —— 206. 反转链表
- 2021年安徽庐江中学朱天乐高考成绩查询,庐江中学举行2021届高三大型励志报告会...
- Spring源码之bean的销毁registerDisposableBeanIfNecessary方法解读
- java坦克大战生成_Java坦克大战 (一) 之产生一个窗口
- AdminLTE与php,如何使用Vue整合AdminLTE模板
- 【Python-神经网络预测】
- Openwrt:创建编译IPK软件包
- @修改用户(user)信息
- 如何设计一个项目的数据库?
- SQL Server跟踪(Trace)--系统跟踪日志;从小白到大神,文章细节满满,细致到令人发指。
- [Android App] iPhoneX朋友圈小尾巴工具
热门文章
- metasploit基础命令介绍
- 【linux】已加载插件:fastestmirror, langpacks Loading mirror speeds from cached hostfile
- 移动磁盘已用空间0字节要如何办啊
- 算法练习(7) —— 动态规划 Strange Printer
- iOS 非越狱下的代码注入
- MTU、IP MTU 和 MSS 参数详解
- centos7解决hadoop2.6.4多次格式化导致的slave节点datanode无法启动的问题
- 如何调试oracle,sqlserver存储过程
- 能够证明“3=0”吗?
- 流量复制导流工具研究