惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Microsoft Security Blog
Microsoft Security Blog
J
Java Code Geeks
GbyAI
GbyAI
aimingoo的专栏
aimingoo的专栏
L
LangChain Blog
I
InfoQ
D
Docker
F
Fortinet All Blogs
Y
Y Combinator Blog
Martin Fowler
Martin Fowler
月光博客
月光博客
B
Blog
Engineering at Meta
Engineering at Meta
T
Tailwind CSS Blog
罗磊的独立博客
博客园_首页
G
Google Developers Blog
Stack Overflow Blog
Stack Overflow Blog
Recent Announcements
Recent Announcements
D
DataBreaches.Net
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
B
Blog RSS Feed
IT之家
IT之家
V
V2EX

博客园 - 布袋

Phaser游戏框架与HTML Dom元素之间的通信交互 Phaser Matter Collision Plugin 碰撞插件 -- iFiero技术分享 Phaser3跟随自定义路径移动的赛车 -- iFIERO游戏教程 用EC5/EC6自定义class的区别及用法 -- Phaser3网页游戏框架 Phaser3让超级玛丽实现轻跳、高跳及加上对应的跳跃声音 PHASER3 设置场景SCENE SLEEPING休眠和WAKE唤醒 Phaser3游戏三角学应用--一只跟随屏幕点击位置游动的鱼 Phaser3 对象池随机产生炸弹并销毁 Phaser3 场景Scene之间的传值 -- HTML JAVASCRIPT 网页游戏开发 GameplayKit的GKStateMachine用法与实例 适配iPhoneX、iPhoneXs、iPhoneXs Max、iPhoneXr 屏幕尺寸及安全区域 Swift使用AVAudioPlayer来调节游戏的背景音乐大小 学好三角学(函数) — SWIFT和JAVASCRIPT游戏开发的必备技能 iFIERO.com 应用UserDefaults储存游戏分数和最高分 一步一步图文介绍SpriteKit使用TexturePacker导出的纹理集Altas SpriteKit在复制节点时留了一个巨坑给开发者,需要开发者手动把复制节点的isPaused设置为false 运用GamePlayKit的GKEntity及GKComponent 的iOS游戏开发实例 SpriteKit手机游戏摇杆JoyStick的使用 -- by iFIERO游戏开发教程 SpirteKit深度复制SKSpriteNode节点及convert转换其它Scene上的节点到当前场景坐标
Phaser3 屏幕适配iPhoneX、iPhoneXs的坑 -- JavaScript Html5...
布袋 · 2018-11-07 · via 博客园 - 布袋

PhaserJS

PhaserJS

坑:
在config内不要把 width 设为 window.innnerWidth
在config内不要把 width 设为 window.innnerWidth
在config内不要把 width 设为 window.innnerWidth

重要的事情得说三遍...

var game;
// once the window loads...
window.onload = function () {
    // 接收 websocket;
    // config of the game;
    var config = {
        type: Phaser.AUTO,
        parent: 'bitgame',
        width: 640, // don't window.innerWidth 
        height: 512,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: {
                    y: 0
                },
                debug: false,
            }
        },
        //*** scenes used by the game
        scene:  [BootScene,PlayGameScene,UIScene]
    }
    game = new Phaser.Game(config);
    // game.scene.add('Boot', BootScene); //*** key,class */
    // game.scene.add('PlayGame', PlayGameScene);
    // game.scene.add('UI', UIScene);
    // game.scene.start('Boot');

    window.focus();
    resize();
    window.addEventListener('resize', resize, false);
}
 
function resize() {
      
    var canvas = document.querySelector('canvas');
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
    var windowRatio = windowWidth / windowHeight;
    var gameRatio =  game.config.width / game.config.height;
    if (windowRatio < gameRatio) {
        canvas.style.width = windowWidth + 'px';
        canvas.style.height = (windowWidth / gameRatio) + 'px';
    } else {
        canvas.style.width = (windowHeight * gameRatio) + 'px';
        canvas.style.height = windowHeight + 'px';
    }


}

更多游戏开源教学:www.iFIERO.com -- 为游戏开发深感自豪