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))のアルファ値を0にセットしてやれば、データの背景を透過することができる。。。


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

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

// 表示するイメージを取得
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 〜背景除去、輪郭を学習する準備1: SceneBuilder〜

ゲームを作ろとしていて、詰まってしまいました。
画像の扱いが全くできない、というところに至りました。。。

まとめるとOpenCVで画像処理をして、ゲームに使うイメージファイルを作成しようという考えです(笑)。

Java版 OpenCV

今までに、OpenCVは色々と触ってきました、しかし、細かいところが理解できず、放置。。。という残念な状況でしたが。。。

今回は、ゲームを作るという大義名分があるのでとことん進められそうです。

今回の目的

今回OpenCVでやりたいことは「背景除去」です。
こちらのリンク先で、ゲームで使用できる、イメージファイルを配布してくれているのですが、如何せん「せっかくの透過PINGファイルなのに、ImageIO(Javaの部品)でロードすると背景が白になってしまう事件に見舞われ。。。

OpenCVで元々あったファイルを32x32に切り出したものです。

これをゲームで使用すると。。。透過できてた。。。

昨日は背景に白い部分が残っていたのですが。。。
JavaFXのキャッシュ処理かなんかでしょう。。。今後は気をつけよう。。。

しかしOpenCV!

今回は、背景を除去することを目標に進めようと思いますが、参考にする書籍(これの古いものを、結構前に購入しました。OpenCV3→OpenCV)

【送料無料】 詳解 OpenCV 3 コンピュータビジョンライブラリを使った画像処理・認識 / Gary Bradski 【本】

背景除去を行うには

まずは、「輪郭がなんなのか?を理解する」というところから学習していきます。
そのためには、理論と実践を行う必要があるのですが、これを行う準備(アプリケーション作成)を行おうと思っています。

処理を確認するためのアプリ

大まかに以下のようなアプリを作成しようと考えています。

  1. 画面を開く
  2. 起動するプログラムを選択できる
  3. 書くプログラムの実行結果を画面上で確認できる
  4. なんどもプログラムの起動ができる
  5. 当然、プログラムはいくらでも追加可能とする

ちなみに、この仕組みはデザインパターンですでに出来上がっているものなので、簡単に作れます。
以前、下のようなものを作成しました。
Java Discord Listener実装〜コマンドを好きなだけ追加しよう〜

こんな感じで、アプリの作成を行います。

ステップ1:画面の土台

この土台はSceneBuilderというアプリを使用します。GUIで画面の土台を作成できるツール(アプリ)です。

作成した動画がありますのでこちらも参考になれば。。。

今日は作業時間の都合で、ここまでにしますが、とりあえずは、土台になる画面ができたので。。。作るのには10分かからなかったと思う。。。

実際に起動するプログラムを見てみます。

FXMLローダー?

作成したコードはGithubにアップしてあります。

一部抜粋

@Override
public void start(Stage primaryStage) throws Exception {
    // FXMLを読み込む
    FXMLLoader loader = new FXMLLoader(ClassLoader.getSystemResource("TestingCv.fxml"));
    // 画面のルートコンテナ(Pane)を取得(FXMLで作成されたもの)
    BorderPane root = (BorderPane) loader.load();
    // シーン(画面を表示する用のコンテナ)
    Scene scene = new Scene(root, 800, 600);
    // FX用のCSSを読み込む
    scene.getStylesheets().add(getClass().getResource("ap   plication.css").toExternalForm());

    primaryStage.setTitle("Video Processing");
    primaryStage.setScene(scene);
    primaryStage.show();
    // 作成するクラス(これはFXMLで指定する)
    OpenCvController controller = loader.getController();
    primaryStage.setOnCloseRequest((new EventHandler<WindowEvent>() {
        public void handle(WindowEvent we) {
            controller.setClosed();
        }
    }));
}

これは、単純にJavaFXを起動、FXMLを読み込み(ロード)それを表示する。。。というものです。

