Java プロコンゲーム 〜FXMLを読み込んで表示する〜

イントロダクション

前回は、見た目の作成を行いました。
今回は、プロコンゲーム(プログラミングコンテスト向けゲーム)の作成を続けます。

SceneBuilderは下のように作成しました。
SceneBuilderのセットアップはこちらを参照ください。

前回SceneBuilderを使用して作成した、FXMLは下のようEclipseのリソースフォルダへコピーしてプログラムから参照できるようにします。

JavaFXでFXMLを読み込む

作成したFXMLを読み込む処理を実装します。
EclipseにjavaFXのプラグインを入れているのでプログラムがある程度自動生成されます。
下のコードは、自動生成されたものです。

package application;

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            BorderPane root = new BorderPane();
            Scene scene = new Scene(root,400,400);
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

上のコードを2行ほど、修正してやります。

// FXMLのロード
Parent baseNode  = FXMLLoader.load(getClass().getResource("/ProconServer.fxml"));
Scene scene = new Scene(baseNode);

そして、実行結果は下の通りです。

とりあえずは、こんな感じで画面を作成しました。
細かいところは、おいおい修正して行きますが、まずはプレーヤー受付処理の実装を行う必要があります。

実装イメージ

上の見た目から、自分は以下のような処理を行おうと考えています。

  1. プレーヤーがクライアントアプリを起動する。
  2. Socket通信でプレーヤーの(クライアント)プログラムからのデータを受信
  3. 受信したデータ(名前など)を受付画面に表示する

上のようなイメージです。
いかに、補足的なこと記載しておきます。JavaFXで面白いものを作成しましょう。
ちなみに、画面を使用しない実装も可能ですので色々と調べてみるのも面白いと思います。ラズパイとか、Android(スマートリングなど)で通信処理のみ作成して・・・・というのも何かできそうです。

Soket通信に関しては、次回、細かいところを記載します。

JavaFXの基本的なところ

細かい書き方などは下のリンク先に記載しています。

  1. UML 世界を作る 〜RPGでの世界を作る場合〜
  2. UMLの書き方(読み方)〜概要とクラス図〜
  3. UMLツール Star UML〜ユースケース図を書いて見た〜
  4. UMLツール 〜Star UMLを使う〜

javaFXはフレームワークです。なのでとりあえず下のように作成します。
JavaFXのパッケージにあるjavafx.application.Applicationを継承して作成します。
ここで、上のクラスを継承して実装することにより、画面表示を行うための細かい処理(Xサーバーへのアクセス及び、描画処理)を自分で作成しなくてよくなります。

つまり、作成するアプリに集中できるわけです。
その代わり、このフレームワークの使用方法を理解する必要があります。「JavaFXの〜」にあるリンクからOracleのドキュメントページに遷移できます。

自分の作成した記事は以下になります。
初心者でもわかる。。。というより作って動かして。。。とやってみるのが一番なのでその手順と実装サンプル、動かしてみたときのイメージを記載しています。

  1. JavaFX チュートリアル〜今度こそ、初めてでも大丈夫:Label〜
  2. JavaFX チュートリアル〜今度こそ、初めてでも大丈夫2:Label〜
  3. JavaFX チュートリアル〜今度こそ、初めてでも大丈夫3:Button〜

プロジェクトの作成方法

  1. プロジェクトエクスプローラーを右クリックします。
  2. JavaFXプロジェクトを作成します。
  3. プロジェクト名をつけます。使用するJDKは1.8です。JShellとか使用する予定がないので。。。

作成したプロジェクトは下のような感じです。

以前追加した、シーンビルダーというプラグインが入っているので、使用します。下は操作したときの動画です。今回作成するものではありませんので。。。

そして、作成したものは、下のような見た目です。

作成したときの動画は以下になります。途中で落ちましたが(笑)とりあえずは、使用するPCのスペックでメモリ不足(だと思う)により落ちる可能性があるので、File -> Save Asなどで時々保存すると良いと思います。

