オレンジブログ

オレンジブログ

GameMakerのちょっとしたTipsとか

【GMS2】HTML5ビルドでのテキスト選択無効化

GameMaker:Studio 2 JavaScript ゲーム制作

はじめに

GameMaker Studio 2（GMS2）でゲームをHTML形式でビルドし、スマホでプレイする際に、テキストをタッチするとテキストのコピーを行うメニューが表示されてしまうことがあります。

長押しするとテキストのコピーメニューが出てくる

これはタッチを行うゲームでは非常に邪魔になりますし、さらにそれ以上長押しすると画像保存と判断されて強調されたりしちゃいます。

こんな状態でゲームなんて出来ない

そこで、今回はこの問題を解決する方法を紹介します。試したことは無いのですが、この方法はGMS2で作成したゲームだけでなく、他のHTML5ゲームにも適用可能なはずです。

解決方法

CSSでの対応

まず、HTMLのCSSに以下のスタイルを追加します。これにより、テキストの選択が無効になり、コピーのメニューが表示されなくなります。

body {
    background: #0;
    color: #cccccc;
    margin: 0px;
    padding: 0px;
    border: 0px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

user-selectプロパティの解説

  • user-select: none;: ユーザーがテキストを選択できないようにします。これにより、タッチやドラッグ操作でテキストがハイライトされなくなります。
  • -webkit-user-select: none;: WebKitブラウザ（SafariやChrome）でのテキスト選択を無効にします
  • -moz-user-select: none;: Firefoxでのテキスト選択を無効にします
  • -ms-user-select: none;: Internet Explorerでのテキスト選択を無効にします

これらのプロパティを設定することで、異なるブラウザ間で一貫してテキスト選択を無効にすることができます。
参考

JavaScriptでの対応

さらに、スクリプトを追加して、長押しメニューを防ぐためのイベントリスナーを設定します。これにより、特定の操作が無効化され、コピーのメニューが表示されなくなります。
とはいえ、これは必須ではないです。

<script>
    // 長押しメニューを防ぐためのイベントリスナー
    document.addEventListener('contextmenu', function (event) {
        event.preventDefault();
    }, false);

    document.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
            event.preventDefault();
        }
    }, false);
</script>

JavaScriptの解説

    document.addEventListener('contextmenu', function (event) {
        event.preventDefault();
    }, false);

右クリックメニュー（コンテキストメニュー）を無効にしますcontextmenuイベントが発生したときに、event.preventDefault()を呼び出すことでデフォルトのコンテキストメニューを表示しないようにします

    document.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
            event.preventDefault();
        }
    }, false);

複数のタッチポイントが検出されたときに、デフォルトの動作を無効にします。これにより、ピンチやズームなどのジェスチャーを無効にします

このスクリプトをHTMLファイルの<head>タグまたは<body>タグ内に追加してください。

GMS2に適用

GMS2でビルドされたindexファイルに対して適用させる

以下は、GMS2でHTMLビルドをした後のindexファイルに、これらの変更を適用した例です。
このコードをそのままコピーすると画面サイズやタイトルがサンプルコードのままになってしまうので気を付けてください。

<!DOCTYPE html>
<html lang="en">

    <!-- Custom PreHead code is injected here -->
    

    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name ="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <meta charset="utf-8"/>

        <!-- Builtin injector for disabling cache -->
        <meta http-equiv="pragma" content="no-cache"/>

        <!-- Set the title bar of the page -->
        <!-- Created with GameMaker のところにはサイト名を入れる -->
        <title>Created with GameMaker</title>

        <!-- Custom PreStyle code is injected here -->
        

        <!-- Set the background colour of the document -->
        <style>
            body {
                background: #0;
                color: #cccccc;
                margin: 0px;
                padding: 0px;
                border: 0px;
                user-select: none;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
            }

            canvas {
                image-rendering: optimizeSpeed;
                -webkit-interpolation-mode: nearest-neighbor;
                -ms-touch-action: none;
                touch-action: none;
                margin: 0px;
                padding: 0px;
                border: 0px;
            }
            :-webkit-full-screen #canvas {
                width: 100%;
                height: 100%;
            }
            :-webkit-full-screen {
                width: 100%;
                height: 100%;
            }
            
            /* Custom Runner Styles */
            div.gm4html5_div_class {
                margin: 0px;
                padding: 0px;
                border: 0px;
            }
            div.gm4html5_login {
                padding: 20px;
                position: absolute;
                border: solid 2px #000000;
                background-color: #404040;
                color:#00ff00;
                border-radius: 15px;
                box-shadow: #101010 20px 20px 40px;
            }
            div.gm4html5_cancel_button {
                float: right;
            }
            div.gm4html5_login_button {
                float: left;
            }
            div.gm4html5_login_header {
                text-align: center;
            }
            /* END - Custom Runner Styles */
            
        </style>

        <!-- Custom PostStyle code is injected here -->
        

        <!-- Builtin injector for injecting flurry analytics code -->
        
    </head>

    <!-- Custom PostHead code is injected here -->
    

    <!-- Custom PreBody code is injected here -->
    

    <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="512" height="512" >
                <p>Your browser doesn't support HTML5 canvas.</p>
            </canvas>
        </div>
        <script>
            // 長押しメニューを防ぐためのイベントリスナー
            document.addEventListener('contextmenu', function (event) {
                event.preventDefault();
            }, false);
        
            document.addEventListener('touchstart', function (event) {
                if (event.touches.length > 1) {
                    event.preventDefault();
                }
            }, false);
        </script>
        <!-- Run the game code -->
        <!-- GameTitleのところにはゲームのタイトル名を入れる -->
        <script type="text/javascript" src="html5game/GameTitle.js?cachebust=1504554017"></script>

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

        <script>window.onload = GameMaker_Init;</script>

        <!-- Builtin injector for injecting google analytics code -->
        

    </body>

    <!-- Custom PostBody code is injected here -->
    
</html>

ビルドするindexファイルを設定する

GMS2ではHTMLビルドをするときのindexファイルの中身を設定することができます。
手順としては

  1. 一旦HTMLビルドをして、indexファイルを生成する
  2. そのindexファイルをこのページを元に修正する
  3. ゲームオプションのHTML設定から「index.htmlとしてのインクルードファイル」に2で修正したindex.htmlを設定する

3の手順についてですが、下記の流れです。

GMS2でのインクルードファイルの設定

メニュー上にある歯車マークをクリックします。

歯車マーク

HTML5の設定項目を開きます。

左のメニューから選択する

index.htmlとしてのインクルードファイルに修正後のindex.htmlファイルを設定する

英語だと「included file as index.html」と記載されている

これだけで、HTMLビルドをする度に設定したindex.htmlファイルと同様の内容でビルドされます。

まとめ

以上の方法を用いることで、HTML5ゲームがスマホでプレイされる際に、テキストコピーのメニューが表示される問題を防ぐことができます。 HTMLビルドに苦戦する人の力になれたらなと思います！