カジュアルゲームデザイン

カジュアルゲームのプログラミングについて紹介していきます

花札ゲームの作り方 – 札を表示させる

カジュアルゲーム 花札

まずは、phaserエンジンを使って花札を表示させてみたいと思います。

一枚ずつの札はFudaEntityクラス、全部の札を管理するのがFudaクラスとするので 以下のクラス構成で作成しようと思います。

http://devit.work/wp-content/uploads/2017/12/dev1.png

この構成で作成したソースを以下に置きますのでとりあえずダウンロードして ローカルで解凍してください。

ダウンロード：template一式

Windows & Visual Studio Codeを想定していますが、C:\Hanafuda_devフォルダに解凍した場合の実行方法は以下の通りです。

(1) フォルダを開く

  • Visual Studio Codeを起動し、「ファイル->フォルダーを開く」を選択します。 http://devit.work/wp-content/uploads/2017/12/dev2.png

  • 先ほどの圧縮ファイルを解凍したフォルダを選択します。以下の例は「C:\Hanafuda_dev」に解凍した場合です。 http://devit.work/wp-content/uploads/2017/12/dev3.png

(2) index.htmlを開く

  • サイドバーにフォルダ構成が表示されるので、その中からindex.htmlをダブルクリックして表示します。 http://devit.work/wp-content/uploads/2017/12/dev4.png

(3) Preview on Web Serverを実行する

  • 拡張機能である「Preview on Web Server」が導入されている場合、ショートカットキー「Ctrl + Shift + I」でブラウザ実行することができます。 http://devit.work/wp-content/uploads/2017/12/dev5.png

うまく表示されたでしょうか？

次は、それぞれのプログラムに記載されている内容を説明していきます。