今回作成したのは、プレーヤーの受付部分を1行だけ作成しました。とりあえずはプレーヤー1人の受付を実装し、うまくいくのなら他ものもの同様に作成する。。。そんな感じで行こうと思います。

今回はここら辺で。。。
でわでわ。。。

次回:Java プロコンゲーム 〜Socket通信を実装する〜

関連ページ

Java Basic

  1. Java Basic Level 1 Hello Java
  2. Java Basic Level2 Arithmetic Calculate
  3. Java Basic Level3 About String class
  4. Java Basic Level 4Boolean
  5. Java Basic Level 5If Statement
  6. Java Basic Summary from Level1 to 5
  7. Java Basic Level 6 Traning of If statement
  8. Java Basic Level8 How to use for statement
  9. Java Basic Level 8.5 Array
  10. Java Basic Level 9Training of for statement
  11. Java Basic Level 10 While statement 
  12. Java Basic Swing〜オブジェクト指向〜
  13. Java Basic Swing Level 2〜オブジェクト指向2
  14. サンプル実装〜コンソールゲーム〜
  15. Java Basic インターフェース・抽象クラスの作り方
  16. Java Basic クラスとは〜Step2_1
  17. Java Basic JUnit 〜テストスイートの作り方〜


Java プロコンゲーム 〜設計2画面の入力フロー〜

イントロダクション

前回作成したイメージを具体的なものにしていきます。
今回からは、プロコンゲーム(プログラミングコンテスト向けゲーム)の作成を始めようと思います。

今までに。テキストRPGを作成しようと色々と調査してきましたが、どうしても自然言語処理が必要になるため一時中止にしようと思います。
しかし、今までやったことは無駄にしません、RPG風に作成します。

設計2:受付処理

参考にするアプリケーションはU-16プログラミングコンテストです。これと同様に以下のような手順でプレーヤの参加を受付ます。

  1. 画面を開き、ゲームに参加するプレーヤーの使用するポート番号と表示するIMGを画面上に表示する
  2. 参加するプレーヤーの人数が確定したらスタートボタンでゲームを開始する
  3. ゲームのマップを表示する
  4. プレーヤーの配置を行う
  5. タイマーを開始して制限ターン数を表示、カウントダウンする

まずは、Map描画

今回作成するマップはダンジョンRPGをイメージにしているので通行できない部分(迷路のような)、とか罠とか、アイディアはつきませんが、マップの難易度(レベル)を設けて、それぞれの難易度でマップの生成を行うような実装を考えております。

JavaFX

画面の表示処理にはJavaFXを使用しますので、基本的な書き方はこちらの記事を参考にしてください。
早速、JavaFXの実装に入ります。

Map作成

実装したコードでは下のように表示されました。
以前作成したコードをちょいといじって動かしました。

ポイントになるコードは下のように実装しました。

/**
 * Canvasに背景を描画する
 * @param vBox Canvasを追加する領域
 */
public void createBackGround(VBox vBox) {
    String lightGrass = "grass_light.png";
    String deepGrass = "grass_deep.png";
    String soilBasic = "soil_basic.png";
    GridPane grid = new GridPane();

    for (int j = 1; j < 5; j++) {
        for (int i = 1; i <= 5; i++) {
            grid.add(createImageLbl(lightGrass), j, i);
        }
    }

    vBox.getChildren().add(grid);
}

単純に5x5マスにイメージファイル(ラベル)を表示しているだけです。この要領でゲームのマップを作成しようと思います。
ここで、問題が1つあります。マップにより難易度、を設けるので、その難易度とマップの内容を関連付けるのにどのようなロジックで行うか?ここがポイントになります。

ちょいと頭をひねります。。。

UMLについて

以前に下のようなことを記事にしました。

  1. UML 世界を作る 〜RPGでの世界を作る場合〜
  2. UMLの書き方(読み方)〜概要とクラス図〜
  3. UMLツール Star UML〜ユースケース図を書いて見た〜
  4. UMLツール 〜Star UMLを使う〜

