FXGL JAVA游戏引擎 教程 .04 动画 （可爱乌贼娘）

最新推荐文章于 2024-08-10 07:00:35 发布
最新推荐文章于 2024-08-10 07:00:35 发布
阅读量1.9k 收藏 8
点赞数 3
分类专栏： FXGL JAVA游戏引擎攻略 文章标签： 游戏 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cytern/article/details/119633569
版权
本文档介绍如何在FXGL游戏中创建一个动态的乌贼娘动画实体。通过修改实体的view方法，添加动画组件，并从素材网站下载图片资源。在MoveComponent组件中，利用AnimationChannel和AnimatedTexture实现行走动画，同时处理速度为零时的静止状态。此外，还探讨了使用animationBuilder方法创建更多自定义动画的可能性。
摘要由CSDN通过智能技术生成

FXGL 04.动画 （可爱的乌贼娘）

我们在之前的文章中简单创建了一个png格式的图片展示的实体，这里我们要更换换这个实体的展示模式，让一个活灵活现的乌贼娘出现在我们的游戏世界中！

1.实体的展示过程

这样的一个实体创建过程我们并不陌生，如果需要将某个素材作为展示内容，我们只需要在创建中的view方法中加入其中。

   Entity entity = FXGL.entityBuilder().with(new MoveComponent()).build();

那我们来探究下view方法的本质。（我并不太懂Kotlin）
但是还是找到了以下源码

 fun view(node: Node) = this.also {
        entity.viewComponent.addChild(node)
    }

    fun view(textureName: String) = this.also {
        view(FXGL.texture(textureName))
    }

Node 类是大多数javafx的形状图形的顶级抽象类，我们熟悉的shape，box等类都继承自该类。明显可以理解viewcomponent是实体的实际展示控制类。
那如果想要在程序运行时修改实体的动画内容，很容易就能想到需要做就是修改entity中的viewcomponent

2.从素材网站中下载素材

这里我推荐使用爱给网，免费且资源众多。
在这里插入图片描述 在其中可以下载需要的各种素材。

3.修改之前的实体展示

我这里下载了一张乌贼娘的行走图
在这里插入图片描述
首先对于实体静态工厂，我将其中的view部分移除

    public static Entity createEntity(EntityType type){
        switch (type) {
            case PLANE -> {
               Entity entity = FXGL.entityBuilder().with(new MoveComponent()).build();
               entity.setType(EntityType.PLANE);
               return entity;
            }
            default -> {
                return null;
            }

    }
}

然后修改移动组件，为其增加动画内容

package com.dam.wonder.component;

import com.almasb.fxgl.core.math.Vec2;
import com.almasb.fxgl.entity.component.Component;
import com.almasb.fxgl.texture.AnimatedTexture;
import com.almasb.fxgl.texture.AnimationChannel;
import javafx.scene.image.Image;
import javafx.util.Duration;
import lombok.extern.slf4j.Slf4j;

@Slf4j
public class MoveComponent extends Component {
    private double speedX = 0d;
    private double speedY = 0d;

    /**
     * Called after the component is added to entity.
     */
    @Override
    public void onAdded() {
        entity.getViewComponent().addChild(texture);
    }

    private double maxSpeed = 4d;
    private double aTime = 1d;
    private boolean speedXAdd;
    private boolean speedYAdd;
    //这里增加一个面向属性，用来判断实体在各种速度下的面向问题
    private int face = 1;
    //动画频道 对应四个方向的动画
    private final AnimationChannel up;
    private final AnimationChannel down;
    private final AnimationChannel right;
    private final AnimationChannel left;
   //动画素材
    private final AnimatedTexture texture;
    @Override
    public void onUpdate(double tpf) {
//        log.info("当前状态下  x速度为=[{}]， Y速度为=[{}]  x加速状态为=[{}] Y加速状态为 =[{}]",speedX,speedY,speedXAdd,speedYAdd);
           int tempFace = face;
            if (speedX != 0d) {
                    Vec2 dir = Vec2.fromAngle(entity.getRotation() - 360)
                            .mulLocal(speedX);
                    entity.translate(dir);
                    if (speedX>0) {
                        tempFace = 1;
                    }else {
                        tempFace = 2;
                    }
            }
            if (speedY != 0d) {
                    Vec2 dir = Vec2.fromAngle(entity.getRotation() - 90)
                            .mulLocal(speedY);
                    entity.translate(dir);
                    if (speedY > 0) {
                        tempFace = 3;
                    }else {
                        tempFace = 4;
                    }
            }
            if (!speedXAdd) {
                slowDownSpeed(true);
            }
            if (!speedYAdd) {
                slowDownSpeed(false);
            }
           if (tempFace != face) {
               if (tempFace == 1) {
                   this.texture.loopAnimationChannel(left);
               }else if (tempFace == 2){
                   this.texture.loopAnimationChannel(right);
               }else if (tempFace == 3) {
                   this.texture.loopAnimationChannel(up);
               }else {
                   this.texture.loopAnimationChannel(down);
               }
               face = tempFace;
           }
    }