今後は、このFXMLにコントローラークラスを設定してやる必要があります。上のコードで

// 作成するクラス(これはFXMLで指定する)

と記載している部分がコントローラーを呼び出しているところです。
今回作成したFXMLにはコントローラーを定義していないのでNULLが入ります。なのでエラーになりませんでした。
※多分終了ボタンとか押した時に落ちる。。。

まとめ

今回作成したというか作成してあったプログラムは「OpenCvTest.fxml」を読み込むプログラムだったのですが、それを新規に作成したFXMLを読み込むように修正して起動しました。

FXMLLoader loader = new FXMLLoader(ClassLoader.getSystemResource("TestingCv.fxml"));

しかし、他のところに気を取られて、コントローラーの実装まで行きませんでした(笑)

次回は、この画面にプログラム起動するコントローラーの実装と画面の細かい調整をしようと思います。

でわでわ。。。



Java OpenGL JOGLを使う〜 Objファイルを読む〜

2021-03-31 18:16:14 Wednesday前回は、JOGLを使用してみようと思ったのでとりあえずで、動かしてみました。

そして、OBJファイルなど他のアプリを使用して作成した3Dモデルをロードする方法を探してみましたが、なかなか見つからず。。。

結局はファイルを読み込んで生成する

調べていくと、見つかったのはファイルの内容から3Dモデルを生成する方法がありました。

よく考えてみれば、その通りだよな。。。ファイルに3Dモデルを生成するための情報が書いてあるからそれを読んで、表示する。。。

当たり前な話だ(笑)

そんなわけで、その方向で進めようと思った次第です。
そして、Blenderを使用する人が多いのですが、Blenderを使用するのに色々と覚えなくてはいけないことが多いのと、「絵心のないやつNo1」の自分としてはVoxcelのようにシンプルなアプリで手一杯なので、こちらを使用しようと思います。

Voxcelのテンプレート

下に示すように、デフォルトで用意されているデータを表示するとしたのようなイメージが見れます。

そして、「エクスポート」で出力したデータから上のイメージが作成されています。

なので、元になるデータを見て見ます。

まずは、ファイルの中身を見る

<chr_sword.obj>

# MagicaVoxel @ Ephtracy

# group
o 

# material
mtllib chr_sword.mtl
usemtl palette

# normals
vn -1 0 0
vn 1 0 0
vn 0 0 1
vn 0 0 -1
vn 0 -1 0
vn 0 1 0

# texcoords
vt 0.00195312 0.5
vt 0.0332031 0.5
vt 0.0371094 0.5
vt 0.0449219 0.5
vt 0.0605469 0.5
vt 0.166016 0.5
vt 0.634766 0.5
vt 0.638672 0.5
vt 0.962891 0.5
vt 0.974609 0.5
vt 0.978516 0.5
vt 0.982422 0.5
vt 0.994141 0.5

# verts
v 0.1 1.2 -1
v 0.1 1.2 -1.1
v 0.1 1.3 -1
v 0.1 1.3 -1.1
v 0.5 2 -1
v 0.5 2 -1.1
  ・
  ・
  ・
  ・
# faces
f 3/1/1 2/1/1 1/1/1
f 4/1/1 2/1/1 3/1/1
f 7/7/1 6/7/1 5/7/1
f 8/7/1 6/7/1 7/7/1
f 11/4/1 10/4/1 9/4/1
f 12/4/1 10/4/1 11/4/1
f 15/4/1 14/4/1 13/4/1
f 16/4/1 14/4/1 15/4/1
f 21/5/1 18/5/1 17/5/1
  ・
  ・
  ・

OBJファイル

