当前位置： 文江博客话题详情

如何使用 Apache Cordova 和 Phaser 3 创建一个简单的应用程序？

发布于 2025-01-12 04:38:04 字数 445 浏览 0 评论 0原文

我想知道如何将 Phaser 3 与 Apache Cordova 集成。我正在学习一个教程，该教程展示了如何将一架简单的飞机包装到 Cordova 生成的移动应用程序中。

这是教程：使用 Phaser 3 和 Cordova 创建手机游戏

但它指的是旧版本的 Cordova (2019)。我尝试使用当前版本，它显示一个空布局。

我尝试使用 Cordova 的 Web 浏览器插件生成网站版本，但控制台没有显示任何响应。所以我认为 Cordova 应用程序没有加载 Phaser 的库。

有没有办法将当前版本的 Cordova 与 Phaser 3 集成，或者有任何文档可以澄清这一点？

原文

I want to know how to integrate Phaser 3 with Apache Cordova. I was following a tutorial that showed how to wrap a simple airplane into a mobile app generated by Cordova.

This is the tutorial: Creating Mobile Games with Phaser 3 and Cordova

But it refers to an older version of Cordova (2019). I tried with the current version and it shows an empty layout.

I tried to generate the website version with the Web Browser plugin for Cordova, but the console doesn't shows any response. So I think Phaser's library isn't been loading by the Cordova app.

Is there any way to integrate the current version of Cordova with Phaser 3, or any documentation that clarifies this?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

感性 2025-01-19 04:38:04

嗯，这就是我让它运行的方法（又名移相器所需的最小设置）：

  1. 运行默认的 cordova 应用程序。您可以按照本指南执行此操作： https:// cordova.apache.org/docs/en/11.x/guide/cli/index.html
    （这对我来说有点棘手，因为我使用的是 Windows，但按照指南应该可以正常工作）
  2. 将 phaser.min.js 文件和任何资源添加到项目（在我的例子中是 game.js 和 logo.png）。
  3. 更新index.html：

然后运行。

相关代码如下：
（信息：此调整大小和示例基于以下问题：https://stackoverflow.com /a/71302855/1679286)

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    orientation: Phaser.Scale.LANDSCAPE,
    autoRound: true,
    autoFocus: true,
    scale: {
        autoCenter: Phaser.Scale.CENTER_BOTH,
        mode: Phaser.Scale.RESIZE,
    },
    backgroundColor: '#000',
    scene: {
        preload() {
            this.load.image('logo', '/assets/logo.png');
        },
        create() {
            let {width, height} = this.sys.game.canvas;
            let logo = this.add.image(width/2, height/3, 'logo');
            this.tweens.add({
                targets: logo,
                y: (height*2)/3,
                duration: 2000,
                ease: 'Power2',
                yoyo: true,
                loop: -1,
            });
        }
    },
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 100 },
            debug: true
        }
    },
};

window.addEventListener('load', async () => {
    game.scale.once('resize', function(gameSize, baseSize, displaySize){ 
        game.scene.scenes[0].physics.world.setBounds(0, 0, displaySize.width, displaySize.height);
    });
    game.scale.refresh();
});

document.addEventListener('deviceready', onDeviceReady, false);

let game;

function onDeviceReady() {
    game = new Phaser.Game(config);
}
 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Security-Policy" 
            content="default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline';  media-src *; img-src 'self' data: content: blob:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
        <meta name="color-scheme" content="light dark">
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/index.css">
        <title>My FirstGame</title>
    </head>
    <body>
        <script src="cordova.js"></script>
        <script src="js/phaser.min.js"></script>
        <script src="js/game.js"></script>
    </body>
</html>

Well this is how I got it running (aka the minimal setup needed, for phaser):

  1. get the default cordova app to run. You can do that following this guide: https://cordova.apache.org/docs/en/11.x/guide/cli/index.html
    (It was a bit tricky for me, since I'm using windows, but following the guide should work fine)
  2. add the phaser.min.js file and any assets to the project (in my case game.js and logo.png).
  3. update the index.html:

And than it runs.

Here the relevant code:
(Information: this resizing and example is base on this question: https://stackoverflow.com/a/71302855/1679286)

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    orientation: Phaser.Scale.LANDSCAPE,
    autoRound: true,
    autoFocus: true,
    scale: {
        autoCenter: Phaser.Scale.CENTER_BOTH,
        mode: Phaser.Scale.RESIZE,
    },
    backgroundColor: '#000',
    scene: {
        preload() {
            this.load.image('logo', '/assets/logo.png');
        },
        create() {
            let {width, height} = this.sys.game.canvas;
            let logo = this.add.image(width/2, height/3, 'logo');
            this.tweens.add({
                targets: logo,
                y: (height*2)/3,
                duration: 2000,
                ease: 'Power2',
                yoyo: true,
                loop: -1,
            });
        }
    },
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 100 },
            debug: true
        }
    },
};

window.addEventListener('load', async () => {
    game.scale.once('resize', function(gameSize, baseSize, displaySize){ 
        game.scene.scenes[0].physics.world.setBounds(0, 0, displaySize.width, displaySize.height);
    });
    game.scale.refresh();
});

document.addEventListener('deviceready', onDeviceReady, false);

let game;

function onDeviceReady() {
    game = new Phaser.Game(config);
}
 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Security-Policy" 
            content="default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline';  media-src *; img-src 'self' data: content: blob:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
        <meta name="color-scheme" content="light dark">
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/index.css">
        <title>My FirstGame</title>
    </head>
    <body>
        <script src="cordova.js"></script>
        <script src="js/phaser.min.js"></script>
        <script src="js/game.js"></script>
    </body>
</html>
回复 原文
~没有更多了~

关于作者

爱你不解释

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

Promise

文章 0 评论 0

qq_lbRlsh

文章 0 评论 0

待＂谢繁草

文章 0 评论 0

yy2010hell

文章 0 评论 0

漫无边际

文章 0 评论 0

傲娇萝莉攻

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文