    public MoveComponent () {
    //在构造方法中增加加载动画的方法
        Image image = new Image("assets/textures/player.png");
        //这里通过对图片的规划，每一行的动画个数，每个帧的宽度高度，整个动画的跨度时间，跨度几个动画
        down = new AnimationChannel(image, 4, 32, 38, Duration.seconds(1), 0, 3);
        right = new AnimationChannel(image, 4, 32, 38, Duration.seconds(1), 4, 7);
        left = new AnimationChannel(image, 4, 32, 38, Duration.seconds(1), 8, 11);
        up = new AnimationChannel(image, 4, 32, 38, Duration.seconds(1), 12, 15);
        texture = new AnimatedTexture(up);
        //播放动画
        texture.loop();
    }
    public void up() {
        changeSpeed(true,false);
    }
    public void left() {
        changeSpeed(false,true);
    }
    public void right() {
       changeSpeed(true,true);
    }
    public void down(){
       changeSpeed(false,false);
    }
    public void stop() {
        speedX = 0d;
        speedY = 0d;
    }
    public void stopX() {
       speedXAdd = false;
    }
    public void stopY() {
       speedYAdd = false;
    }

    /**
     * 改变移动速度 主动改变
     * @param upOrDown
     * @param xOrY
     */
    private  void changeSpeed(boolean upOrDown,boolean xOrY) {
        if (xOrY) {
            speedXAdd = true;
            if (upOrDown) {
                if (speedX < maxSpeed) {
                    speedX = speedX + (float)maxSpeed/(10*aTime) + 0.01;
                }
            }else {
                if (speedX > -maxSpeed) {
                    speedX = speedX - (float)maxSpeed/(10f*aTime) - 0.01;
                }
            }
        }else {
            speedYAdd = true;
            if (upOrDown) {
                if (speedY < maxSpeed) {
                    speedY = speedY + (float)maxSpeed/(10f*aTime) + 0.01;
                }
            }else {
                if (speedY > -maxSpeed) {
                    speedY = speedY - (float)maxSpeed/(10f*aTime) - 0.01;
                }
            }
        }
//        log.info("实体当前状态为 位置=[{}],速度Y=[{}],速度X =[{}]",entity.getPosition(),this.speedY,this.speedX);
    }

    /**
     * 速度减少 被动减速
     * @param xOrY
     */
    private void slowDownSpeed(boolean xOrY) {
        if (xOrY) {
            if (speedX > 0.5) {
                speedX = speedX - (float)speedX/10 -0.01;}
            else if (speedX< -0.5){
                speedX = speedX - (float)speedX/10 +0.01;
            }else {
                speedX = 0d;
            }
        }else {
            if (speedY > 0.5) {
                speedY = speedY - (float)speedY/10 -0.01;}
            else if (speedY< -0.5){
                speedY = speedY - (float)speedY/10 +0.01;
            }else {
                speedY = 0d;
            }
        }
    }



    public double getSpeedX() {
        return speedX;
    }

    public void setSpeedX(double speedX) {
        this.speedX = speedX;
    }

    public double getSpeedY() {
        return speedY;
    }

    public void setSpeedY(double speedY) {
        this.speedY = speedY;
    }

    public double getMaxSpeed() {
        return maxSpeed;
    }

    public void setMaxSpeed(double maxSpeed) {
        this.maxSpeed = maxSpeed;
    }