※(w)もある キーワード 意味 内容
「#」 コメント 記述した行がプログラムには読まれない
「mtllib」 マテリアルファイル名 使用するマテリアルファイル名
「g」 グループ名 おそらく1つのOBJファイル内に2つ以上のオブジェクトを書き込んだ時に
どのオブジェクトのデータであるかを分ける為の名前
「usemtl」 マテリアル名 使用するマテリアル名
「v」 頂点座標値 「v x座標 y座標 z座標」と表現)
「vt」 テクスチャ座標値 テクスチャ座標データです。テクスチャ座標は基本的に2次元データ
「vn」 頂点法線ベクトル 「vn x座標 y座標 z座標」の形式
「f」 多角形面データ 「頂点座標番号/テクスチャ座標番号/頂点の法線ベクトル番号」各番号は上から1, 2, …と振られていると考えます

<サンプル>
例)
v 1.0, 1.0, 1.0 ←1
v 1.5, 1.5, 1.5 ←2

vt 1.7 1.7 1.7 ←1
vt 1.8 1.8 1.8 ←2

vn 2.0 2.0 2.0 ←1
vn 2.3 2.3 2.3 ←2

f 1/1/1 1/2/2

f 頂点座標番号/テクスチャ座標番号
f 頂点座標番号//頂点の法線ベクトル番号
f 頂点座標番号

「頂点法線ベクトル」がよくわからなかったけど、Cube(立方体)の場合は「面」になる部分が「6こ」なので、その座標(ベクトル)が下のようになっている

# normals
vn -1 0 0 # 1つめ
vn 1 0 0 # 2
vn 0 0 1 # 3
vn 0 0 -1 # 4
vn 0 -1 0 # 5
vn 0 1 0  # 6

しかし、細かいところがまだわからない。。。

<chr_sword.mtl>

# MagicaVoxel @ Ephtracy

newmtl palette
illum 1
Ka 0.000 0.000 0.000
Kd 1.000 1.000 1.000
Ks 0.000 0.000 0.000
map_Kd chr_sword.png

MTLファイル

キーワード 意味 内容
newmtl マテリアル名を定義 ここで定義した名前がマテリアルの名前になる
Ka アンビエントカラー RGB(0.0~1.0)
Kd ディフューズカラー RGB(0.0~1.0)
Ks スペキュラーカラー RGB(0.0~1.0)
map_Kd テクスチャ名 文字列

上のようなデータが記述されています。
そして、objファイルの公式な定義がどのようにされているのか?に関しては、ここのサイトを見る限りはっきりしていないようなので、深く追求することはしません(笑)

とにかく重要なのはこのファイルに定義されている項目と内容の理解です。そして、参考にするサイトはこちらです。
そして、抜粋ですが、下のような形で定義されているようです。

# (x,y,z[,w]) 座標によるジオメトリ頂点の一覧。w は任意であり、標準は 1.0 である。
  v 0.123 0.234 0.345 1.0
  v ...
  ...
  # (u, v [,w]) 座標によるテクスチャ座標の一覧。座標は0から1の間で変化することができる。w は任意であり、標準は 0 である。
  vt 0.500 1 [0]
  vt ...
  ...
  # (x,y,z) 形式による頂点法線の一覧; 法線は単位法線ではないかもしれない。
  vn 0.707 0.000 0.707
  vn ...
  ...
  # ( u [,v] [,w] ) 形式によるパラメータ空間頂点 ; 自由ジオメトリ文 (以下を参照)
  vp 0.310000 3.210000 2.100000
  vp ...
  ...
  # ポリゴン面要素 (以下を参照)
  f 1 2 3
  f 3/1 4/2 5/3
  f 6/4/1 3/5/3 7/6/5
  f ...
  ...

項目を整理する

単純な形のOBJファイルと上の「剣士?」のOBJファイルを比較して見ます。
<単純なOBJ>

この3Dモデルを表示するのに使用しているOBJファイルは
下のようなものです。

# MagicaVoxel @ Ephtracy

# group
o 

# material
mtllib try1.mtl
usemtl palette

