こねこ Co., Ltd.

ぷろぐらむな話とゲームな話を少々。

Road to JavaFX 01 / Paneについて学ぶ(1)

Road to JavaFX!

JavaFXに関連する話題が思っていたよりも好評で、 友人からの反響が良かったので(不)定期連載を始めることにしました。

Road to JavaFX (JavaFXへの道) ということで、今回からJavaFX関係について 少しずつ掘り下げて行こう、という内容です。

前回の入門記事を踏まえての内容となりますので、「JavaFXについてまだ使ったことがない」、「その辺のチュートリアルはやってみたけど、FXMLとか良く分からなかった」という方はこちらの記事を読んでいただけると幸いです。

konekoltd.hateblo.jp

本連載では極力Java初心者の方でもわかるような記法を用いるように心がけますが、 途中で恐らくラムダ式などの話が出てくると思います。その際は別途解説記事を用意しますのでご安心ください。

Paneによるレイアウトの定義

JavaFXではPane(ペイン)というものがあり、これを配置・中に要素(ノード)を入れることによって縦並び・横並びといった画面上のレイアウトを定義することができます。

絶対座標で直接指定するのではなくレイアウトとして定義することによって、画面サイズが拡大・縮小されたとしても表示が自動的にいい感じになってくれます。

HBox / VBox

HBox (Horizontal Box) とVBox (Vertical Box) は最もシンプルな形のPaneです。HBoxは子ノードを水平(横方向)に並べていき、VBoxは子ノードを垂直(縦方向)に並べていきます。それだけです。

HBox

HBoxを使ったサンプルコードと実行結果は以下の通りです。

f:id:konekoltd:20171219203715p:plain

22行目の部分で作ったボタンをHBoxの子ノードとして取っています。addAllメソッドを使うことによって複数個のノードを一気に子ノードにしています。

HBoxの横に並らべる順は、HBoxに子ノードとして渡した順番に並んでいく形になっています。今回はb1,b2,b3の順で入れているので以上のような実行結果になっています。

VBox

VBoxを使ったサンプルコードと実行結果は以下の通りです。

f:id:konekoltd:20171219204655p:plain

HBoxとプログラムはほとんど同じです。変わっているのはHをVにしたぐらいです。

FlowPane

FlowPane (JavaFX 8)

FlowPaneは子ノードを画面の端まで並べていき、端まで行ったら折り返して再度子ノードを同じように並べていき…というレイアウトです。

デフォルトでは横方向に並べていき、端までいくと次の段から並べていく形ですが、縦方向に並べていき、端まで行くと次の列から並べていくという挙動に変更することも可能です。

サンプルプログラムと実行結果を見てます。

適宜ウィンドウサイズを拡大・縮小して確認してみると良いです。

f:id:konekoltd:20171219214410p:plain

HBox同様横方向に並べていくか・VBox同様縦方向に並べていくかの指定については、25,26行目がちょうどそのプログラムに当たります。コンストラクタにどっち並べにするかの情報を渡しています。

子ノードの指定のやり方に関してはHBox / VBoxと同様なので特に問題はないと思います。

BorderPane

BorderPane (JavaFX 8)

BorderPaneは上・下・左・右および中央のそれぞれにノードを配置することのできるPaneです。…といっても分かりにくいので、とりあえず前述のJavaのドキュメントの方にどんな感じのレイアウトになるかの画像がありますのでそちらを見ることをお勧めします。

サンプルプログラムと実行結果を見てみます。

f:id:konekoltd:20171219211219p:plain

BorderPaneではただ子ノードを持つだけでなく、どこに配置するかを定義しなければならないのでsetTop, setBottom, setLeft…といったメソッドを使って配置を決めると同時に子ノードを渡します。

まとめ

今回は4つのPaneについて見てきました。本当はまだまだあるのですが、記事が長くなってきてしまったので次回紹介したいと思います。

ではでは。

リンク集: Java

Java関連の記事のリンク集