    public double getaTime() {
        return aTime;
    }

    public void setaTime(double aTime) {
        this.aTime = aTime;
    }
}

简简单单的启动项目，一个乌贼娘跃然纸上啦！

在这里插入图片描述

当然，只到这一步我是不满足的，因为这个乌贼娘在速度为零的时候依然保持着移动动画。进行一点点小小的修改。
很容易想到，简单的添加四个全新的信道。

    private final AnimationChannel up;
    private final AnimationChannel upHold;
    private final AnimationChannel down;
    private final AnimationChannel downHold;
    private final AnimationChannel right;
    private final AnimationChannel rightHold;
    private final AnimationChannel left;
    private final AnimationChannel leftHold;
    private final AnimatedTexture texture;

简单的初始化他们

        down = new AnimationChannel(image, 4, 32, 38, Duration.seconds(1), 0, 3);
        downHold = new AnimationChannel(image, 4, 32, 38, Duration.seconds(1), 1, 1);
        right = new AnimationChannel(image, 4, 32, 38, Duration.seconds(1), 4, 7);
        rightHold = new AnimationChannel(image, 4, 32, 38, Duration.seconds(1), 5, 5);
        leftHold = new AnimationChannel(image, 4, 32, 38, Duration.seconds(1), 9, 9);
        left = new AnimationChannel(image, 4, 32, 38, Duration.seconds(1), 8, 11);
        up = new AnimationChannel(image, 4, 32, 38, Duration.seconds(1), 12, 15);
        upHold = new AnimationChannel(image, 4, 32, 38, Duration.seconds(1), 13, 13);

再简单的判断速度为零时修改为静止信道

 @Override
    public void onUpdate(double tpf) {
//        log.info("当前状态下  x速度为=[{}]， Y速度为=[{}]  x加速状态为=[{}] Y加速状态为 =[{}]",speedX,speedY,speedXAdd,speedYAdd);
           int tempFace = face;
            if (speedX != 0d) {
                    Vec2 dir = Vec2.fromAngle(entity.getRotation() - 360)
                            .mulLocal(speedX);
                    entity.translate(dir);
                    if (speedX>0) {
                        tempFace = 1;
                    }else if (speedX<0){
                        tempFace = 2;
                    }
            }else {
                //转变面向
                if (tempFace == 1) {
                    tempFace = 5;
                }else if (tempFace == 2) {
                    tempFace = 6;
                }
            }
            if (speedY != 0d) {
                    Vec2 dir = Vec2.fromAngle(entity.getRotation() - 90)
                            .mulLocal(speedY);
                    entity.translate(dir);
                    if (speedY > 0) {
                        tempFace = 3;
                    }else {
                        tempFace = 4;
                    }
            }else {
                if (tempFace == 3) {
                    tempFace = 7;
                }else if (tempFace == 4) {
                    tempFace = 8;
                }
            }
            if (!speedXAdd) {
                slowDownSpeed(true);
            }
            if (!speedYAdd) {
                slowDownSpeed(false);
            }
           if (tempFace != face) {
               if (tempFace == 1) {
                   this.texture.loopAnimationChannel(left);
               }else if (tempFace == 2){
                   this.texture.loopAnimationChannel(right);
               }else if (tempFace == 3) {
                   this.texture.loopAnimationChannel(up);
               }else if (tempFace == 4){
                   this.texture.loopAnimationChannel(down);
               }else if (tempFace == 5) {
                   this.texture.loopAnimationChannel(leftHold);
               }else if (tempFace == 6) {
                   this.texture.loopAnimationChannel(rightHold);
               }else if (tempFace == 7){
                   this.texture.loopAnimationChannel(upHold);
               }else if (tempFace == 8) {
                   this.texture.loopAnimationChannel(downHold);
               }
               face = tempFace;
           }
    }

非常容易啊，啪的一下，这个完整的动画过程就做完了。

当然除了动态素材动画信道的方法，还有一个使用的更多的动画建造器方式
(animationBuilder)
这个方法能自定义很多动画，例如各种变形动画，粒子特效等，也能设置回调用于控制动画。在官方wiki中有详细介绍，这里就不多赘述了。