# normals
vn -1 0 0
vn 1 0 0
vn 0 0 1
vn 0 0 -1
vn 0 -1 0
vn 0 1 0

# texcoords
vt 0.306641 0.5

# verts
v 0 2 0
v 0 2 -4
v 0 6 0
v 0 6 -4
v 4 2 0
v 4 2 -4
v 4 6 0
v 4 6 -4
v 0 2 0
v 0 6 0
v 4 2 0
v 4 6 0
v 0 2 -4
v 0 6 -4
v 4 2 -4
v 4 6 -4
v 0 2 0
v 4 2 0
v 0 2 -4
v 4 2 -4
v 0 6 0
v 4 6 0
v 0 6 -4
v 4 6 -4

# faces
f 3/1/1 2/1/1 1/1/1
f 4/1/1 2/1/1 3/1/1
f 5/1/2 6/1/2 7/1/2
f 7/1/2 6/1/2 8/1/2
f 11/1/3 10/1/3 9/1/3
f 12/1/3 10/1/3 11/1/3
f 13/1/4 14/1/4 15/1/4
f 15/1/4 14/1/4 16/1/4
f 19/1/5 18/1/5 17/1/5
f 20/1/5 18/1/5 19/1/5
f 21/1/6 22/1/6 23/1/6
f 23/1/6 22/1/6 24/1/6

group

<剣士><単純なOBJ>共に下のようになっています。

# group
o

意味がわからないので下のオブジェクトを見て見ます。オブジェクトが2つあります。

# group
g untitled1

うーむ、どうやら3Dオブジェクトが1つの場合は、「o」になるようだ。。。あまり深く追求しても意味がなさそうなので、ここで終わりにします。

material

# material
mtllib untitled1.mtl
usemtl palette

これは下のobjファイルです。

同様に、<剣士>

# material
mtllib chr_sword.mtl
usemtl palette

usemtlは使用するマテリアルの宣言でファイルの最後まで続くようですが、いまいち理解できませんでした。

最も単純な3Dモデル(Voxel)

ボックスが1つだけです。。。

OBJファイルを見て見ます。
ほぼ<単純なOBJ>と同じデータでした。
ファイルの行数も同じでした。。。

vnは立方体ならば、その角にある線の数を表すので6本あるのはわかったが、座標が何を示すのかがわからない。。。

Javaコード

参考にするコードはこちら
とりあえずは、このコードを基本にして行こうと思いますがもう少し調査が必要になります。

今日はここまでにします。

でわでわ。。。

https://yttm-work.jp/model_render/model_render_0002.html

Java ゲーム作成 〜イメージ(絵)からアニメーションを作るには〜

MagicaVoxelBlenderなどのツールで3Dモデルを作るということに関しては、練習が必要なので。。。まぁ練習する方向で進めることにしました。

そして、練習の間にできることを進めていこうと考えています。

ちょいと調べて見たところ、作成しようとしているゲームは「SRPG」というジャンルのゲームが近い感じです。

できることは以下の3つ

  1. 今まで作成した仕様をプログラムに落とす
  2. まだ決まっていない仕様を作成する
  3. プレーヤーの使用するIMGを取り込んだ後の処理を考える

現状、一番気にしているのは3番の

「IMGを取り込んだ後の処理」に関してどのような実装にするか?

です。1、2に関してはある程度の見通しがついているので、問題ないのですが、この部分に関しては初挑戦な部分なので。。。

まずは調査

やはり「不明点」をそのままにするのはよろしくないと判断しました。
3に関して調べていこうと思います。

理想

理想としては、以下のような手順を考えています。

  1. プレーヤーが作成したIMGファイルをプロコンゲームサーバーに送信
  2. サーバーで受け取ったXMLファイルとIMGファイルを使用してプレーヤーを作成する
  3. バトルフィールド(マップ)を表示
  4. ゲーム開始

