🤖

gamemaker web出力のコツ

2025/02/28に公開

GameMaker

stadio

tech

出力されたままの状態だと、全画面にしないとまともにプレイできない。
そのため、HTMLを少し編集した

もともとのキャンバススタイルを消し、

style="width: 80%; height: auto;"

このように設定
全画面でなくても遊べるよう余白を持たせてある

 <button onclick="width_change()" id = "btn">横幅を最大にする</button>
<script>
    window.onload = GameMaker_Init;
    function width_change(){
        canvas.style.width = "100%";	
        document.getElementById('btn').style.display = "none";
    }
</script>

横幅を最大にするためのボタンの配置。
役割を終えたボタンを非表示




<body>
        <div class="gm4html5_div_class" id="gm4html5_div_id">
            
            <!-- Builtin injector for splash screen -->
            

            <!-- Create the canvas element the game draws to -->
            <canvas id="canvas" width="1280" height="720" style="width: 80%; height: auto;">
                <p>Your browser doesn't support HTML5 canvas.</p>
            </canvas>
        </div>


        <button onclick="width_change()" id = "btn">横幅を最大にする</button>


        <!-- Run the game code -->
        <script type="text/javascript" src="html5game/web_gun2000.js?cachebust=2124627223"></script>

        <!-- Builtin injector for injecting runner path -->
        

        <script>window.onload = GameMaker_Init;
function width_change(){
    canvas.style.width = "100%";
	
    document.getElementById('btn').style.display = "none";
}
        </script>



<!--position: absolute; top: 50%; left: 50%; bottom: -50%; right: -50%; transform: translate(-50%, -50%);-->

Discussion