cytern
关注
专栏目录
Java动画 重力弹球 如鹏游戏引擎 精灵 设计一个小球加速落地又减速弹起并反复直到停止的Java程序
Advancing Swift 的博客
01-01 887
package com.swift; import com.rupeng.game.GameCore; public class BouncingBall implements Runnable { public static void main(String[] args) { GameCore.start(new BouncingBall()); }
java-universal-tween-engine，一个动画系统库
gundumw100的专栏
04-10 764
http://code.google.com/p/java-universal-tween-engine/ 可以用来创建平滑的移动系统，比如循环，移动，旋转等。由于项目使用纯java写成，所以支持swt,swing,android,opengles等。Tween缓冲大家应该都不陌生，说白了就是从一起始位置逐渐移动到目标位置的过程，这个过程可以是加速移动，也可以是减速移动，这些不同的缓动方式就是T
javafx+fxgl引擎做的一款飞机大战
weixin_30394251的博客
11-21 689
先放效果图： 1，javafx和fxgl介绍 javafx类似awt,swing，是一个图形化界面的库。 （似乎都喜欢采用mvc模式，把界面和其它东西分开来写） fxgl：https://almasb.github.io/FXGL/ 外国人写的一个游戏引擎，其实就是把javafx的一些东西整理封装了起来，但封装也有坏处，，用起来不怎么灵活，网上也搜不到用法（。。...
FXGL 开源游戏开发框架教程
gitblog_00026的博客
08-10 395
FXGL 开源游戏开发框架教程 FXGLAlmasB/FXGL: 是一个用于开发 2D，3D 和虚拟现实的 Java 游戏和应用程序的库，具有简单易用的 API 和多种游戏引擎集成，可以用于开发高性能和跨平台的游戏和应用程序。项目地址:https://gitcode.com/gh_mirrors/fx/FXGL 项目介绍 FXGL（FX Game Library）是一个基于Java、JavaFX...
FXGL 开源项目教程
gitblog_00048的博客
08-10 305
FXGL 开源项目教程 FXGLAlmasB/FXGL: 是一个用于开发 2D，3D 和虚拟现实的 Java 游戏和应用程序的库，具有简单易用的 API 和多种游戏引擎集成，可以用于开发高性能和跨平台的游戏和应用程序。项目地址:https://gitcode.com/gh_mirrors/fx/FXGL 1. 项目的目录结构及介绍 FXGL 的目录结构主要分为以下几个部分： src/main...
JavaFXGL框架笔记
qq_46147843的博客
03-26 6558
实体类型 大多数游戏都有不同类型的实体，例如玩家、子弹、敌人等。 该类型可能是一个枚举，例如可能如下所示: public enum EntityType { PLAYER, BULLET, ENEMY } 枚举类的名称可以取成你想要的，但应该遵守规范。 你可以用MyGameNameType代替EntityTyp，这取决于什么更适合你。例如，一个太空入侵者的克隆体SpaceInvadersType枚举的名称。 实体工厂 在你的游戏中为不同集合类型创建实体时，建议分别使...
java动画api_使用Java 2D API制作艺术动画
weixin_27889245的博客
03-08 172
审美注意事项一些人可能会认为在 “A Sunday Afternoon on the Island of La Grand Jatte” 之类的伟大作品上运行图像过滤器应用程序是一种亵渎。我当然很赞同此观点。但我只是以这幅画为例子。我的主要目标是展示如何使用一种简单的细胞自动机器，以有趣而复杂的方式来制作图像动画，以一副熟悉的名画作为例子会比较好。我曾在许多类型的画上运行过 Seurat，在抽象艺...
JAVA FXGL 游戏示范 圈圈叉叉
11-28
Java FXGL 是一个强大的Java游戏开发库，专为构建2D和3D游戏而设计。FXGL 提供了一个全面的框架，集成了图形渲染、物理引擎、音频处理、输入管理和网络通信等功能，使得开发者可以专注于游戏逻辑，而不是底层实现...
FXGL：Java JavaFX Kotlin游戏库（引擎）
01-28
为什么选择FXGL？ 无需安装或设置 “开箱即用”：Java 8-15，Win / Mac / Linux / Android 8 + / iOS 11.0 + / Web 简单干净的API，比其他引擎更高级别 JavaFX的超集：无需学习新的UI API 现实世界中的游戏开发...
zombie-fxgl:基于Java FXGL引擎的生存游戏
04-09
《基于Java FXGL引擎的生存游戏开发详解》 在当今的游戏开发领域，Java以其跨平台性和强大的库支持，成为制作2D和3D游戏的重要语言之一。本篇文章将深入探讨如何利用Java FXGL引擎构建一个引人入胜的生存游戏——...
Iccarus and Dadelus School Animation:学校的Java动画-开源
05-13
将来使用LWJGL，并且（可能）使用JBullet物理引擎。 在3D模式下。
Java 2D游戏引擎 EagleEngine-3.x
10-24
该工程是基于Java平台开发的一款2D游戏引擎(升级款)，其内包含了 内核、渲染、动画、音效、UI、交互、物理、寻路等模块。引擎将碰撞检测等算法集成，开发者只需调用接口即可。作者的资源中亦有基于引擎的实例，欢迎相互探讨。
FXGLGames：此回购包含使用FXGL构建的示例游戏
02-04
此包含使用游戏库构建的示例游戏。 每个游戏都专注于FXGL的一两个方面，例如Drop专注于最低限度，吃豆人专注于AI等。 检出所有项目的Java 8代码（FXGL 0.5.4）。 所有项目最终都将升级为Java 11代码（FXGL 11.0+）。 建立 cd PROJECT_NAME mvn package 这将在target/生成一个带有该项目的独立可执行文件。 大多数游戏都是预先构建的，可以从下载。 跑 cd target/ java -jar PROJECT_NAME-VERSION.jar 或者，如果在计算机上正确设置了扩展名，则只需双击jar文件。 移动版 请遵循最新指示。 相
FXGL-MobileApp:使用FXGL并在移动设备上运行的示例游戏
05-18
FXGL-MobileApp 一个使用FXGL并在移动设备上运行的示例游戏。 构建（Android） 注意：您需要拥有真正的Android 5.0+设备。 如果您安装了android工具，请转到步骤3。 下载。 一直向下滚动，然后在底部单击您的平台SDK工具。 解压缩所有内容并安装工具： ANDROID_SDK/tools/bin/sdkmanager "platform-tools" "build-tools;27.0.3" "platforms;android-25" "extras;android;m2repository" "extras;google;m2repository" 打开build.gradle并编辑以下行，使其具有提取android-sdk的路径： androidSdk = 'PATH_TO_ANDROID_SDK' 或者 在~/.gradle/gr
testFXGL java 游戏框架测试.zip
12-17
FXGL 还提供了动画和时间管理功能，帮助开发者创建流畅的游戏体验。 在【描述】中提到的源码，"testFXGL-master"很可能是项目的主分支，包含所有必要的源代码文件和资源。开发者可以通过克隆或下载这个仓库来开始...
基于Java和FXGL框架的贪吃蛇游戏设计源码
最新发布
10-04
该项目是一款基于Java和FXGL框架开发的贪吃蛇游戏源码，总计包含44个文件，包括16个Java源文件、6个XML配置文件、5个MP3和WAV音频文件、4个PNG图片文件，以及少量其他类型的文件，如Git忽略文件、Markdown文件等。
使用Java FXGL构建太空游侠游戏
从零开始的教程世界
07-21 1755
In this simple FXGL tutorial, we will develop a game called “Space Ranger”. 在这个简单的FXGL教程中，我们将开发一个名为“ Space Ranger”的游戏。 什么是FXGL？ (What is FXGL?) FXGL is a game engine built on top JavaFX, which is a ...
java FXGL 是什么
05-14
Java FXGL是一个基于JavaFX的游戏引擎，它提供了一系列的工具和框架来帮助你快速地开发2D游戏。Java FXGL支持多种平台，包括Windows、Linux和MacOS。它提供了丰富的游戏开发工具，如物理引擎、碰撞检测、动画系统、输入管理等，使得开发者能够更加专注于游戏的逻辑和玩法设计，而不必花费大量的时间和精力来处理底层的技术细节。同时，Java FXGL还提供了一些演示游戏和教程，帮助开发者更快地上手并了解游戏开发的基本知识。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值