この手順で2の部分に関して、以下のように考えています。

  • XML: プレーヤーのステータスを生成するのに使用
  • IMG: プレーヤーの操作するキャラクター生成に使用

イメージするだけならいくらでもできるのですが、如何せん実現できなければ、話にならないので。。。

XMLを使用してのステータスは今まで考えてきたように実装するのは可能です。
Java ゲーム作成 〜ステーテス作成ロジック〜

しかし、IMGからアクションなど、「アップロードされたIMGを動かす」となると、また話が変わってきて、自分の経験にない分野の実装になるので調査、学習が必要になるわけです。

絵が描けない

絵が描けないので、今まで遠ざけて通ってきた部分ですが、今回はそうとも言っていられないのでやる方向で進みます。

まずは問題提起

ここで問題、疑問になることを明確にしておきます。

  1. 1枚のIMGファイルからアニメーションを作成することはできるのかわからない。
  2. マップ(ダンジョン)上のキャラクターを動かすのに2Dと3Dのどちらが適当か?
  3. 2.5Dというのもあるが、いまいち理解できていない
  4. ポイントは、攻撃、防御のアクションが見てわかるようにすることだが、どのような表現が良いか判断しかねている

IMGからアニメーションを作る

この部分に関しては調査してから勧めます。
可能か不可能か?これを明確にする必要があり、そうしないと作成するものがどの方向にススかわかりません。

シンプルに考えてみる

OpenCVを使用するのが無難かもしれない。。。
下のような手順でアニメーションを作成できないだろうか?

  1. IMGファイルを読んで、それをコピー
  2. コピーしたIMGを編集して背景を取り除く
  3. 画像を解析して、例えば足を動かした後の画像背を作成
  4. 2つの画像を切り替える形でアニメーションにする

やはり、3番がネックになるんだなぁ。。。
何か良い方法はないものか?

OpenCVの画像編集

大まかに以下の大まかに以下のような編集ができるようだ。

  1. リサイズする
  2. 回転する
  3. 平行移動させる
  4. 切り抜く(crop)
  5. 挿入する(ロゴ)
  6. モザイク処理をする
  7. ぼかす
  8. 画像をくっきりさせる(シャープ)

他にも、立体視差を使用した変換方法もあるようだが。。。

状況整理

とりあえずは、デフォルトプレーヤーIMG(or 3Dモデル)でゲームを動かしてみることにします。ラチがあかん(笑)

なので、はじめの問題部分に関しては保留にしますが、以下のように修正が効く方向で設計を進めたいと思います。

3Dモデルをアップロードすればいいんじゃね?

今この記事を書いていて気がついたのですが、無理してIMGを変換したりしなくても、3Dモデルをアップロードしてもらえば良いではないですか(笑)。

モデリングをするのに、色々と大変でしょうが、それも楽しみのうち。。。

しかし、ボーンアニメーションなどの方法があるが、これまたLWJGLの学習を深く進める必要あり。。。

修正が効く設計

一言で言うとオブジェクト指向の設計方法です。
キーポイントは下の部分です。

  1. プロコンゲームの起動時(Map生成時)に2D版と3D版を作ってみる(ここばっかりはどうしようもない。。。)
  2. XML、IMG(or 3Dモデル)の読み込み
  3. ステータス生成及び、プレーヤー(アバター)をゲームサーバー上に表示
  4. ゲームスタート

このような手順で処理を進めるとして、3の部分で部品を切り替えてやれば良いように実装します。※設計段階なので変わる可能性あり。。。

まとめ

とりあえずは、実装して動くものを作成するが、以下のパターン分けして実装する方向に進む
設計としては下のようなイメージです。


<パターン1>
アップロードされた3Dモデルをコントロールできるように編集した3Dモデル。
<パターン2>
プレーヤーのIMGファイル、アクションなどの実装イメージがつかない。
<パターン3?(考え中)>
デフォルトアバターを使用する前提で実装するが、プレーヤー自作のアバターも使用できる方向にシフトするか?