今回はここら辺で。。。
でわでわ。。。

次回:Java プロコンゲーム 〜見た目の作成(SceneBuilderの使用)〜

関連ページ

Java Basic

  1. Java Basic Level 1 Hello Java
  2. Java Basic Level2 Arithmetic Calculate
  3. Java Basic Level3 About String class
  4. Java Basic Level 4Boolean
  5. Java Basic Level 5If Statement
  6. Java Basic Summary from Level1 to 5
  7. Java Basic Level 6 Traning of If statement
  8. Java Basic Level8 How to use for statement
  9. Java Basic Level 8.5 Array
  10. Java Basic Level 9Training of for statement
  11. Java Basic Level 10 While statement 
  12. Java Basic Swing〜オブジェクト指向〜
  13. Java Basic Swing Level 2〜オブジェクト指向2
  14. サンプル実装〜コンソールゲーム〜
  15. Java Basic インターフェース・抽象クラスの作り方
  16. Java Basic クラスとは〜Step2_1
  17. Java Basic JUnit 〜テストスイートの作り方〜


Java プロコンゲーム 〜プログラミングコンテスト向けゲーム〜

今回からは、プロコンゲーム(プログラミングコンテスト向けゲーム)の作成を始めようと思います。

今までに。テキストRPGを作成しようと色々と調査してきましたが、どうしても自然言語処理が必要になるため一時中止にしようと思います。
しかし、今までやったことは無駄にしません、RPG風に作成します。

設計から

設計といえばUMLを使用します。
まずは、ゲームで実現したい動きのイメージを作成します。ここら辺を考えるのに時間がかかりました(笑)。

実現するイメージから入る

起業するにも、夢を実現するにも、まずは実現することを具体化します。
早い話が、以下のようなことです。

実際にどのような形でアプリ(事業 or 夢)を動かす(実現、収益を出す...etc)か?

そして、そのイメージを作るためにUMLが使えるので使用すると言うわけです。

ユースケース図

まずは、全体の流れとしてユースケース図を作成します。参考にするのは、「U-16プログラミングコンテスト」です。

自分のイメージとしては下のような形です。

以前に下のようなことを記事にしました。

  1. UML 世界を作る 〜RPGでの世界を作る場合〜
  2. UMLの書き方(読み方)〜概要とクラス図〜
  3. UMLツール Star UML〜ユースケース図を書いて見た〜
  4. UMLツール 〜Star UMLを使う〜

キーポイント

仮にも、プログラミングコンテストなので、教育的な要素が必要になります。と言うか。。。「ぶっこみたい」と思っています。

現状では以下のようなところが決まっています。

  1. プログラムを組んで動かすこと。
  2. 物事を実現するための順序を考えること

これだけです。。。が

ブラッシュアップしました

いろいろと考えた結果、以下の要素が大事であろうということになりました。

  1. 面白そうであること
  2. とっつきやすい要素(RPGなど)
  3. ゲームがシンプルであること
  4. 複雑な要素は後々にする(伏線のみにする)

とりあえずは、シンプルに「相手プレーヤーを倒したら勝ち」というルールを持ってきます。
そして、以下のような要件を作成しました。

  1. ゲームの戦いの方法に関して、これをRPG的にプレーヤーを作成して、そのプレーヤーを対戦させる。

  2. 以前、作成したU-16プログラミングコンテストを参考に、マス目上のフィールド上を移動して相手を倒すという形にします。

  3. そして、自分(プレーヤー)が作成した画像をアップロードできるようにします。つまりは、自分の作成した画像を使用してゲームが楽しめるような実装にします。

  4. 生年月日を入力してプレーヤーのステータス及び職業(仮)を決定し、それからゲームを開始します。

今後、上記に上げた要件は増えていくと思うのですが、それは次回以降に。。。

次回:ava プロコンゲーム 〜見た目の作成(SceneBuilderの使用)〜
でわでわ。。。

