центрировать область отрисовки

2021-04-14 14:31:43 +03:00
parent 9572f80fde
commit 2991d14aaa
3 changed files with 33 additions and 3 deletions
--- a/index.html
+++ b/index.html
@@ -4,11 +4,11 @@
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>КОЛОБОК</title>
        <script src="https://cdn.jsdelivr.net/npm/phaser@3.54.0/dist/phaser.min.js"></script> 
+    </head>
+    <body>
        <script src="игра/001.мир.js"></script>
        <script src="игра/011.phaser.js"></script>
        <script src="игра/101.сцена.js"></script>
        <script src="игра/499.пуск.js"></script>
-    </head>
-    <body>
    </body>
 </html>
--- a/игра/011.phaser.js
+++ b/игра/011.phaser.js
@@ -5,12 +5,37 @@
 *
 */

+
+ПодготовитьОбластьОтрисовки = мир =>
+{
+    var родитель = document.createElement("div");
+    родитель.style = `
+position: absolute;
+left: 0;
+right: 0;
+bottom: 0;
+top: 0;
+display: flex;
+align-items: center;
+    `;
+    var ребёнок = document.createElement("div");
+    ребёнок.style = `margin: auto;`;
+    родитель.appendChild(ребёнок);
+    document.body.appendChild(родитель);
+
+    мир.областьОтрисовки = ребёнок;
+};
+
+
+// // // //
+
 НастроитьИгру = мир =>
 {
    мир.настройки = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
+        parent: мир.областьОтрисовки,
        physics: {
            default: "arcade",
            arcade: {
@@ -37,21 +62,26 @@
    };
 };

+
 // // // //

+
 ЗапуститьИгру = мир =>
 {
    мир.игра = new Phaser.Game(мир.настройки);
 };

+
 /*
 *
 * Последовательность
 *
 */

+
 мир.разобрать(`
 пуск
+    подготовить область отрисовки
    настроить игру
    запустить игру
 `);
--- a/игра/101.сцена.js
+++ b/игра/101.сцена.js
@@ -13,7 +13,7 @@

 ДобавитьФонИзбы = мир =>
 {
-    мир.сцена.add.image(200, 200, "изба");
+    мир.сцена.add.image(0, 0, "изба").setOrigin(0, 0);
 };

 /*