h5游戏用什么引擎开发(Canvas和WebGL,一个有趣、免费和快速的开源H5游戏框架)

发布时间:2023-11-27 09:30:25 浏览量:93次

Canvas和WebGL,一个有趣、免费和快速的开源H5游戏框架

h5游戏用什么引擎开发(Canvas和WebGL,一个有趣、免费和快速的开源H5游戏框架)

Phaser是一个有趣,免费和快速的2D游戏框架,用于制作桌面和移动web浏览器的HTML5游戏,支持Canvas和WebGL渲染。游戏可以通过第三方工具编译到iOS, Android和本地应用。可以使用JavaScript或TypeScript进行开发。






https://github.com/photonstorm/phaser

除了出色的开源社区,Phaser也由 Photon Storm积极开发和维护。由于其快速的支持和开发者友好的API, Phaser目前是GitHub上最受欢迎的游戏框架之一。

  • WebGL和Canvas支持

Phaser在内部同时使用Canvas和WebGL渲染器,并且可以根据浏览器支持在它们之间自动交换。这允许在桌面和移动设备上快速渲染

  • 预加载

将资产的加载简化为一行代码。图像、声音、Sprite Sheets、Tilemaps、JSON数据、XML—所有这些都会自动解析和处理,随时可以在游戏中使用,并存储在一个全局缓存中供游戏对象共享。

  • 物理系统

Phaser支持3个物理系统:Arcade physics,一个非常轻的AABB库,非常适合低功耗设备。Matter.js提供弹性和更高级的支持

  • Sprites

Sprites是游戏的生命之血。定位它们,在它们之间,旋转它们,缩放它们,为它们设置动画,碰撞它们,将它们绘制到自定义纹理上等等。Sprites也有完全的输入支持:点击他们,触摸他们,拖动他们,捕捉他们-甚至像素完美的点击检测

  • 分组

将大量的Sprites组合在一起,以便于共享和回收,避免不断地创建对象。分组也可以发生冲突:例如,一个“子弹”组检查与“外星人”组的冲突,并使用自定义的冲突回调来处理结果。

  • 动画

Phaser支持具有固定帧大小的经典Sprite Sheets以及几种常见的纹理图集格式,包括texture Packer、Starling和Unity YAML。所有这些都可以用来轻松地创建动画。

  • 粒子

粒子系统是内置的,它允许你轻松地创建有趣的粒子效果。创建爆炸或持续的流效果,如雨或火。或者将发射器附加到精灵上以获得喷射轨迹。

  • 摄像头

具有先进的多摄像头支持。轻松创建额外的摄像头,然后在屏幕上的任何位置定位和缩放它们。相机可以滚动,也有特殊效果,如震动,闪光和褪色。四处摇摄,轻松跟随精灵。

  • 输入系统

如果鼠标不停地在屏幕上切换,即使是鼠标也无法切换。触摸,鼠标,键盘,游戏板和许多有用的功能,让你可以制作任何你需要的输入系统

  • 音频系统

Phaser同时支持Web音频和传统HTML音频。

  • tilemap

Phaser只需几行代码就可以加载、渲染和与tilemap相冲突。我们、、支持多个平铺层的CSV和平铺地图数据格式。有很多强大的图块操作功能:交换、替换、删除、添加和实时更新地图

  • 设备缩放

Phaser 2有一个内置的缩放管理器,允许你缩放你的游戏,以适应任何大小的屏幕。控制宽高比、最小和最大刻度以及全屏支持(即将推出Phaser 3)

  • 插件系统

可以利用插件来解决一些基本问题之外的问题

  • 移动浏览器

Phaser是专门为移动web浏览器而构建的。当然,它在桌面上运行的速度也非常快!



h5游戏用什么引擎开发(Canvas和WebGL,一个有趣、免费和快速的开源H5游戏框架)

npm install phaser

或者使用cdn

  • 示例
<!DOCTYPE html>
<html>
<head>
    <script src="http://www.toutiao.com/a6850045223129580043/dist/phaser-arcade-physics.min.js"></script> 
</head>
<body>

    <script></script>

</body>
</html>
var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 200 }
        }
    },
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

function preload ()
{
    this.load.setBaseURL('http://***');

    this.load.image('sky', 'assets/skies/space3.png');
    this.load.image('logo', 'assets/sprites/phaser3-logo.png');
    this.load.image('red', 'assets/particles/red.png');
}
function create ()
{
    this.add.image(400, 300, 'sky');

    var particles = this.add.particles('red');

    var emitter = particles.createEmitter({
        speed: 100,
        scale: { start: 1, end: 0 },
        blendMode: 'ADD'
    });

    var logo = this.physics.add.image(400, 100, 'logo');

    logo.setVelocity(100, 200);
    logo.setBounce(1, 1);
    logo.setCollideWorldBounds(true);

    emitter.startFollow(logo);
}


Phaser是一个非常强大的2D游戏引擎框架,感兴趣的小伙伴不要错过啦!

h5游戏用什么引擎开发(Canvas和WebGL,一个有趣、免费和快速的开源H5游戏框架)

热门课程推荐

热门资讯

请绑定手机号

x

微信扫码在线答疑

扫码领福利1V1在线答疑

点击咨询
添加老师微信,马上领取免费课程资源

1. 打开微信扫一扫,扫描左侧二维码

2. 添加老师微信,马上领取免费课程资源

同学您好!

您已成功报名0元试学活动,老师会在第一时间与您取得联系,请保持电话畅通!
确定