関連ページ

Java Basic

  1. Java Basic Level 1 Hello Java
  2. Java Basic Level2 Arithmetic Calculate
  3. Java Basic Level3 About String class
  4. Java Basic Level 4Boolean
  5. Java Basic Level 5If Statement
  6. Java Basic Summary from Level1 to 5
  7. Java Basic Level 6 Traning of If statement
  8. Java Basic Level8 How to use for statement
  9. Java Basic Level 8.5 Array
  10. Java Basic Level 9Training of for statement
  11. Java Basic Level 10 While statement 
  12. Java Basic Swing〜オブジェクト指向〜
  13. Java Basic Swing Level 2〜オブジェクト指向2
  14. サンプル実装〜コンソールゲーム〜
  15. Java Basic インターフェース・抽象クラスの作り方
  16. Java Basic クラスとは〜Step2_1
  17. Java Basic JUnit 〜テストスイートの作り方〜


UML 世界を作る 〜RPGでの世界を作る場合〜

現在(2020-03-15)自分で作成しているものになりますが、テキストRPGを作成しようとしています。Java言語を使用しています。

プログラム作成(アプリ作成)である程度の規模になった場合は、設計をしてからでないと収集がつかなくなります。
違う見方をすると「面白いもの」を作ろうとしたら「設計」が必要になるということです。

RPGの世界を作る

「RPGの世界」と言ってもいろんな意味があるので具体的に、小説や脚本を作るレベルでの「世界」を作ろうということです。

世界の定義

世界、小説を作る側からすると「プロット」というらしいです。漫画や、脚本でも同様らしいです。この情報は人から聞いたものなのでこのように記載しています。

どんな世界を描くか?

自分は「プログラマ」ではないので、人(作家など)がプロットを作ることを考えて、それをプログラマ的にアプローチしていきます。

どんな風に?

ズバリ、プロットを作る工程をシステム化します。これができたらかなりすごいことになると思いますが、理想通りにいかない想定です。
理由は、どうしても、「予測」する部分が発生するので、いわゆる人工知能(AI)処理が必要になるためです。

では、どうやるか?いわゆるフレームワークを作成する想定です。つまり、1つの(RPGで使用する)ストーリーを作成するための手順を作り、必要な情報(作成するストーリーのオリジナルな部分)を入力(作成)すれば、ストーリーとして使用できるレベルにまとめるツールとして作成するという意味です。手順としては以下の通りです。

  1. 物語を構成する項目を設定していきます。(キャラクター、世界(観)、文書のストーリー)
  2. 物語の世界を描くために、世界の始まり(創世神話)を作成する、必要なければこれを入力しない(NULL)に設定する
  3. 物語の世界に存在する世界を一覧します。(書き出します)
  4. 文書によるストーリー、キャラクターを作成します。

上記の内容を作成すると、自然と物語が作成できるというものです。
ぶっちゃけた話、フレームワークまで行きませんが、執筆する作品を部分的に作成していても、1つにまとめることが可能であろうと思っています。

できるかどうかはわかりません

しかし

文章作成のシロート目線からして、骨組みだけでもある程度の形になるのであれば、十二分に作品として作成することが可能になるはずです。
つまり、より多くの人のイメージや、想像した世界観を伝えやすい形にできるのではなかろうか?と考えています。

UMLを作る

結果から記載します。

上記の図が、クラス図になります。
ここの図には、クラス名とそれに対するプロパティ(世界には国がある)を表しています。世界のクラス図です。

具体的に、上のクラス図は文章に置き換えると下のようになります。

1. 世界には神話がある
2. 世界には国がある
3. 世界には自然がある

実際に世界にはもっとたくさんのものがあり、存在しています。しかし、これらを全部クラス図に落とし込むのは至難の技です、なので階層的に表現して行きます。

・世界→国→町
・自然→気候→地形(山、川など)

