WordPress プラグイン作成〜アンケートプラグインの作成〜

WordPressに追加するプラグインの作成を行なっています。しかし、使用する処理(非同期通信)が原因で、データの登録処理が動きませんでした。

しかし、ちょっとした妥協と共に問題は解決しました(笑)

アンケートを作成したら。。。

なんだかんだと以下のようなところまで、実装することができました。

アンケートの質問と、回答をセットにしてDBに登録します。
そして、登録したデータは下のように投稿した記事に挿入するようになっています。

挿入する場所は、記事の中にあるタグid="XXX"XXX部分に対応した部分の下にアンケートが追加されます。
上のキャプチャーで行けば、id="main"のタグの最後部分に追加されます。
画面一番下に来るわけですね。。。

次の実装

アンケートを記事の中に表示することができました。
なので、アンケートに回答してもらったものをDBに登録、アンケートの集計結果を表示できるような実装が必要です。

どーやるか？

まずは集計するためのデータを登録するDBの設計が必要です。「DB」と記述しましたが、正確には「テーブル」です。

①集計するための項目を考える

アンケートに答えてもらった、時に集計したいことは(現状)以下の通りです。

アンケートの質問の回答数
アンケートに答えてもらった日時

少ないけどとりあえずそんなもんで(笑)

②テーブル設計

テーブルを作成する時のポイントとしては以下のようなことです。

データ(アンケートの質問)と回答を一意に結びつけられるようにする
回答してもらった回数と日時を集計できるようにする

これらを加味すると下のようになります。

③テーブルの構成を作る

テーブルは、エクセルの列と行がある状態に似ています。というかほぼ一緒です。下のようなイメージです。

サンプル1(SAMPLE1)

ID	質問	回答	回答時間	回答回数
1	AAAA	BBB	2020/4/23	2
2	1111	BBB	2020/5/23	20
3	XXXX	BBB	2020/6/23	30

これを実際に使用するために。。。と考えると

「回答時間は、別テーブルに持った方が良い」となりました。
理由としては下のようなものがあります。

テーブルを分ける理由

１レコード(行)に対して、１つの質問と回答回数を登録する
時間を一緒に登録するとなると、レコード(行)が増えるだけで、不適当なデータが沢山できてしまう

そして、テーブルを分けるのは具体的に以下のようにする。

アンケートを管理するためのテーブル(サンプル1)
回答時間を管理するためのテーブル(サンプル2)

サンプル2(SAMPLE2)

ID	質問ID	回答時間
1	AAAA	BBB
2	1111	BBB
3	XXXX	BBB

そのあとは？

この２つのテーブルを結合します。
具体的には、サンプル1のテーブルとサンプル2のテーブルを結合します。

どーやるか？正確には、データを取得する時にはSQLを使用して取得します。
具体的なSQLは以下のようなSQLになります。
SELECT * FROM サンプル1 省略名(エイリアス), サンプル2 省略名(エイリアス) WHERE 条件１ AND 条件２ ...

これは、一般化したものでそのまま使用しません。しかし、下のものは実際に使用できるSQLです。
SELECT * FROM SAMPLE1 A, SAMPLE2 B WHERE A.ID = B.質問ID

しかし、今回は時間ごとの集計を行いたいので、日時をそのまま登録するようにはしません。

時間帯の区分けを作る

0:00〜7:00
7:00〜12:00
12:00〜18:00
18:00〜24:00
このように分けようと思います。
そして、それぞれのクリック数を計算できるようにカラムを追加してやります。

とまぁこんなところで。。。

でわでわ。。。

Java ミニゲームソース付き〜コンソールアプリからGUIアプリへ〜

今まで作成してきて、限界を感じました。
何に限界を感じたか？というところですが、キーボード入力に対するイベントの取得をするには、根本的に作りを変える必要があるためです。

JavaFXを使用する

コンソールアプリからGUIアプリへ変更するためには、JavaFXを使用するのが一番早いと思うので、この方法を使います。

今まで作成したものを使用する

今まで作成したものを使用する方向で、JavaFXアプリに変更します。

具体的に？

今までメインメソッドを実装しているMainクラスを改造します。

