page)このページではGWTでゲーム作成するときに必要となるであろう情報についてまとめています。GWTで作ったサンプルとプログラムをお見せし、具体的に説明したいと思います。GWTで作成したサンプルをお見せします。Scriptを利用できないと機能しません。矢印キーやクリック、ダブルクリックに反応します。反応しないのであれば、アクティブになっていないのかもしれません。サンプルをクリックしてアクティブにしてください。各要素については途中で部分的に取り上げて説明します。実際のプログラムは最後に掲載します。EclipseへのインストールEclipseへのインストールの手順について説明します。マーケットプレースを選択します。赤枠の箇所にGWTと入力し、緑枠の"Go"をクリックします。pluginをインストール赤枠の箇所をクリックして、出てきた画面でインストールするものを選択してインストールします。画像では赤枠の箇所はインストール済みになっていますが、インストールしていなければインストールと表示されています。2.8.1を両方インストールしようとすると、エラーでできませんでした。2.8.1しかインストールしませんでした。インストール手順は以上です。GWTアプリケーションプロジェクト作成の手順GWTアプリケーションプロジェクトの作成手順について説明します。GWTアプリケーションプロジェクトを新規作成するためのウィンドウを表示する手順は2通りあります。1つ目について説明します。ファイル>新規>プロジェクトを選択します。Project"をクリックします。次に、緑枠の"次へ"をクリックします。次に2つ目について説明します。Project"を選択します。必要項目を記入してGWTアプリケーションプロジェクトを新規作成1のどちらの方法でも下の画像のようなウィンドウが出てきます。青枠部分の記入、選択を行います。パッケージ名にルールがあるのかは不明です。好きに入れて動かないということはなさそうです。緑枠の"プロジェクト・サンプル・コードを生成する"は必ずチェックを入れてください。私の環境ではこれを外すとエラーが発生して作成できませんでした。(2018/08/26現在)最後に、赤枠部分の"完了"をクリックします。GWTアプリケーションプロジェクト作成の手順は以上です。プログラム作成前の作成されたGWTアプリケーションプロジェクトの調整プログラムの作成の前に行う作成されたGWTアプリケーションプロジェクトの調整について説明します。上の新規GWTアプリケーションプロジェクトの作成手順で作成すると、下の画像のような構成で自動で作成されます。Scriptが処理を実行してくれればよいのであれば、client以外のものは不要です。上の画像で言うと、howToCreate.server、howToCreate.sharedは不要です。サンプルコードも不要なので削除します。上の画像で言うと、howToCreate.client内のGreetingService.java、GreetingServiceAsync.javaは不要です。それらを実行すると下の画像のような構成になります。サーバーと連携する場合に必要なものは削除したので他のファイルの中身を調整する必要があります。以下でそれを説明します。gwt.xmlの調整このサンプルで言うと、howToCreate.HowToCreateAGame.gwt.xmlを調整します。下の画像の青枠部を削除します。変更後web.xmlの調整このサンプルで言うと、war.WEB-INF.lib.web.xmlを調整します。下の画像の青枠部を削除します。変更後また、GWTアプリケーションプロジェクトをコンパイルするとキャッシュがTempフォルダに溜まっていきます。何もしなければ普段のインターネットのキャッシュと同様に保存されますが、キャッシュのせいで変更が反映されないということがあるようです。その場合にキャッシュを削除したくなるので、保存場所を指定しておきます。modeの設定を行います。modeで実行したことがないと設定できないようなので、その場合は後の記述を見ながら実行してください。設定後これでいよいよGWTアプリケーションの作成に入ることができます。onModuleLoad()がmain関数的な関数です。サンプルコードにも自動的に作成されていますので、参考になります。run(){loopProcess();}};timer.scheduleRepeating(1);}}onModuleLoad()内では初期化とループ(execute関数)をしています。executeとexecuteByTimerはどちらもループ処理ができますが、Timerを使うより、AnimationSchedulerを使うほうがパフォーマンス的には良いようです。timeStampはどのように使うのかわかりません。何を入れてもとりあえずループするようです。AnimationCallbackをimplementsしていることにご注意ください。Timerを使うときはAnimationCallbackをimplementsする必要はありません。init()は初期化の関数、loopProcess()はループ処理の関数です。何もOverrideをしていない、自作の関数で、今の説明では重要ではないです。中身が知りたければ、最後に載せたサンプルのコードをご覧ください。canvasの説明canvasについて説明します。canvasは図形の描画や画像の描画、文字の描画ができます。ゲーム画面として使うことになると思います。初期化は以下の通りです。howToCreate.client.HowToCreateAGame.java内のinit関数内でprepareCanvas()を呼び出しています。).add(canvas);}}注意点を以下に記載します。1つ目は、canvasはコンストラクタを呼び出すのではなく、(newするのではなく)createIfSupported関数で作成するということです。Canvasを作成できない場合、canvasがnullになるのでその対応もしておきます。2つ目は、divタグのIDを設定するということです。).add(canvas);というように設定しています。これでhtmlファイルを適切に作成することでcanvasをブラウザ上で表示することができます。cssファイルを適切に作成することで見た目の調整を行うことができます。サンプルコードのhtmlファイル上から変更して今回のサンプル用にしたhtmlファイルサンプルコードのcssファイル上から変更して今回のサンプル用にしたcssファイルhtmlに何を書いてcssに何を書くのかということが分からなければ、とりあえずメモ帳に書いても変わらないことはhtmlに、変わることはcssに記載するというように理解すればいいと思います。太文字にしたいというときにはメモ帳に太文字はないのでcssを調整することで実現します。中央揃えにしたいというときにも同様にcssを調整することで実現します。このように、見た目の調整はすべてcssを調整することで実現します。見た目を調整したいのかどうかを考えて見た目を調整したければcssでどのように調整すればいいかgoogleなどで調べ、見た目を調整したいのでなければhtmlでどのように調整すればいいかgoogleなどで調べればいいと思います。cssやhtmlについて一生懸命勉強しなくても、必要なときに必要なことだけ調べればいいと思います。3つ目は、キー入力やクリックのイベントの取得の方法です。canvas.addXXXHandler(引数)の引数にXXXHandlerをimplementsしたクラスを入れることによってイベントを取得できるようにしています。一例としてKeyEventListenerの中身は次のようになっています。boolean変数でキーが押されているとtrue、キーが押されていないとfalseになるプログラムになっています。event.preventDefault()でイベント発生時に通常のブラウザの動作を行わないようにしています。したがって、今の矢印キーの場合、スクロールされなくなっています。4つ目はcanvasのContext2dを取得しておくことです。これをしないと図形や文字が描画できません。Context2dのcontextに取得して代入しています。canvas.getContext2d()としています。canvasへの描画canvasへの描画について説明します。共通することとして塗りつぶしの色を指定するときはcontext.setFillStyle(CssColor.make("rgba(255,0,0,1)")、枠線の色を指定するときはcontext.setStrokeStyle(CssColor.make("rgba(255,0,0,1)")とします。色の指定はCssColor.make("rgba(255,0,0,1)")というようにrgb値とアルファ値(透明度)を指定します。アルファ値は0~1の値を設定します。0だと完全に透明で見えなくなります。1だと完全に不透明です。今回のサンプルでは青色の三角形でアルファ値0.5を設定しました。lineWidth)で指定できます。lineWidthは太さを表します。dy2);context.closePath();context.Stroke();と書きます。context.moveTo(x1,y1)は座標x1、y1を始点とします。その点からcontext.lineTo(x2,y2)は始点からx2、y2まで線を引くと宣言します。context.Stroke()で実際に線が引かれます。線を定義する直前にcontext.beginPath()、線を定義した直後にcontext.closePath()を書くのを忘れないようにしましょう。dVertexY[i]);}context.closePath();context.Stroke();とします。基本的には線を引いていき、図形を描いているイメージです。1つ前の線の描画も参照ください。dVertexX,dVertexYは多角形の各頂点の座標を格納しています。40);のようにします。context.strokeRect(x,y,width,height)、context.fillRect(x,y,width,height)となっており、x、yは左上頂点の座標、widthが四角形の幅、heightが四角形の高さです。円、円弧の描画context.arc(x,y,radius,startAngle,endAngle)でx、yが円の中心の座標、radiusは円の半径、startAngle,endAngleは描かれる円周の範囲を指定していてこの差が2PIを超えると円を描きます。Math.PI*3/4);context.closePath();context.fill();のようにします。context.arcは5つ変数を指定できて、5つ目の変数は時計回りか反時計回りかを指定できます。Math.PI*3/4,true)は半時計周りに線が引かれます。角度も時計回りが正になるか、反時計回りが正になるかこの変数に影響されるようです。文字の色を指定し、フォントを指定し、所定の位置に指定した文字列を描画する例です。20);context.fillText(str,x,y)でstrが描画する文字列、x、yが描画する位置です。test");dLength=TM.getWidth();とすると取得できます。画像の描画まず、画像のロードの方法です。/war/img/test.pngというファイルをロードするとします。htmlファイルからの相対パスで指定できるようです。絶対パスだと一番上からの指定になるようです。今だとwarからですが、アップロードするとindex.htmlのある位置からになると思います。相対パスで指定するのがよいと思います。Image("./img/test.png");画像の描画は以下の3通りです。context.drawImage(ImageElement.as(test.getElement()),dx,dy)context.drawImage(ImageElement.as(test.getElement()),dx,dy,dw,dh)context.drawImage(ImageElement.as(test.getElement()),sx,sy,sw,sh,dx,dy,dw,dh)dx、dyは画像を張り付ける位置の左上隅のx、y座標、dw、dhは画像を張り付けるときの幅、高さを表します。sx、sy、sw、shを指定した場合は画像の一部を抜き出して張り付けられて、これらの引数によって抜き出す位置を指定します。sx、syは画像の抜き出す位置の左上隅のx、y座標、sw、shは画像の抜き出す範囲の幅、高さを表します。音声ファイルの操作について説明します。音声ファイルのロードについて説明します。war/sound/test.mp3というファイルをロードするとします。画像ファイルと同様相対ファイルで指定するのがいいと思います。false;}Test.setSrc("./sound/test.mp3");}コンストラクタではなく、Audio.createIfSupported()を呼び出します。Audioを作成できない場合、Testがnullになるのでその対応もしておきます。音声ファイルの指定はTest.setSrcで行います。他に使う関数としては、以下が挙げられます。音声ファイルを再生する関数Test.play()音声ファイルを停止する関数Test.pause()音声ファイルの再生を開始する時間を指定する関数Test.setCurrentTime(time)timeに再生する時間をdouble型で渡します。音声ファイルが停止中かどうか確認する関数Test.isPaused()停止中ならtrue、再生中ならfalseが返ってきます。デバッグデバッグの方法について説明します。Jettyを選択し、デバッグを実行HTMLファイルを開くしばらく待つと、"開発モード"タブにURLが表示される(青枠)ので、ダブルクリックする。右クリックで出現したメニューから詳細を指定して選択する。デバッグ作業ブラウザでHTMLファイルが開かれるのでF12でデバッグモードに移行し、デバッグします。私の環境(Chromium)で実行すると、javaのプログラム上でBreakPointを設定して処理を停止することができました。chromeだからかもしれません。Jettyを停止します。下の画像の青枠をクリックします。Files/xxxx/chrome.exeなどとchromeファイルのパスを指定して、デバッグに使用するのが一番いいかもしれません。Scriptを作成します。Compilerで実行するだけです。サーバーにアップロードするサーバーにアップロードすべきものは下の画像の青枠で囲ったものです。Scriptファイルの入ったhowtocreateagameフォルダ、imgフォルダ、soundフォルダ、HowToCreateAGame.css、HowToCreateAGame.htmlとなります。実際は、cssファイルとhtmlファイルはこのホームページに合わせて別のものを用意しましたが、このように適切に編集したものでも問題ありません。その他その他に分かったことについて説明します。testを行うためのソースフォルダのようです(下図青枠)。Scriptの仕様に引っ張られているのかもしれない。乱数についてjava.util.Randomは使えないようです。Math.Randomは使えます。GWTとAWTのプログラムを混在させるGWTはawtパッケージ内に定義されたものは使えません。AppletやGraphics、Point、Rectangleなどがそうです。普通にコンパイルするとエラーになりますが、@GWTIncompatible(value="xxx")というアノテーションをつけると、GWTコンパイル時に無視されるようになります。xxxは例えば、メソッドを無視するときはMETHOD、フィールド変数を無視するときはFIELD、クラスを無視するときはCLASSとします。Appletからの移行時などに使えば、Appletを実行して確認して、GWTでも実行して確認するということができます。サンプルのプログラム参考のため、サンプルのプログラムを掲載します。このプログラムについてはGWTのプログラムを作成するためなら自由に複製して使っていただいて構いませんが、自己責任でご利用ください。関連ページ知識共有ノート一覧へTwitterプロフィールページTwitterやってます。お気軽にフォローしてください。当サイトへのリンクについて当サイトへリンクする際のお願いを記載しています。バナーもこちらに用意しています。