以前に書いたJava関連の記事のリンク集です。

WIP(Work in progress)の記事は後日執筆予定です。

Java

  • 関数型インターフェースについて考える WIP

JavaFX

Unreal Engine 4のPaper 2D 入門を踏破した (UE4.18)

結論:Paper 2Dすげえ

UE4 Paper 2D入門をUE4.18環境でやってみた

こんばんは。東京に行くと必ず帰り際に杏目当てにシウマイ弁当を買ってしまう人です。

ゲーム好きが高じて大学に入ってプログラミングに味を占めて以来時々ゲーム作っているのですが、 最近はUnreal Engine 4に興味が出てBP本を買ったりビデオチュートリアルをちまちま進めています。

ただ3D関係のチュートリアルは幾つかこなしたんですが、割と2Dに関してはまったく意識していなかったというか、 JavaFXでゲーム作れるし良くね?とか非人間的な思考をしていたので全く触れていませんでした。

結論から言って後悔しています。なんでこんないいものがあったのに使わなかったんだろう、と…

というわけでPaper 2D入門をやってみたのですが、基本的には問題ないものの幾つかバージョン違いで相違があったので、メモ書き程度に残しておきます。

日本語版ビデオチュートリアルを作って下さったロブ先生に、心からの感謝致します。ありがとうございます。

UE4 Paper 2D 入門 ビデオチュートリアル