public class GameMain  {

このように書いていた部分を

public class GameMain extends Application {

のように修正します。

これにより、ビルドエラーが出ます。これは実装するべきメソッドを実装していないためです。
細かい話は、下の記事に記載しています。

## 画面イメージ
![](http://zenryokuservice.com/wp/wp-content/uploads/2020/05/スクリーンショット-2020-05-14-19.59.16.png)
とりあえずは、人を抜かした感じのマップを作成しようと思います。戦闘シーンからは少し離れますが。。。

表示結果はこんな感じです。
![](http://zenryokuservice.com/wp/wp-content/uploads/2020/06/スクリーンショット-2020-06-17-21.09.46-300x264.png)

今後のことを考え、GridPaneを使用して作成すると下のようなコードになります。[Githubに全部あります](https://github.com/ZenryokuService/StepUpGame/commit/9397e9704cafe25decfb91e10badb5631f653101#diff-5be3ca72285c30fcf6ff21598f8dc67c)。

@Override
public void start(Stage primaryStage) throws Exception {
    primaryStage.setWidth(WIN_WIDTH);
    primaryStage.setHeight(WIN_HEIGHT);
    // ルートコンテナ
    BorderPane root = new BorderPane();

    GridPane grid = new GridPane();
    grid.getColumnConstraints().add(new ColumnConstraints(40));
    for(int y = 0; y < 20; y++) {
        for (int x = 0; x  < 20; x++) {
            grid.add(getGrassTile(), x, y);
        }
    }
    root.setCenter(grid);
    Label textLabel = new Label();
    textLabel.setBackground(new Background(new BackgroundFill( Color.RED , new CornerRadii(5) , Insets.EMPTY )));
    root.setBottom(textLabel);

    Scene scene = new Scene(root);
    primaryStage.setScene(scene);
    primaryStage.show();
}

private Label getGrassTile() {
    // マップの草原用、イメージ(40x40)
    URL url = getClass().getResource("/map/Grass.png");
    ImageView image = new ImageView(new Image(url.toExternalForm()));
    Label tile = new Label();
    tile.setGraphic(image);
    return tile;
}

## まとめ
一度、コンソールアプリのクラスTextRpgGameを一度コメントアウトし、JavaFXアプリとして作成し直します。
シンプルに、草のマップを作成しました。

とりあえずは、GridPaneを使用して、20x20マスのマップを表示しました。
これで、一部を修正することも、書き換えることも簡単にできます。

でわでわ。。。

## 関連ページ一覧

Eclipse セットアップ

Java Basic一覧

Git関連

## JavaFX関連ページ
1. [Eclipse SceneBuilderを追加する](https://zenryokuservice.com/wp/2018/11/17/eclipse-scenebuilder%e3%82%92%e8%bf%bd%e5%8a%a0%e3%81%99%e3%82%8b/)
1. [JavaFX SceneBuilder 〜EclipseとSceneBuilder連携~](https://zenryokuservice.com/wp/2018/11/17/javafx-scenebuilder-%e3%80%9ceclipse%e3%81%a8scenebuilder%e9%80%a3%e6%90%ba/)
1. [JavaFX SceneBuilder〜ボタンにメソッドを割り当てるワンポイント〜](https://zenryokuservice.com/wp/2019/02/05/javafx-scenebuilder%e3%80%9c%e3%83%9c%e3%82%bf%e3%83%b3%e3%81%ab%e3%83%a1%e3%82%bd%e3%83%83%e3%83%89%e3%82%92%e5%89%b2%e3%82%8a%e5%bd%93%e3%81%a6%e3%82%8b%e3%83%af%e3%83%b3%e3%83%9d%e3%82%a4%e3%83%b3/)
1. [Java プロコンゲーム〜見た目の作成(SceneBuilderの使用)〜](https://zenryokuservice.com/wp/2020/03/30/java-%e3%83%97%e3%83%ad%e3%82%b3%e3%83%b3%e3%82%b2%e3%83%bc%e3%83%a0-%e3%80%9c%e8%a6%8b%e3%81%9f%e7%9b%ae%e3%81%ae%e4%bd%9c%e6%88%90scenebuilder%e3%81%ae%e4%bd%bf%e7%94%a8%e3%80%9c/)

## ステップアップ関連ページ一覧

## JavaFX + ND4Jで機械学習準備

## オブジェクト指向関連ページ
1. [オブジェクト指向の概念1〜OracleDocのチュートリアル１〜](https://zenryokuservice.com/wp/2019/10/301. /%e3%82%aa%e3%83%96%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e6%8c%87%e5%90%91%e3%81%ae%e6%a6%82%e5%bf%b5-%e3%80%9coracledoc%e3%81%ae%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab%ef%bc%91/)
1. [オブジェクト指向の概念2〜クラスとは〜](https://zenryokuservice.com/wp/2019/10/30/%e3%82%aa%e3%83%96%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e6%8c%87%e5%90%91%e3%81%ae%e6%a6%82%e5%bf%b5%e3%80%9c%e3%82%af%e3%83%a9%e3%82%b9%e3%81%a8%e3%81%af%e3%80%9c/)

Java Discord

2020年6月17日

JavaFX Image エラー〜java.lang.reflect.InvocationTargetException〜

JavaFXでのコーディング中、PNGファイルを読み込もうとした時に、下のようなエラーが出ました。

Exception in Application start method
java.lang.reflect.InvocationTargetException
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:498)
    at com.sun.javafx.application.LauncherImpl.launchApplicationWithArgs(LauncherImpl.java:389)
    at com.sun.javafx.application.LauncherImpl.launchApplication(LauncherImpl.java:328)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:498)
    at sun.launcher.LauncherHelper$FXHelper.main(LauncherHelper.java:767)
Caused by: java.lang.RuntimeException: Exception in Application start method
    at com.sun.javafx.application.LauncherImpl.launchApplication1(LauncherImpl.java:917)
    at com.sun.javafx.application.LauncherImpl.lambda$launchApplication$155(LauncherImpl.java:182)
    at java.lang.Thread.run(Thread.java:748)
Caused by: java.lang.IllegalArgumentException: Children: duplicate children added: parent = Grid hgap=0.0, vgap=0.0, alignment=TOP_LEFT
    at javafx.scene.Parent$2.onProposedChange(Parent.java:454)
    at com.sun.javafx.collections.VetoableListDecorator.add(VetoableListDecorator.java:206)
    at javafx.scene.layout.GridPane.add(GridPane.java:965)
    at zenryokuservice.main.game.GameMain.start(GameMain.java:256)
    at com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$162(LauncherImpl.java:863)
    at com.sun.javafx.application.PlatformImpl.lambda$runAndWait$175(PlatformImpl.java:326)
    at com.sun.javafx.application.PlatformImpl.lambda$null$173(PlatformImpl.java:295)
    at java.security.AccessController.doPrivileged(Native Method)
    at com.sun.javafx.application.PlatformImpl.lambda$runLater$174(PlatformImpl.java:294)
    at com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:95)
Exception running application zenryokuservice.main.game.GameMain

エラーが出た実装

ImageView image = new ImageView(new Image("/map/Grass.png", true));

修正後

ImageView image = new ImageView(new Image(url.toExternalForm()));

パスの内容が悪かったのかね？

JavaFX関連ページ

ステップアップ関連ページ一覧

JavaFX + ND4Jで機械学習準備

オブジェクト指向関連ページ

[オブジェクト指向の概念1〜OracleDocのチュートリアル１〜](https://zenryokuservice.com/wp/2019/10/301. /%e3%82%aa%e3%83%96%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e6%8c%87%e5%90%91%e3%81%ae%e6%a6%82%e5%bf%b5-%e3%80%9coracledoc%e3%81%ae%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab%ef%bc%91/)
オブジェクト指向の概念2〜クラスとは〜

Java Discord

2020年6月17日2020年6月16日

Java ミニゲームソース付き〜テスト駆動開発：文言出力部品を作る〜

今回は、RPGゲームでよくある文字を１文字ずつ読めるスピードで出力する部品を作ります。

今まで作成したテキストRPGゲームに追加します。
現状は、こんな感じで動きます。

文字の出力は、一括で出力するのでゲームっぽくありません。どちらかというとログ出力っぽいです(笑)

文字出力部品を作る

現状は、System.out.println()を使用しています。これは引数にある文字列を標準出力に出力します。
標準出力 = System.outになります。

問題

どーやって１文字ずつ出力するか？
とりあえずは、テスト駆動開発にしますので、テストケースを作成します。

毎度おなじみJUnit

JUnitを使用してテストクラスを動かします。

作成手順

Eclipseのプロジェクトに「test」フォルダを作成する
テストするクラスと同じパッケージを作成する
テストするクラスの後にTestをつけたクラスを作成する
〜Testクラスにテストケースを作成する

具体的に。。。

実装した時の動画を作成しました。

詳細は以下のようになります。
上の手順４以降の記載になります。

JUnitをビルドパスに追加

動画にもあるのですが、上のような画面でJUnitを追加します。細かい部分は動画にありますので参照ください。

テストケースを作る

今回のテストケースはコンソールにゆっくりと表示できれば良いので、動かすだけになります。
故に、コードは下のようになります。

public class PrintUtilsTest {
    @Test
    public void testPrint01() {
        String mes = "アイウエオカキクケコ。。。。";
        try {
            PrintUtils.print(mes);
        } catch (InterruptedException e) {
            fail(e.getMessage());
        }
    }
}

今回の作成するクラスは、PrintUtilsクラスです。テストクラスは上のコードにある通りです。

作成するクラスをガワだけ作ったら、あとは、テストケースで呼び出してやる処理を実装してやるだけです。

あとは、実装→起動→修正→確認を繰り返して終了です。

シンプルなもんです(笑)

JavaFX関連ページ

ステップアップ関連ページ一覧

JavaFX + ND4Jで機械学習準備

オブジェクト指向関連ページ

[オブジェクト指向の概念1〜OracleDocのチュートリアル１〜](https://zenryokuservice.com/wp/2019/10/301. /%e3%82%aa%e3%83%96%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e6%8c%87%e5%90%91%e3%81%ae%e6%a6%82%e5%bf%b5-%e3%80%9coracledoc%e3%81%ae%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab%ef%bc%91/)
オブジェクト指向の概念2〜クラスとは〜

2020年6月16日2020年6月16日

Java ミニゲームソース付き〜ここまでのまとめ〜

今回は、ミニゲーム作成で作ったものをまとめます。
まとめたのちに、次の実装はどうしようか決めようと考えた次第です。

Gitリポジトリはこちらです。下の方に、接続方法などの記事へのリンクがあります。

大まかな処理フロー

GameMainクラス
クラスの記述内容がコードより、ライセンスのJavaDoc部分が大半を占める状態です(笑)

public class GameMain {
    public static void main(String[] args) {
        // ゲームクラス
        TextRpgGame main = new TextRpgGame();
        // 初期処理
        main.init();
        while (true) {
            // 入力受付
            String in = main.input();
            if ("bye".equals(in)) {
                break;
            }
            // データの更新
            if (main.update(in)) {
                // 画面の描画
                main.render();
            }
        }
    }
}

メインメソッドを持っていて、ループ処理を行っています。
while(true) { ... }の部分が俗にいう「ゲームループ」の部分になります。

処理の説明としては、以下の通りです。

TextRpgGameのインスタンスを取得
初期処理を行う
ゲームループ開始
標準入力を受け取る
"bye"と入力されたらアプリの終了
入力データにより、ゲームで使用するデータ(プレーヤーとモンスター)の情報を更新する
表示するステータスを再描画

こんな感じの処理を行っています。

TextRpgGameについて

メインメソッドから呼ばれるそれぞれのメソッドを実装しています。
具体的には下のものです。

init(): 初期処理を行う。ステータスの表示など
input(): 標準入力を受け取る。
update (): データの更新を行う。使用しているプレーヤークラス、モンスタークラスのデータを更新します。主にHPの値を更新します。
render(): ステータスの更新、モンスターを倒したなどの戦闘終了の文言を表示する。

public class TextRpgGame {
    /** コマンド：たたかう */
    private static final String ATTACK = "1";
    /** コマンド：ぼうぎょ */
    private static final String DEFFENCE = "2";
    /** コマンド：にげる */
    private static final String ESCAPE = "3";

    /** 入力部品 */
    private Scanner scan;
    /** プレーヤー */
    private Player player;
    /** モンスター */
    private Monster monster;

    /** 初期表示を行う */
    public void init() {
        player = new Player(20, 10, 1, "プレーヤー");
        monster = new Monster(10, 5, 1, "たくのじ");

        System.out.println(monster.getName() + "が現れた！");
        monster.say();
        scan = new Scanner(System.in);
    }

    /** 入力処理 */
    public String input() {
        return scan.next();
    }

    /** 入力後に行う処理 */
    public boolean update(String input) {
        if (CheckerUtils.isNumber(input, CheckerUtils.REG_1_TO_3) == false) {
            System.out.println("1-3を入力してください。: " + input);
            return false;
        }
        // コマンド実行後の計算
        if (ATTACK.equals(input)) {
            // モンスターへダメージ
            int monsterDamage = this.calcAttack(player.attack(), monster.deffence(), player.getName());
            int monsterResult = monster.getHp() + monsterDamage;
            monster.setHp(monsterResult);
        }
        // モンスターの攻撃
        int monsterAttack = this.calcAttack(player.deffence(), monster.attack(), monster.getName());
        int playerResult = player.getHp() + monsterAttack;
        player.setHp(playerResult);

        return true;
    }

    /** 
     * 画面を更新する。
     * @return ture: 終了 false: 続く
     */
    public boolean render() {
        if (monster.getHp() > 0) {
            monster.say();
        } else if (player.getHp() <= 0 ) {
            System.out.print(player.getName() + "はたおれてしまった。");
            return true;
        } else {
            monster.lastMessage();
            System.out.print(monster.getName() + "をやっつけた。");
            return true;
        }
        return false;
    }

    public void viewStatus() {
        viewStatus(player.getHp(), player.getMp(), monster.getHp(), monster.getMp());
    }

    private void viewStatus(int playerHp, int playerMp, int monsterHp, int monsterMp) {
        String line1 = "たたかう: 1   プレーヤー   たくのじ";
        String line2 = "ぼうぎょ: 2   HP: A1　    HP: B1";
        String line3 = "にげる　: 3   MP: A2　    MP: B2";
        // 値を入れ替える
        line2 = line2.replace("A1", String.format("%02d", playerHp)).replace("B1", String.format("%02d", monsterHp));
        line3 = line3.replace("A2", String.format("%02d", playerHp)).replace("B2", String.format("%02d", monsterHp));

        System.out.println(line1);
        System.out.println(line2);
        System.out.println(line3);
    }

    private int calcAttack(int attack, int deffence, String attackerName) {
        int result = 0;
        System.out.println(attackerName + "のこうげき");
        if (attack > deffence) {
            result = deffence - attack;
            System.out.println(Math.abs(result) + "のダメージ!");
        } else {
            System.out.println("こうげきを、はじいた!");
        }
        return attack > deffence ? deffence - attack : 0;
    }
}

じゃんけんゲームから比べてみると、コード量が増えたように見えます。がビビることはありません。

ポイントはメソッド単位で処理を見ることです。
そうすれば、１２〜１６行くらいなもんです。物により長大なものもありますが。。。

そして、気をつけなければいけないのが、フィールド変数と以下のクラスです。

スーパークラス(親クラス)

今回の実装では、PlayerとMonsterクラスが似たような処理だったので、同じ処理はスーパークラスで管理することにしました。
TextRpgGame#init()でインスタンスを取得している。２つのクラスが実装しています。
具体的には、スーパークラス(親クラス)のCharactorクラスを継承して実装している。ということです。

そして、ネーミングが悪いのもあるのですが、CharactorクラスはJavaのライブラリの中にもありますのでちょっとだけ注意です。

PlayerクラスとMonsterクラスはデータを保持するクラスです。戦闘して互いのHPを削り合う形でゲームは進むので、ほぼデータクラスです。
「たたかう、ぼうぎょ」などのコマンドはそれぞれのクラスに実装します。PlayerとMonsterでは攻撃方法が違うからです。

PlayerクラスとMonsterクラス

フィールド変数とGetter, Stterを主軸に実装したクラスです。
しかし、HPなどのフィールドはスーパークラスのCharactorクラスへ移動しました。

public abstract class Charactor {
    /** 名前 */
    protected String name;
    /** HP */
    protected int hp;
    /** MP */
    protected int mp;
    /** Level */
    protected int level;
    /** 攻撃力 */
    protected int atack;
    /** 防御力 */
    protected int defence;
    /** 武器 */
    protected Wepons wepons;
    /** 防具 */
    protected Armors armor;

    /** 抽象メソッド: 攻撃 */
    public abstract int attack();

    /** 抽象メソッド: 防御 */
    public abstract int deffence();
　・
　・
　・
}

このように、スーパークラスでHPなどは管理しています。
これを継承するPlayerは下のようにコンストラクタとスーパークラスの抽象メソッドをオーバーライドします。

public class Player extends Charactor {

    /** コンストラクタ */
    public Player(int hp, int mp) {
        this.hp = hp;
        this.mp = mp;
    }

    /** コンストラクタ */
    public Player(int hp, int mp, int level, String name) {
        this.hp = hp;
        this.mp = mp;
        this.level = level;
        this.name = name;
        // 装備を行う
        setArms();
    }

    /**
     * 装備を行う。
     */
    private void setArms() {
        this.wepons = new Wepons("ひのきのぼう", 5);
        this.armor = new Armors("ぬののふく", 5);
    }
    /**
     * 攻撃コマンドのメソッド。
     * 武器の攻撃力を返却する。
     * @return 武器の攻撃力
     */
    @Override
    public int attack() {
        this.atack = wepons.getAttackPoint();
        return this.atack;
    }

    @Override
    public int deffence() {
        this.defence = armor.getDeffencePoint();
        return this.defence;
    }
}

そして、setArms()というメソッドでは、武器と防具クラスを生成して、Playerクラスのフィールドに設定しています。
名前の通りに、Weponsは武器、Armorsは防具を示しそれぞれ攻撃力と防御力を算出します。
現段階では、攻撃力と防御力がそのまま設定されていますが。。。

とりあえずは、こんな感じで作っています。
GitからPULLして遊んでみてください。
やり方は、こちらの動画にもあります。

記事もあります。
Eclipse GitからPULL

下の方に、関連ページの一覧がありますのでそちらもどうぞ

Git関連

Java ミニゲームソース付き〜RPGの戦闘シーンを作る2 in Console〜

今回は、入力〜戦闘を行い、次のターンへ進む処理を実装します。

前回は、以下の画面を表示するところまで実装しました。

作成したクラス一覧
・GameMain
・TextRpgGame
・Monster
・Player
・CheckeerUtils

１ターンの戦闘

１ターン分の戦闘を行うのに、「攻撃力、防御力」のパラメータが必要になります。
具体的には下のようなイメージです。

プレーヤー
HP: XX
MP: XX
攻撃力：XX
防御力:XX

こんな感じです。これは当然モンスターにも必要になります。

ここで、ちょっと注意というか、気がつく(実装したから気がついた)のが、PlayerクラスとMonsterクラスの実装が「ほぼ同じ」だということです。
PlayerクラスとMonsterクラスの違いはクラス名くらいなのです。
なので、このPayerクラスとMonsterクラスの同じような処理はまとめてしまいましょう！

クラスの処理をまとめる

まとめる方法は色々とありますが、今回は「スーパークラス(親クラス)」を使用します。
イメージは下のような感じです。

上のような図はUMLのクラス図と言います。
UMLに関しては他の記事に記載しているので。。。

今回は、実装の方を進めます。
上の図にあるように、Charactorクラスを作成します。
そして、PlayerとMonsterで同じ実装をしている部分をCharactorクラスに引っ越ししてしまいます。

具体的には下のような実装です(GetterとSetterは省略)

public class Charactor {
    /** HP */
    protected int hp;
    /** MP */
    protected int mp;
    /** Level */
    protected int level;
    /** 攻撃力 */
    protected int atack;
    /** 防御力 */
    protected int defence;
    /** 武器 */
    protected Wepons wepons;
    /** 防具 */
    protected Armors armor;

ちなみに、武器と防具はまた別にクラスを作成しました。
中身はまだ決まっていません。とりあえずは、武器なら攻撃力、防具なら防御力をフィールド(要素)として持っています。

そして、PlayerクラスとMonsterクラスには攻撃、防御のコマンドが必要になります。
しかし、これも共通するのでスーパークラスに作成します。
ここで「実装」という言葉を使わなかったのはわけがあります。

抽象メソッド

書き方はインターフェースの時と同じです。
public void XXXXX();というように、メソッドの宣言のみを記述します。

具体的に下のように実装しました。

public abstract class Charactor {
    /** HP */
    protected int hp;
    /** MP */
    protected int mp;
    /** Level */
    protected int level;
    /** 攻撃力 */
    protected int atack;
    /** 防御力 */
    protected int defence;
    /** 武器 */
    protected Wepons wepons;
    /** 防具 */
    protected Armors armor;

    /** 抽象メソッド: 攻撃 */
    public abstract int attack();

    /** 抽象メソッド: 防御 */
    public abstract int diffence();
}

クラスを通常のクラスから抽象クラスへ変更：public classからpublic abstract classへ修正
そして、これを継承するクラスは、下のようにエラーが出ます。

抽象メソッドはオーバーライド

これを行わないと上のようにビルドエラーが出ます。
Javaのプログラミングルールみたいなものです。
逆にいうと、抽象メソッドは「必ずオーバーライドする」ことが約束されるので、「XXXクラス(インターフェース )を実装するクラスには△△△というメソッドが必ずある」ということになりますので、下のような実装が可能になります。

List listA = new ArrayList();
List listB = new LinkedList();

listA.add(オブジェクト１);
listB.add(オブジェクト２);

今回のPlayerクラスとMonsterクラスにも同じことが言えて、下のような実装が可能です。※多分使わないけど。。。

Charactor ch1 = new Player(10, 10);
Charactor ch2 = new Monster(5, 5);

ch1.attack();
ch2.attack();

こんな感じで動きました。
最終的なソースはこちらにあります。元のソースと比較している画面が見れます。

でわでわ。。。

<!— BODY広告 —>

JavaFX関連ページ

ステップアップ関連ページ一覧

JavaFX + ND4Jで機械学習準備

オブジェクト指向関連ページ

[オブジェクト指向の概念1〜OracleDocのチュートリアル１〜](https://zenryokuservice.com/wp/2019/10/301. /%e3%82%aa%e3%83%96%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e6%8c%87%e5%90%91%e3%81%ae%e6%a6%82%e5%bf%b5-%e3%80%9coracledoc%e3%81%ae%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab%ef%bc%91/)
オブジェクト指向の概念2〜クラスとは〜

2020年6月13日2020年6月16日

Java ミニゲームソース付き〜RPGの戦闘シーンを作るin Console〜

RPGゲームの戦闘シーンを作成したいと思います。
イメージは、ファミコンのドラ◯エのように、「〜があらわれた！」で始まり、最後は「〜をたいじした。」と表示して終わる。

テキストを主軸にした描画方法でのゲームです。

戦闘シーン

今回作成する「戦闘シーン」に関して、はじめに着手する理由を記載しておきます。

作ってしまえば、あとで使い回しが可能(そのように作る)
テキストのみのゲームをテスト的に実行してみる
テキストベースなので、細かい描画処理がいらない
オブジェクト指向プログラミングの練習になる

上記のような理由(と自分の趣味の関係)でテキストRPGゲーム風なプログラムを作成してみようと思います。

今までの流れ

以前、「じゃんけんゲーム」を作成しました。
・Java ミニゲームソース〜じゃんけんゲーム in Console 〜
・Java ミニゲームソース〜じゃんけんゲーム in Console 完成〜

ここで、「単純にクラスを作ってプログラムを起動する」ということを実践してみました。

次は、「クラスとクラスを組み合わせて何かを作る」という部分に着手します。

クラスに役割を与える

例えですが、グループでカレーを作るとかの作業を行うとき。。。
以下のような役割分担をすると思います。

火を起こす人
食材を切る人
カレーの具を煮る人
その他。。。

このように、クラスにも役割を与えます。

処理の流れ(簡単設計)

今回作成するRPGゲーム(戦闘シーンのみ)は勇者(プレーヤー)とモンスター(たくのじ)が登場します。

そして、戦闘を行い、最後に勝者がわかるよう「〜をやっつけた」もしくは、「〜は倒れた」のような文言を表示する。

登場するクラスを考える

すぐに思いつくのは「プレーヤー」と「モンスター」です。
これらは、クラスにするとして、その他は何が必要でしょうか？

ますは、プログラムを起動するための「メインメソッド」

そして、ゲームとして動かすためのクラス、
今回は以前自分が学習したLWJGLのプログラムの組み方を参考にして作ります。

大まかに、ゲームを作るときの処理は以下の1〜４の処理をループしてゲームとしての動きを実現します。

初期処理(画像や、データの読み込みなど)
入力受付
画像やデータの更新
画面の再描画

よくよく考えてみると、ほとんどのゲームが「初期表示(再表示)」→「入力」→「再描画」となっていると思います。

プレーヤー側からしたら「データ更新」の部分は見えませんがね(笑)

作成するクラス一覧

上記の内容を踏まえ、以下のクラスを作成しました。
初期表示のみの実装ですが、Githubにアップロードしています。

GameMain: ゲームを動かす、メインメソッドのクラスです
TextRpgGame: メインメソッドから、呼ばれる、ゲームの内容を実装するクラスです。
Player, Monster: プレーヤーとモンスターを表現するクラスです。主にデータを保持するクラスです。
CheckerUtils: 入力チェックなどのチェック処理をまとめたクラスです。

上のようなクラスを作成しました。動作は下のような感じです。
コンソール表示なので。。。

作成したクラス一覧
・GameMain
・TextRpgGame
・Monster
・Player
・CheckeerUtils

余談：ソースの管理について

Githubを使うとソースのバージョン管理、つまりは、コミットした順序で、ソースの修正部分を管理できる代物です。
接続方法は下の動画で紹介しています。

JavaFX関連ページ

2020年6月12日2020年6月10日

Java ミニゲームソース〜じゃんけんゲーム in Console 〜

今回は、Javaで作成するミニゲームと題して下のゲームを作成したいと思います。

じゃんけんゲーム

毎度おなじみ「じゃんけんゲーム」シンプルに、楽しめるゲームとして最もポピュラーなものだと思います。
それをJava言語を使ってコンソールゲームにしました。
しかし、バグもあります。。。

Mainメソッド

メインメソッドは変更しません。前回のコードはこちらから見れます。※前回の記事です。

public class Main {
    public static void main(String[] args) {
        Scanner scan = new Scanner(System.in);
        String input = scan.next();

        FirstCls first = new FirstCls();
        if ("exe".equals(input)) {
            first.execute(scan);
        }
        boolean isNumber = first.isNumberString(input);
        if (isNumber) {
            System.out.println(input + "は数字です。");
        } else {
            System.out.println(input + "は数字ではありません。");
        }
    }
}

今回の実装はFirstCls#executeから始めます。。。

実際に作って見た

ここで、Mainメソッド変更しません。とはじめに記載したのではじめが分かりづらいです。起動したら「exe」と入力する必要がありました(笑)
そして、実装したコード(FirstCls)は下のようなコードです。
※使用していないゴミコードは削除しています。全体はこちらのGithubで見ることができます。

public class FirstCls {
    /** システム(OS)で使用する改行コード */
    private static final String SEPARATOR = System.getProperty("line.separator");
    /** プレーヤの勝利フラグ */
    private static final Integer WIN = 1;
    /** プレーヤの敗北フラグ */
    private static final Integer LOOSE = 2;
    /** プレーヤの引き分けフラグ */
    private static final Integer DRAW = 3;

    public void execute(Scanner scan) {
        System.out.println("*** EXECUTEを起動します ***");
        // じゃんけんの手のマップ
        Map<String, String> map = createJankenTe();
        // じゃんけんの勝敗マップ
        Map<String, Integer> judgeMap = createJudgement();
        Random rnd = new Random();
        while(true) {
            System.out.print("じゃんけん。。。");
            String player = scan.next();
            int cpu = rnd.nextInt();
            System.out.println("あなた：" + map.get(player) + " CPU：" + map.get(String.valueOf(cpu)));
            if (judgeMap.get(player + cpu) == WIN) {
                System.out.println("You win!");
            } else if (judgeMap.get(player + cpu) == LOOSE) {
                System.out.println("You loose!");
            } else if (judgeMap.get(player + cpu) == DRAW) {
                System.out.println("Draw! one more time ...");
                continue;
            }
            System.out.println(SEPARATOR + "もう一度やる？" + SEPARATOR + "y: もう一度 n: やめる");

            String more = scan.next();
            if ("n".equals(more)) {
                break;
            } 
        }
    }

    /**
     * じゃんけんの手を設定したMapを返却する
     * @return Map
     */
    private Map<String, String> createJankenTe() {
        Map<String, String> map = new HashMap<>();
        map.put("1", "グー");
        map.put("2", "チョキ");
        map.put("3", "パー");
        return map;
    }

    /**
     * じゃんけんの勝敗パターンをMapに設定
     * @return Map
     */
    private Map<String, Integer> createJudgement() {
        Map<String, Integer> map = new HashMap<>();
        map.put("12", WIN);
        map.put("23", WIN);
        map.put("31", WIN);
        map.put("21", LOOSE);
        map.put("32", LOOSE);
        map.put("13", LOOSE);
        map.put("11", DRAW);
        map.put("22", DRAW);
        map.put("33", DRAW);
        return map;
    }
}

こんな感じです。

処理内容

Mainメソッドは。。。割愛します。
FirstCls#execute()では、ジャンケンで取りうる手(グー・チョキ・パー)をMapに設定しておき、1~3の入力に対応してそれぞれの手を表示、じゃんけんの判定にしようします。

勝敗の判定には、全てのパターンをMapに記憶してプレーヤーの手とCPUの手を連結→プレーヤー：グー、CPU: チョキであれば"12"で勝敗マップからは「1」が取得できます。

１は勝利判定のフラグです。
詳細は上のコードに書いてありますので。。。

近くに、これの解説動画も作成いたします。

でわでわ。。。

Java OpenCV 〜輪郭：輪郭検出処理の順序〜

OpenCVでの輪郭抽出の処理手順を確認しようと思います。

今までに、OpenCV（JavaCV)での、学習準備と基本的な処理方法の学習を学習しました。

輪郭抽出のことを調べるとPythonでの処理とかアルゴリズムの理論とか、肝心要の部分が見つからず。。。

ようやく。。。

輪郭抽出の処理順序

画像を読み込む
グレースケール(白黒画像)に変更する
グレースケール画像から輪郭を抽出

大まかに、上のような手順で処理を行うと表示できる。
ただし、グレースケースの画像から輪郭を取得するのでわりかしリアルな白黒だと、外側の枠しか輪郭が取得できない。

ちょっとわかりづらいけど、緑色の線が輪郭です。

そして、これをわかりやすくするには
Imgproc.threshold()を使用する必要がある。

動かしてみると下のようなイメージです。

ここまできたら、あとはトライアンドエラーで星輪郭が得られるように、下の値を調整してやります。

ちょと画像は違いますが、下のような感じで試しました。

しかし、これは、写真により値を変更しないと欲しい輪郭が取れない。。。

よく見かけるサンプルでは、輪郭がくっきりしているので、問題ないだろうが、ちょっと考え直す必要があると思いました。

→輪郭の取得方法に関して、考え直すと言う意味です。

2020年5月21日2020年5月20日

Java OpenCv 〜画像データを操作する〜

OpenCVの本を読み学習中です。
しかし、よくわからん。。。切羽詰まったので本当に基礎からやり直していく方向です。

画像データとは

参考にするサイトはこちらです。
とりあえずわかっているのは画像データが下のようなものだということ。ちなみに下のイメージです。(32x32)のPNGファイル

早い話が、RGBのデータとRGBAのデータがあり透過したい場合はRGBAのデータでないとできない。。。
というわけです。

具体的に、自分の場合はデータを操作するために、以下のような経緯で理解しました。

画像の生データを見る

[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0],[x: 255.0 y: 255.0]
 ....

こんな風になっていて「わけわからん！」と思っていたが、
中身を System.out.println()して見ると

// 表示イメージを読み取る
Mat charactor = Imgcodecs.imread(url.getPath(), Imgcodecs.IMREAD_COLOR);
Mat charactor1 = Imgcodecs.imread(url.getPath(), Imgcodecs.IMREAD_UNCHANGED);
System.out.println("Channels = channelA: " + charactor.channels() + " channelB: " + charactor1.channels());
System.out.println("Length = channelA: " + charactor.get(0, 0).length + " channelB: " + charactor1.get(0, 0).length);
System.out.println("Byte1 = channelA: " + charactor.get(5, 24)[0] + " channelB: " + charactor1.get(6, 24)[0]);
System.out.println("Byte last = channelA: " + charactor.get(5, 24)[2] + " channelB: " + charactor1.get(6, 24)[3]);

こんな感じのコードで出力してみたところ。。。

Channels = channelA: 3 channelB: 4
Length = channelA: 3 channelB: 4
Byte1 = channelA: 33.0 channelB: 84.0
Byte last = channelA: 83.0 channelB: 255.0

上のように出力されたました。

つまり

RGBのファイルだと、Mat = (R, G, B) = (xx.xx, xx.xx, xx.xx)という値が入っている

RGBA(透明度付き)の場合だとMat = (R, G, B, A) = (xx.xx, xx.xx, xx.xx, xx.xx)
具体的には、

Mat charactor = Imgcodecs.imread(url.getPath(), Imgcodecs.IMREAD_COLOR);
double[] d = characotr.get(0, 0); // 画像行列(32x32)の左端
d[0]; // Rの値
d[1]; // Gの値
d[2]; // Bの値
d[3]; // Aの値

という風になる。。。

そして、このことを理解してプログラムを実行すると
取得したイメージファイルのRの値が255のデータ(下の画像の白い部分(255,255,255))のアルファ値を０にセットしてやれば、データの背景を透過することができる。。。

ちょっと小さいけど、右側のイメージは背景が透過されています。

実行したコードは下です。

// 表示するイメージを取得
URL url = getClass().getResource("/pipo-charachip001.png");
// 表示イメージを読み取る
// RGBで読み取る
Mat charactor = Imgcodecs.imread(url.getPath(), Imgcodecs.IMREAD_COLOR);
// RGBAで読み取る
Mat charactor1 = Imgcodecs.imread(url.getPath(), Imgcodecs.IMREAD_UNCHANGED);
System.out.println("Channels = channelA: " + charactor.channels() + " channelB: " + charactor1.channels());
System.out.println("Length = channelA: " + charactor.get(0, 0).length + " channelB: " + charactor1.get(0, 0).length);
System.out.println("Byte1 = channelA: " + charactor.get(5, 24)[0] + " channelB: " + charactor1.get(6, 24)[0]);
System.out.println("Byte last = channelA: " + charactor.get(5, 24)[2] + " channelB: " + charactor1.get(6, 24)[3]);
boolean boo = true;

for (int y = 0; y < charactor1.height(); y++) {
    for (int x = 0; x < charactor1.width(); x++) {
        double[] d = charactor1.get(y, x);
        if (d[0] == 255.0) {
            if (boo) {
                System.out.println("*** Testing ***");
                boo = false;
            }
            d[3] = 0.0;
            charactor1.put(y, x, d);
        }
    }
}
System.out.println("Byte last = channelA: " + charactor.get(5, 24)[2] + " channelB: " + charactor1.get(6, 24)[3]);
MatOfByte b = new MatOfByte();
Imgcodecs.imencode(".png", charactor, b);
BufferedImage out = createImage(b);
drawBufferedImage(out, before);

MatOfByte c = new MatOfByte();
Imgcodecs.imencode(".png", charactor1, c);
BufferedImage out1 = createImage(c);
drawBufferedImage(out1, after);

出力したコンソールは下です。

ポイント

取得したdouble型のデータをMatクラスにセットする方法は以下のようにやりました。

// Mat charactor1 = Imgcodecs.imread(url.getPath(), Imgcodecs.IMREAD_UNCHANGED);
double[] d = charactor1.get(y, x);
d[3] = 0.0;
charactor1.put(y, x, d);

こんな感じで、できました。

Java OpenCv 〜画像データを操作する〜