7 Phaser3-相对定位

最新推荐文章于 2024-06-12 11:13:48 发布

纵横驰骋的小野马

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量96

点赞数

分类专栏： Phaser 3 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qiqi123j/article/details/133326761

版权

Phaser 3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果展示

在这里插入图片描述

关键技术点

Phaser.Display.Align.In.Center 上下左右居中
Phaser.Display.Align.In.BottomCenter 底部居中
Phaser.Display.Align.In.BottomLeft 左下
Phaser.Display.Align.In.BottomRight 右下
Phaser.Display.Align.In.TopCenter 上部居中
Phaser.Display.Align.In.TopLeft 左上
Phaser.Display.Align.In.TopRight 右上
Phaser.Display.Align.In.LeftCenter 左侧居中
Phaser.Display.Align.In.RightCenter 右侧居中

部分主要文件代码

BootScene.js

import {Scene} from 'phaser'
import bear from '@/game/assets/bear.png'
import barbarian from '@/game/assets/barbarian.png'

export default class BootScene extends Scene {
    constructor() {
        super({key: 'BootScene'});
    }

    preload() {
        // 加载图片素材
        this.load.image("bear", bear)
        this.load.image("barbarian", barbarian)
    }

    create() {
        this.scene.start('PlayScene')
    }
}

PlayScene.js

import {Scene, Display} from 'phaser'

export default class PlayScene extends Scene {
    constructor() {
        super({key: 'PlayScene'})
    }

    create() {

        this.barbarian = this.add.image(0,0,"barbarian").setOrigin(0)
        this.bear1 = this.add.image(0,0,"bear").setScale(0.4)
        this.bear2 = this.add.image(0,0,"bear").setScale(0.4)
        this.bear3 = this.add.image(0,0,"bear").setScale(0.4)
        this.bear4 = this.add.image(0,0,"bear").setScale(0.4)
        this.bear5 = this.add.image(0,0,"bear").setScale(0.4)
        this.bear6 = this.add.image(0,0,"bear").setScale(0.4)
        this.bear7 = this.add.image(0,0,"bear").setScale(0.4)
        this.bear8 = this.add.image(0,0,"bear").setScale(0.4)
        this.bear9 = this.add.image(0,0,"bear").setScale(0.4)
        // 相对整个场景居中
        Display.Align.In.Center(this.barbarian, this.add.zone(400, 300, 800, 600));

        //  bear位于barbarian底部居中
        Display.Align.In.BottomCenter(this.bear1, this.barbarian);
        //  bear位于barbarian左下
        Display.Align.In.BottomLeft(this.bear2, this.barbarian);
        //  bear位于barbarian右下
        Display.Align.In.BottomRight(this.bear3, this.barbarian);
        //  bear位于barbarian上部居中
        Display.Align.In.TopCenter(this.bear4, this.barbarian);
        //  bear位于barbarian左上
        Display.Align.In.TopLeft(this.bear5, this.barbarian);
        //  bear位于barbarian右上
        Display.Align.In.TopRight(this.bear6, this.barbarian);
        //  bear位于barbarian左部居中
        Display.Align.In.LeftCenter(this.bear7, this.barbarian);
        //  bear位于barbarian右侧部居中
        Display.Align.In.RightCenter(this.bear8, this.barbarian);
        //  bear位于barbarian居中
        Display.Align.In.Center(this.bear9, this.barbarian);
    }

    update() {
    }
}