クラスで表現するもの(事)は上のように階層的に表現して行くと、1つの場所に描く内容が少なくて済みます。そして、それぞれ階層化、カプセル化するので一部を変更しても、他に影響がないように修正することができます。
これが「オブジェクト指向の良いところ」になります。

UML作成関連

UMLの書き方
UMLツール Star UML〜ユースケース図を書いて見た〜
UMLツール 〜Star UMLを使う〜

Java テキストRPG〜情報を揃える WikipediaAPI〜

WikipediaAPIを使用して自分の欲しい情報をまとめたいと思います。
他にもたくさんあるようです。
FaceBookAPIとか興味深いですね。参考サイトはこちらです。

WebAPIを使う

WebAPIを使用するということは、早い話が「ウェブサーバーで提供している情報を取得する」ということです。国のAPIとか、地域の。。。いわゆる「ビッグデータ」がこれに相当します。
このWebAPIを使用して取得した情報を元に自分で使用するための情報を揃えようという分けです。

とりあえずは、WebAPIを叩いてみないことには始まらないのでとりあえず叩きます。
コマンドは以下の通りです。参照するページはこちらです。
curl http://wikipedia.simpleapi.net/api?keyword="武器"

そして、パラメータは以下になります。

keyword : キーワード。エイリアスとして、qも指定可能
output : 出力方式(xml,rss,json,html,javascript,php,tsvを指定可能。デフォルトはxml)
callback : 出力形式がJSONP時の名称を指定可能
lang : 現在未実装。現在は日本語(ja)のみ。
search : 現在未実装につき1のみ。(0.その特定キーワードのみを取り出す、1.前方一致、2.後方一致、3.前後方一致、4.FULLTEXT)

上のコマンドではパラメータに「武器」を設定しています。
出力内容は一部ですが、下に記載します。ちなみにXMLで取得しています。デフォルトがXMLでの取得になるようです。

<results>
<result>
    <language>ja</language>
    <id>401062</id>
    <url>http://wikipedia.simpleapi.net/ja/401062/</url>
    <title>武器等製造法</title>
    <body>武器等製造法(ぶきとうせいぞうほう、昭和28年8月1日法律第145号)は、日本の法律。最終改正は平成12年5月31日法律第91号。 武器の製造の事業の事業活動を調整することによつて、国民経済の健全な運行に寄与するとともに、武器及び猟銃等の製造、販売その他の取扱を規制することによつて、公共の安全を確保することを目的としている。 武器、猟銃等の製造(改造、修理も含む)については経済産業省の所管となる。 定義 この法律では「武器」「猟銃等」について以下のように定義している。 武器銃砲 銃砲弾 爆発物 爆発物を投下し、又は発射する機械器具 ロケット弾発射機 爆雷投射機 魚雷発射管 爆弾投下器 「銃砲」「銃砲弾」「爆発物」「爆発物投下機械器具」「爆発物発射機械器具」に類する機械器具 銃剣 火炎発射機 銃砲を搭載する構造を有する装甲車両であって、無限軌道装置により走行するもの 「銃砲」「銃砲弾」「爆発物」「爆発物投下機械器具」「爆発物発射機械器具」「これら類する機械器具」に使用される部品 銃砲の部品 銃身 拳銃の機関部体 拳銃の回転弾倉 拳銃のスライド 銃架 砲身 砲架 銃砲弾の部品 銃弾の弾丸 火薬類が入っていない信管 砲弾の弾体 薬莢 爆発物の部品 火薬類が入っていない信管 ロケット弾の弾体 手榴弾の弾体 地雷の外殻 爆雷の外殻 機雷の本体の外殻 魚雷の気室 爆弾の弾体猟銃等猟銃 捕鯨砲 銛銃 屠殺銃 空気銃 構成 第1章 - 総則(第1条~第2条) 第2章 - 武器(第3条~第16条) 第3章 - 猟銃等(第17条~第20条) 第4章 - 雑則(第21条~第30条) 第5章 - 罰則(第31条~第35条) 附則 資格 武器製造事業者 猟銃等製造事業者 関連項目 銃砲刀剣類所持等取締法 行政 外部リンク 武器等製造法全文。</body>
    <length>1393</length>
    <redirect>0</redirect>
    <strict>0</strict>
    <datetime>2015-06-11T21:33:58+09:00</datetime>
