HatenaPocket本稿はJavaFXで複数画像を利用したドットアニメーションを実装してみたいと思います。画像の差し替えアニメーションはgifファイルを用意しても処理できるのでそれを利用してもいいのですが、私はpngファイルをメインに使用していきたいので、複数の画像を同じサイズで結合したpngファイルを使用してアニメーションする方法を考えていきたいと思います。目次1.画像の切り出し2.表示範囲を順番に変更し、アニメーションさせる1.画像の切り出し結合画像をアニメーションさせるには、個々の画像を切り出して表示する必要があります。結合した画像を切り出す方法を考えたのですが、真っ先に浮かんだのが、WritableImageクラスを利用して切り出した画像を個々のオブジェクトとして生成する方法とsetViewportによる指定です。今回はImageViewのsetViewportの設定で実装する方法をメインにやってみようと思います。画像サンプルはこちらのドット絵を用意しました。nono.png一つの絵を30×58とし、5枚を結合しています。setViewportメソッドはRectangle2Dオブジェクトを引数にとり、ここには画像のどこの座標を表示するのかを指定します。今回の画像で3枚目の絵を表示したい場合はx=60,y=0,横幅=30,縦幅=58と指定することで表示可能となります。プログラムだとこんな感じ。Rectangle2D(60,0,30,58);それでは、実際にウィンドウに表示して確認するサンプルを見ておきましょう。2);p.getChildren().add(img);}}実行結果これで3枚目が表示されました。2.表示範囲を順番に変更し、アニメーションさせるさて、切り出し処理がわかれば後は簡単です。表示範囲を数フレームごとに切り替えるだけです。この切り替えをどのように実装するかですが、複数のviewportを事前に定義しておき、配列番号を指定するだけで表示できるようにすることにします。画像番号の変更はtimelineで実装してみます。Timelineの使用方法は下記の記事で紹介しています。【JavaFX】アニメーション処理の適用JavaFXには既にアニメーションが実装できる機能が用意されています。...https://nompor.com/2018/01/08/post-2385/#timeline今回はInterpolatableは使用せず、もう少しシンプルで荒削り感の少ない実装にしたので、前の記事のTimeline紹介サンプルよりは簡単だと思います。これらの画像表示位置の作成処理とTimelineを利用した画像番号変更処理を実装したオリジナルのImageViewクラスを定義して使いまわせるようにしてみます。指定した画像を横幅、縦幅で分割し、指定期間で1アニメーションを実行するImageAnimationViewオブジェクトを構築します。{//画像が横に何枚あるか、縦に何枚あるかを算出します。指定したファイルが表す画像を横幅、縦幅で分割し、指定期間で1アニメーションを実行するImageAnimationViewオブジェクトを構築します。画像番号の範囲をアニメーションするように設定します。全ての画像をアニメーションの対象とします。アニメーションを開始します。アニメーションのループ回数を指定します。画像番号の最大値を取得します。index;setViewport(viewports[index]);}}}コンストラクタの引数はImageAnimationView(アニメーション時間,結合画像,表示サイズの横幅,表示サイズの縦幅)と指定するようにしています。setAnimationRange(開始番号,終了番号)メソッドでアニメーションする画像番号の範囲を指定できます。それでは実際にこのクラスを利用してキャラクターがちゃんと歩いているか見てみましょう。2);p.getChildren().add(img);}}実行結果いいかんじに歩くのが確認できました。・・・いや画像枚数が少ない分カクカクしてて、いい感じではないかも。2018/06/15・・・ImageAnimationViewの無駄な処理とバグを一部修正。線形補完で実装したい場合は補正処理も自作したほうがいいかもしません。※最新のライブラリ版ImageAnimationViewは線形補完で実装しています。【JavaFX】オブジェクトに色、透明度を適用する本稿ではオブジェクトに対して色や透明度を適用させてみたいと思います。本稿はJavaFXで当たり判定に使えそうなメソッドを紹介します。コメントをキャンセルメールアドレスが公開されることはありません。当サイトのプライバシーポリシーについてはこちらからご参照いただけます。