Paper 2D 入門 01 (UE4日本語チュートリアル


Paper 2D 入門 01 (UE4日本語チュートリアル)

Paper 2D 入門 02 (UE4日本語チュートリアル


Paper 2D 入門 02 (UE4日本語チュートリアル)

Paper 2D 入門 03 (UE4日本語チュートリアル


Paper 2D 入門 03 (UE4日本語チュートリアル)

  • SpriteのPhysics (9:00~)

    動画の9:00以降でSpriteに対して物理挙動を設定する場面がありますが、現バージョンでは設定するパラメータが変わっているようです。

    動画中にあるLockedAxisの設定を、Constraints -> Mode -> XZPlaneに変更 に読みかえれば同じように動作すると思います。

    f:id:konekoltd:20171216213201p:plain

Paper 2D 入門 04 (UE4日本語チュートリアル


Paper 2D 入門 04 (UE4日本語チュートリアル)

  • Extract Sprites (0:50~)

    UE4が進化してました。Extract Spritesを実行すると一度確認画面が出現し、連番名の設定等ができます。 またアルゴリズムが改良されているようで、番号も上段右端までいくと次が下段左端から数えられています。

    f:id:konekoltd:20171216214751p:plain

    RunについてもGridに分けて256x256を指定すれば1発です。

    f:id:konekoltd:20171216221410p:plain

Paper 2D 入門 05 (UE4日本語チュートリアル


Paper 2D 入門 05 (UE4日本語チュートリアル)

  • Project Settings (7:40~)

    GameModeとDefault Mapの設定が少しレイアウトが変わっているようですが、 特に問題なくそのまま設定できると思います。

    Server~の設定は下三角▼矢印を押して詳細設定を開けば出てきます。

  • Play (8:30~)

    うっかり最後にプレイする時にSimulateを選択すると動画と同じような画面にならないので,Selected Viewportに変更するのをお忘れなく。

Paper 2D 入門 06 (UE4日本語チュートリアル


Paper 2D 入門 06 (UE4日本語チュートリアル)

  • Sprite (3:55~)

    Spriteについてはこちらを引っ張って来れば大丈夫です。

    f:id:konekoltd:20171217094937p:plain

Paper 2D 入門 07 (UE4日本語チュートリアル


Paper 2D 入門 07(UE4日本語チュートリアル)

Paper 2D 入門 08 (UE4日本語チュートリアル


Paper 2D 入門 08 (UE4日本語チュートリアル)

Paper 2D 入門 09 (UE4日本語チュートリアル


Paper 2D 入門 09 (UE4日本語チュートリアル)

まとめ

UE4の学習は、公式で多くのビデオチュートリアルが提供されているので、ハンズオン形式で学ぶことができとても勉強になります。 ショートカットキーなどもところどころ教えてくれるので、手を動かしながら覚えられるので非常に助かっています。

それにしてもPaper2D、便利ですね… 途中でうっかりy座標ずらして判定されてない?なんで?って何回かなりましたが、そこだけ注意していれば大丈夫そうです。

まだまだ勉強段階ですが、年末までに一つゲーム作れたらいいなあと思っています。

ではでは。

FXMLを使わない、最も簡単なJavaFX入門

こんにちは。特にやることもないのでひたすらブログの更新をしてます。

JavaFXがもっと浸透してほしい

Javaを使ったことをある人でもJavaFXを使ったことある方はまだあまり居ないのではないでしょうか。

JavaFXはAWT、Swingに続く第三のGUIライブラリです。Javaなので環境に依存せず、WindowsでもLinuxでも同じように動作してくれます。

JavaFXの一つの特徴としてはFXMLというXMLファイルを使って画面を定義することができるため、コード本体と画面のレイアウトを分離できるというメリットがあります。またFXMLに対してCSSを適応することできるため、Webデザインの経験がある人なら比較的簡単にデザインをいじることができます。

またメディア関係の操作も充実しています。MediaPlayerクラスを使うことによってmp3のような音声ファイルだけでなく、flvやmpeg-4といった動画も再生することができます。

Hello, JavaFX!

割と最近は日本語圏の情報が増えてきたのでやりやすくなりましたが、FXMLをいきなり触ったりするものも多いので、今回はそれらの機能は使用せずに最もシンプルな形でJavaFXで文字を表示するプログラムを作ってみます。

とりあえず書いてみて動かしてみます。

実行するとこんな感じでウィンドウが表示されるはずです。

f:id:konekoltd:20171216151210p:plain

JavaFXの基本的な動きを理解する

実際に動かしてみたら、少しずつ中身の方を見ていきます。

JavaFXの起動

public class Main extends Application {

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

JavaFXではプログラムの起点となるクラスでApplicationクラスを継承させます。mainメソッドではlaunchメソッドを呼び出すことで、以下のstartメソッドが呼び出されJavaFXが起動します。

画面の構成

public void start(Stage stage) {
        VBox layout = new VBox();
        Label label = new Label("Hello JavaFX!");
        layout.getChildren().addAll(label);

        Scene scene = new Scene(layout);
        stage.setScene(scene);
        stage.show();
    }

}

さてはて、StageやらSceneやら謎の概念が出てきてしまいました。 でも実はそんなに複雑ではないので、順番に理解していきましょう。

StageとScene

f:id:konekoltd:20171216153923p:plain

StageクラスJavaFXのアプリケーションのすべての大本になるクラスです。要はウィンドウそのものの定義です。ここに以下に説明するSceneクラス(場面)をセットすることでJavaFXで画面が表示できます。

Stageクラスの主なメソッドは以下のようなものがあります。

// ウィンドウのタイトルを設定する
stage.setTitle(String value);

// 最小・最大ウィンドウサイズを指定する
stage.setMinWidth(double value);
stage.setMaxWidth(double value);
stage.setMinHeight(double value);
stage.setMaxHeight(double value);

// 使用するSceneを設定する
stage.setScene(Scene scene);

// ウィンドウを表示する
stage.show();

SceneクラスはStageにセットする、いわば"場面"といったようなものです。アプリケーションを作るときに、「メインメニューのScene」「設定のScene」といったものをそれぞれ用意しておき付け替えることによって場面の変更をすることも可能です。

Sceneクラスはインスタンス化する際にParentクラスを引数に取ります。Parentクラスは「VBox(垂直に並べる)」「HBox(水平に並べる)」のようなレイアウトに関するクラス、「Text」「Button」のような実際に表示するものに関するクラスなど、すべての要素(Node)のベースとなるクラスです。

Node

それでは内部の要素を定義している部分を見てみましょう。

        VBox layout = new VBox();
        Label label = new Label("Hello JavaFX!");
        layout.getChildren().addAll(label);

JavaFXでSceneの中に表示する要素はNode(ノード)と呼ばれます。これらはレイアウト・表示物にかかわらず全て前述のParentクラスを継承しており、それぞれを親子関係とすることができます。Sceneクラスをインスタンス化した際に渡したNodeが最上位の親となり、そこから親子構造を成していく、といった形になります。

具体的にコードの中身を見ていきます。

VBoxクラスはレイアウトを定義するクラスです。子要素としてとったNodeを追加した順に垂直(縦方向)に上から下に並べていきます。

Labelクラスは文字を表示するクラスです。引数として渡した文字列を表示します。

getChildren().addやaddAllメソッドを使うことによって親子関係を定義することができます。

まとめ

JavaFXはStage・Sceneを基本として、その中に親子関係を定義したNodeを突っ込むといった形がJavaFXのスタイルです。最初にFXMLの話をしましたが、FXMLは実際のところNodeの親子関係をXMLファイルとしてわかりやすくしたものです。

JavaGUIをやってみたい!と興味がある方が友人にも何人かいるのですが、だいたいは最初のチュートリアルのFXMLでよーわからんと諦めてしまう方も見かけましたので、この記事が少しでもJavaFXの理解に役立つことを願ってやみません。

みなさんもよきJavaFXライフを!

Jetbrains Toolbox: Failed to prepare Directoryになるとき

普段からJetbrainsのIDEを愛用しているのですが、Adobeで言うところのCreative CloudアプリケーションのようにJetbrains製品のインストールやアップデートが管理できる"Jetbrains Toolbox"というアプリケーションがあります。

ただLinuxで使おうとした場合、Failed to prepare directoryというエラーが出てしまいインストールやアップデートができない場合があります。

Install locationのpermissionの問題なので、toolboxを開いてインストール先のフォルダの確認及び権限の変更をやってあげれば大丈夫です。

sudo chown -R <username>:<username> <Install location>

f:id:konekoltd:20171216132928p:plain

学生さんだったら学割でJetbrainsのIDEが使えるので、この機会に是非試してみてください。有料のプロダクトだけあってめっちゃ便利です。

「Jetbrains 学割」でggれば出てくると思うので一度ぜひ試してみてくださいな。

ではでは。

IntelliJ IDEAでWindows Subsystem for Linux(WSL)を使う

IntelliJ IDEAでWSLを使ってみる

おはようございます。寒い時期の寝起きの味噌汁は体に染みわたりますね。

ところで昨日WSLで色々ターミナルを試してみる話をしたのですが、Windows上での普段の開発にもWSLを利用できないかと少し思い立ちました。

私は普段プログラムを書くときはIntelliJ IDEAを使用しているのですが、Windows上で起動させると勿論言うまでもなくTerminalを開いてもcmdです。 これ、どうにかWSLの方に差し替えることはできないのか、と。

f:id:konekoltd:20171216081919p:plain

IntelliJ IDEAの設定

File -> Settings -> Tools -> TerminalにShell pathの設定があるので、C:\Windows\System32\bash.exeに変えてあげればそれだけで動きます。らくちん。

f:id:konekoltd:20171216083338p:plain

Terminalタブを開いた状態で左の方にある×を一度押して再起動してやれば無事開きます。

f:id:konekoltd:20171216083441p:plain

Store経由で落としてきたディストリは?

結論:ダメでした。

問題はこっちです。普通のWSLの環境はいいのですが、Store経由で落としてきたUbuntuOpenSUSEエクスプローラで開こうとするとC:\Program Files\WindowsApps以下に入っているものの、 Windowsアプリのセキュリティ上の問題なのか、権限関係ではじかれてしまってディレクトリがわかりません。というか、そもそも動くのかも怪しいです。

ちょっと調べてみます。Store経由で落としてきたのを起動して(今回はUbuntuを起動しました)、タスクマネージャを開いてみます。 そこから起動中のアプリからUbuntuを探して、ubuntu.exeのプロパティを開きます。

f:id:konekoltd:20171216084033p:plain

これでどこにあるかは分かったのでこっちのもんです。IntelliJにパスを通してみます。

f:id:konekoltd:20171216084408p:plain

まあ案の定動きませんでした。Store経由のアプリで落ちてきたUbuntuOpenSUSEはダメなんでしょうか。 こうなるとメインで使うのはもともとからあるBash on Windows on Ubuntuになりそうです。

もし動かす方法等あればコメントで頂けると幸いです。

ではでは。

Windows Subsystem for Linux(WSL)のターミナルを色々試す

12/16 am.2時追記

うっかりCreators Update(RS2)の自環境でテストしていました。Fall Creatorにしたのち再テスト後の情報に更新しました。 ご迷惑おかけして申し訳ありません。

Windows Subsystem for Linux(WSL)をいい感じにしたい

こんばんは。ネコアレルギーの人です。

Windows10 RS1以降、Windows Subsystem for Linux(WSL) (旧称Bash on Windows)が登場したことによっていちいちWindows上でVirtualboxとかで仮想環境を起動しなくても、Linuxコマンドラインが触れるので非常に便利になり、割とたのしく作業はできるようになりました。

が、しかし。標準のままではこんな感じです。

f:id:konekoltd:20171215222436p:plain

はっきりいってちょっと許し難い。ってかまんまcmdだし。

ただし、幸いにもWSL上でX Window Systemは動きますのでXmingとかVcXsrvとかを入れればWindows側で表示することは可能です。

ところがどっこい普段自分が使っていたTerminologyがどうにも動かなかったので、どのターミナルなら動くのだろうと気になり、色々入れて起動させてみました。

Bash on Windows自体がまだ発展途上ではあり、Linuxのsyscallすべてがサポートされているわけではないようですので、後々の更新で使えるようになるかもしれません。

いろんなターミナルを使ってみる

A. gnome-terminal

sudo apt install gnome-terminal

まずはgnome-terminalです。Ubuntuの標準端末でも見かけますし割とベーシックなターミナルといったところでしょうか。

動作については割と悪くはなさそうです。文字入力時の処理のもたつきなどは特に見受けられないため、普通に問題なく使えそうな感じです。

f:id:konekoltd:20171215232436p:plain

B. Konsole

sudo apt install konsole

KDE環境でよく使われているKonsoleです。

RS2ではこちらはウィンドウ自体は表示されるのですが、エラーを吐いてしまい入力不能のまま止まってしまいましたが、 RS3への更新で動作するようになりました。

f:id:konekoltd:20171216020910p:plain

C. Terminology

私が普段Linux環境で使ってるちょっとオシャレなターミナルです。

こちらはウィンドウ自体は出るのですがその後何の入力も受け付けてくれません。RS3への更新でも動きませんでした。 解決策が見つかったら再度ブログに載せたいと思います。

f:id:konekoltd:20171215233908p:plain

D. Xterm

Xtermくん。まあ動きます。多分使わないけど…

f:id:konekoltd:20171215235145p:plain

E. xfce4-terminal

こちらは意外と問題なく動きました。フォントのせいで文字の方が正常に表示されていませんが、たぶんそれを直せば大丈夫だと思います。

f:id:konekoltd:20171215235715p:plain

F. LXTerminal

これについてもxfce4-terminalと同じような感じです。

f:id:konekoltd:20171215235849p:plain

まとめ

実験したPCでは最新版のFall Creator Updateを済ませて最新版にした場合、大体のターミナルは動いてくれるようです。割と大きな収穫でした。

WSLの今後の成長に期待といった感じでしょうか。初心者向けのプログラミング学習本でWSL使うのが標準になる未来もそう遠くないかもしれませんね。

それではでは。