それでも、残っている問題は2Dでのゲーム作成の方が実装が容易であるのに、3Dでの実装を考えているところです。

とりあえずは、できるところまで実装します。

ちなみに、テキストのみ、かつ戦闘シーンのみで、モノを作ってみた。

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

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

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

しかし、中途半端になってしまう。。。何か良い方法は、無いものか、。。

でわでわ。。。

関連記事

  1. Java プロコンゲーム 〜プログラミングコンテスト向けゲーム〜
  2. Java プロコンゲーム 〜設計2画面の入力フロー〜
  3. Java プロコンゲーム 〜見た目の作成(SceneBuilderの使用)〜
  4. Java プロコンゲーム 〜FXMLを読み込んで表示する〜
  5. Java プロコンゲーム 〜Socket通信を設計する〜
  6. Java プロコンゲーム 〜Socket通信を実装する〜
  7. Java プロコンゲーム 〜プレーヤー生成のシュミレーション〜
  8. Java プロコンゲーム 〜プレーヤー生成のステータスについて〜


Magica Voxel 〜基本的なところから開始〜

Javaでのゲーム作成をしていますが、ちょっと使用煮詰まりましたので、先に作成できるところから着手していこうと考えています。

JavaFXでキャラクターを動かす

今回作成しているのは、JavaFXアプリケーションになります。イメージとしては「升目状のステージに駒を置き、動かして対戦する」というものです。
なので、2次元描画の升目状でも良いのですが、ちょいと3Dモデルも考えてみようかと思います。
その先駆けとして。。。

Magica Voxel

絵が描けない(学習する気があまりない)自分ですが、ドットから始めれば行けそうだという思いから「Magica Voxelをダウンロード、インストールして見た。

しかし、インストールしてみると、画面が真っ白。。。

おかしいと思い、サイトを見てみると下のように書いてありました。

Black screen on mac: move magicavoxel.app outside the folder and then move it back.
UI is too small: CTRL +/- to scale the ui. or change "ui_scale" in the "config.txt" file.
Multiple obejcts in the world editor: press TAB or the ⇄ button on the top right.
No middle mouse button: "space + left drag" to span camera, "z + left drag" to zoom camera.
Black screen in the renderer: GPU cards or the driver don't meet the requirement.
Incomplete scene in the renderer: enable Sample>Geometry>Sparse.
Part of the model is under the ground: go to the world editor, move the object above the ground (or press G).
Models are deleted by mistake: The model can be recovered from the Trash.
Program crashed: The model can be recovered from "/cache/backup.vox".
Save screenshots for the whole window: CTRL+6 or CTRL+F6.

1番に関しては、appファイルをフォルダの外に出してから元に戻す。ということらしいですので、やってみる。

動いた。。。なぜ?。。。

まぁ考えても仕方ないので。。。

Voxelに触ってみる

参考サイトはこちらです。

ポイント

やって見た結果、下のようなものができました。


上のパレットを使ってやるところがポイントでした。
「L」のAttachを選択するとboxが増えて、Fを選択すると麺ごと増えます。
操作して見ないとなんとも言えませんが、今回のライオン作成では、上の部分をうまく使うと動かせる。ということを学びました。
参考にしたのはYoutubeのチュートリアルです。

参考にした動画のようにはいきませんでしたが、こんなもんでしょう(笑)

まとめ

根本的な目的は、作成したモデルを JavaFXで操作できるようにすることです。
しかし、問題が山積みで以下のような問題があります。

  1. 作成した3Dモデルを、ボーンアニメーションさせる方法がわからない
  2. まずはVoxelの使い方を理解する必要がある
  3. JavaFXで使用している3Dモデリング部分はやはりOpenGLのような実装になっている。。。
  4. そのほか色々。。。

こんな感じです。1つずつ退治していきたいと思います。

でわでわ。。。
<!— BODY広告 —>