H5游戏开发教程1

近期由于工作需要,开发了一系列H5小游戏,最早以前使用原生的canvas开发了,但是开发效率比较低,虽然好多西可以灵活定义,比如滤镜处理,渐变等。但是整体而言开发速度慢,很多时候满足不了实际开发需要。后来逐渐接触到国产的Layabox和国外的PIXI以及Phaser等框架,当然3d方面的有three.js 还有babylon这些都是比较常用的H5游戏框架。而且这几款框架都是比较容易上手的。鉴于跨平台和手机的兼容性问题,我一般使用Phaser和layabox,他们的兼容性不错。phaser的游戏声音模块做的不错,兼容大部分手机,而且游戏结构方面许多东西都封装的不错,支持js与Ts,而且比较容易上手。Layabox内容涉及较广2d和3d都支持,性能也不错。phaser只能目前自支持2d游戏,尚无3d支持。顺便说一下,我是用的是PhaserCe,phaser3目前不断更新完善中,有很多地方会出现兼容性问题。但以后肯定会不错的。当然了使用这两个框架的原因是,用他们做的游戏可以很方便的转化为微信小游戏。Laya可以直接开发微信小游戏,phaser的话需要许多东西准备。推荐大家一个网站:“phaser小站”,很不错的一个网站,大家有时间看看。之后一有时间我就会把游戏开发中的心得写出来,使之成为系列教程。

每个游戏都会为大家使用LayaBox和Phaser两个框架演示。使用语言是typescript。为何会使用typescript,而不直接使用js呢?原因是typescript开发效率会很高,调试也简单,结构清晰。最主要的是它自动转换的js比我们自己写的js不知优秀多少倍。所以配置一下开发环境,果断用typescript吧!

作为第一篇先讲一下屏幕适配问题。phaser使用的是设备像素,layabox使用的是物理像素,简单的说就是phaser游戏中的图片尺寸不能太大,否则需要缩放,但layabox的图片使用大小取决于设备的物理像素。举个例子

同样的图片宽度的图片,在phaser和在layabox的区别如下。具体的像素概念大家自己看吧!像素与物理像素的区别,所以游戏设计是一定要考虑好框架选择和素材的大小以及适配方式。

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页