</result>
<result>
    <language>ja</language>
    <id>1970503</id>
    <url>http://wikipedia.simpleapi.net/ja/1970503/</url>
    <title>武器なき斗い</title>
    <body>『武器なき斗い』(ぶきなきたたかい)は、1960年(昭和35年)に大東映画が製作・配給した日本映画である。 概略 原作は、1959年に中央公論社から出版された西口克己の小説『山宣』である。山宣とは、右翼の凶刃に倒れた労働農民党の代議士・山本宣治のこと。映画化は、西口克己の講演会の後で、大阪市電の勤務者が映画化を提案したのを契機に企画され、製作資金の募金は大阪市交通局の労組、私鉄の労組、大阪総評傘下の労働者が呼びかけて、始まった。没後30周年を記念する映画として、関西在住の3000人が発起人になり、「山宣映画化実行委員会」を結成し、700万円のカンパが集められた。撮影にあたっては、延べ3700人にのぼるエキストラが動員された。 あらすじ 京都府宇治市の料亭花やしきの経営者夫婦のもとに生まれた山本宣治は、同志社大学の講師を務め、性教育の啓発や産児制限運動に関わっていた。やがて労働農民党の京都府連合会委員長となり、第1回普通選挙で当選して代議士となる。治安維持法改正に反対し、国会での質疑を準備している矢先、山本が泊まる東京の旅館に見知らぬ男が訪ねてくる。</body>
    <length>1387</length>
    <redirect>0</redirect>
    <strict>0</strict>
    <datetime>2016-04-23T14:35:07+09:00</datetime>
</result>
</results>

こんな感じで取得できます。しかし、XMLでの取得はできるものの欲しい部分の取得がうまくいきません。。。他ものを探すことにします。

しかし、ちょうど良いものが見つからず。。。
人文学オープンデータ共同利用センター等ものがありましたが、うーむ一歩踏み出せない感じです。

HTMLを取得

仕方ないので、HTMLを取得する方法に切り替えます。具体的には下のようなコマンドを叩くとHTMLを取得することができます。
この取得したものをプログラムで編集して必要なものを取得できるようにしようというものを考えます。
https://ja.wikipedia.org/wiki/%E6%AD%A6%E5%99%A8

Javaの出番

ここでJavaの出番になります。取得したデータを自分の使いやすいように、処理を行う必要があります。
しかし、どんなデータを取得するか?を決めないと実装も何もないです。。。
それでもとりあえずは実装してみました。
リスト形式(ULタグ)のテキストを取得します。ソースはGithubにアップしてあります。

public String execute() {
    String targetUrl = "https://ja.wikipedia.org/wiki/%E6%AD%A6%E5%99%A8";
    DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
    DocumentBuilder builder = null;
    try {
        builder = factory.newDocumentBuilder();
    } catch (ParserConfigurationException e1) {
        // TODO Auto-generated catch block
        e1.printStackTrace();
    }
    try {
        URL urlCls = new URL(targetUrl);
        urlCls.openConnection();
        InputStream inp = (InputStream) urlCls.getContent();
        Document html = builder.parse(inp);
        NodeList nodes = html.getElementsByTagName("ul");
        for (int i = 0; i < nodes.getLength(); i++) {
            loopPrint(nodes.item(i).getChildNodes());
        }

    } catch(MalformedURLException e) {
        e.printStackTrace();
    } catch(IOException ie) {
        ie.printStackTrace();
    } catch (SAXException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    }
    return "";
}

今回の実装では、Jsoupを使用せず、w3cのDOMオブジェクトを使用しました。
取得したHTMLの解析などを行うならJsoupを使用した方が良いです。。。

でわでわ。。。