15、物理与粒子效果及小丑大炮游戏开发

皮肤PHP

于 2025-11-16 12:50:38 发布

阅读量13

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaFX特效实战精粹文章标签：物理效果粒子效果小丑大炮游戏

本文链接：https://blog.youkuaiyun.com/k5l6m/article/details/154930152

JavaFX特效实战精粹专栏收录该内容

16 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

物理与粒子效果及小丑大炮游戏开发

物理与粒子效果

在物理与粒子效果的应用中，我们有一些经典的实现案例。

首先是 PhysicsParticle 类，它继承自 Group 、 WorldNode 和 Particle 。以下是其核心代码逻辑：

body.adjustVelocity(new Vector2f(Math.cos(theta)*startingSpeed, 
Math.sin(theta)*startingSpeed));

insert body into bodies;
}

public override function update():Void{
    stepsLeft--;
    if (stepsLeft <= 0){
       Main.removeWorldNode(this)
    }

    var ratio = stepsLeft/totalSteps;
    if (ratio < 0){
        ratio = 0;
    }

    opacity = fadeInterpolator.interpolate(0.0, 1.0, ratio) as Number;

    translateX = bodies[0].getPosition().getX();
    translateY = bodies[0].getPosition().getY();
    rotate = Math.toDegrees(bodies[0].getRotation());
}

初始化 ：在 init 函数里，会添加一个 ImageView 到内容中，同时创建一个与 PhysicsParticle 位置和旋转相同的 Body ，并依据起始方向和起始速度赋予其速度。
更新操作 ：每次世界对象更新步骤之后，会调用 update 函数。此函数会调整 PhysicsParticle 的位置和旋转以匹配 Body ，还会处理其生命周期。当 stepsLeft 减为 0 时，该实体就会从场景和世界中移除。若设置了 fadeInterpolator ，还会调整 PhysicsParticle 的不透明度，具体是通过计算已过期步骤的比例，再将该比例传入 fadeInterpolator 得到最终结果。

接着是将发射器作为物体的例子，这里仅使用少量物体，每个物体指定一个传统粒子发射器的位置。当发射器在屏幕上移动时，它们创建的粒子基本保持原位，这样能大幅减少模拟中的物体数量，提升性能。比如有多个火球在一排钉子场中弹跳，火球移动时会创建一个略微向上漂移的粒子，形成火球的拖尾效果。以下是相关代码：

function fireballs():Void{
    clear();
    for (y in [1..4],i in [1..2],x in [1..24]){
        addWorldNode(Peg{
            radius: 4
            translateX: x*24+i*12
            translateY: 100+y*48+i*24
        });
    }

    addEmitter(FireballEmitter{});
}

上述代码中的 fireballs 函数会创建一系列按弹珠机模式排列的钉子，并添加一个 FireballEmitter 。 FireballEmitter 类会创建多个火球粒子，代码如下：

public class FireballEmitter extends Emitter{
    var emitTimeline = Timeline{
        repeatCount: Timeline.INDEFINITE;
        keyFrames: KeyFrame{
            time: 2s
            action: emit;
        }
    }
    function emit():Void{
        var fireball = Fireball{
                translateX: 100 + Main.random.nextInt(440)
                translateY: -30
                effect: ColorAdjust{
                    hue: Main.randomFromNegToPos(1.0);
                }
            }
        Main.addWorldNode(fireball);
        Main.addEmitter(fireball);
    }
    public override function play():Void{
        emitTimeline.play();
    }
    public override function stop():Void{
        emitTimeline.stop();
    }
}

Fireball 类继承自 Group 、 WorldNode 、 Particle 和 Emitter ，它能包含自身产生的 FireParticles ，并在屏幕上弹跳。其 update 方法除了同步自身位置和物理模型位置外，还具备一些额外特性，例如当火球超出屏幕左侧时会移到右侧，超出右侧则移到左侧，若低于一定高度就会自我移除。同时，该方法还会调整发射器创建的 FireParticles 的位置，以保证粒子位置稳定。 FireParticle 类继承自 ImageView 和 Particle ，其代码如下：

public class FireParticle extends ImageView, Particle{

    public-init var initialSteps:Integer;//number of steps until removed
    public-init var startingOpacity = 1.0;
    public-init var speed:Number;//pixels per step
    public-init var fadeout = true;
    public-init var direction = -90.0;
    public-init var directionVariation = 10.0;  

    var deltaX;//change in x location per step
    var deltaY;//change in y location per step
    var stepsRemaining = initialSteps;

    init{

        smooth = true;
        translateX -= image.width/2.0;
        translateY -= image.height/2.0;

        rotate = Math.toDegrees(Main.random.nextFloat()*2.0*Math.PI);

        opacity = startingOpacity;
        //random direction in radians
        var startingDirection = direction + Main.randomFromNegToPos(directionVariation);

        var theta = Math.toRadians(startingDirection);
        deltaX = Math.cos(theta)*speed;
        deltaY = Math.sin(theta)*speed;
    }

    package function doStep(){
        //remove particle if particle has expired
        if (--stepsRemaining == 0){
            delete this from (parent as Group).content;
        }
        //advance particle's location
        translateX += deltaX;
        translateY += deltaY;  

        if (fadeout){
            opacity = startingOpacity*(stepsRemaining as Number)/(initialSteps as Number);
        }
        rotate += 4;
    }
}

FireParticle 的 initialSteps 变量决定了每个粒子在场景中的存在时长， direction 预设为 -90 使粒子像火焰一样向上移动。在 init 函数中， startingDirection 设为 direction 加上一个随机值，让每个粒子的运动有细微变化。 doStep 方法会在 stepsRemaining 为 0 时移除粒子，更新粒子位置，若开启淡出效果还会调整不透明度。

小丑大炮游戏开发

游戏设计

游戏名为小丑大炮，目标是将小丑从大炮发射到水桶中。其初始设计包含一个简单的开始屏幕，有主题背景、标题和两个按钮，使用过渡效果在不同屏幕间切换。游戏屏幕中，用户可瞄准大炮发射小丑到右侧水桶，左上角的功率计决定小丑离开大炮的速度，功率计会循环升降，用户需把握点击时机以达到期望功率，其动画采用动画渐变效果。游戏中还有一些随机放置的钉子阻挡小丑路径，小丑的飞行和弹跳运用物理概念实现逼真运动。若小丑穿过气球，该次射击得分翻倍，气球的运动由插值器驱动。小丑落入水桶会有烟花展示，运用了粒子效果。

图形设计

由于初始设计在 Adobe Illustrator 中完成，所以继续用该工具创建游戏图形，然后将内容导出为 JavaFX 友好格式。使用一个 Illustrator 文件存储所有游戏资源，每个组件导出后会成为 JavaFX 节点，运行时更新的组件命名前缀为 jfx: ，借助导出工具和 NetBeans 可创建代表这些内容的 JavaFX 类 GameAssetsUI 。游戏由开始屏幕、欢迎屏幕和游戏屏幕组成，每个屏幕是 GameAssetsUI 的实例，因每个屏幕不需要 GameAssetsUI 中的所有内容，所以游戏代码要修剪节点以创建合适内容。例如，开始屏幕和游戏屏幕不需要关于面板，欢迎屏幕和关于屏幕不需要“游戏结束”文本。此外，部分设计需用 JavaFX 代码实现，如背景添加来回移动的探照灯，营造在马戏团帐篷中的感觉。

以下是游戏生命周期的 mermaid 流程图：

graph LR
    A[游戏启动] --> B[显示开始屏幕]
    B --> C{选择操作}
    C -->|查看关于屏幕| D[显示关于屏幕]
    D --> E[返回开始屏幕]
    C -->|开始游戏| F[显示游戏屏幕]
    F -->|再次游戏| F
    F -->|返回开始屏幕| B

游戏实现

游戏的实现核心在于处理游戏的生命周期和整合各种效果。以下是 Main.fx 中的部分代码：

public def random = new Random();

public var startScreen = GameAssetsUI{}
var aboutScreen = GameAssetsUI{}
var gameModel:GameModel;

var rootGroup = Group{
    content: startScreen
    onKeyReleased: keyReleased;
}

var scene = Scene {
        width: 640
        height: 480
        content: [rootGroup]
        fill: Color.BLACK
    }

public var blockInput = false;
public var lightAnim:Timeline;

function run():Void{
    initStartScreen();
    initAboutScreen();
    Stage {
        title: "Clown Cannon"
        resizable: false;
        scene: scene
    }
    rootGroup.requestFocus();
    lightAnim.play();
}

function keyReleased(event:KeyEvent){
    gameModel.keyReleased(event);
}

public function addLights(gameAsset:GameAssetsUI):Timeline{

    var yCenter = gameAsset.backPanelGroup2.boundsInParent.height/2.0;
    var spotLight = SpotLight{
            x: 320
            y: yCenter
            z: 50;
            pointsAtZ: 0
            pointsAtX: 320
            pointsAtY: yCenter
            color: Color.WHITE;
            specularExponent: 2
        }

    gameAsset.backPanelGroup1.effect = Lighting{
        light: spotLight
        diffuseConstant: 2
    }

    var anim = Timeline{
        repeatCount: Timeline.INDEFINITE;
        keyFrames: [
 KeyFrame{
                    time: 0s
                    values: [spotLight.pointsAtX => 320 tween Interpolator.EASEBOTH,
                             spotLight.pointsAtY => yCenter tween Interpolator.EASEBOTH]
                },
                KeyFrame{
                    time: 1s
                    values: spotLight.pointsAtY => yCenter+100 tween Interpolator.EASEBOTH
                },
                KeyFrame{
                    time: 2s
                    values: spotLight.pointsAtX => 30 tween Interpolator.EASEBOTH
                },
                KeyFrame{
                    time: 3s
                    values: spotLight.pointsAtY => yCenter-100 tween Interpolator.EASEBOTH
                },
                KeyFrame{
                    time: 4s
                    values: spotLight.pointsAtX => 320 tween Interpolator.EASEBOTH
                },
                KeyFrame{
                    time: 5s
                    values: spotLight.pointsAtY => yCenter+100 tween Interpolator.EASEBOTH
                },
                KeyFrame{
                    time: 6s
                    values: spotLight.pointsAtX => 610 tween Interpolator.EASEBOTH
                },
                KeyFrame{
                    time: 7s
                    values: spotLight.pointsAtY => yCenter-100 tween Interpolator.EASEBOTH
                },
                KeyFrame{
                    time: 8s
                    values: [spotLight.pointsAtX => 320 tween Interpolator.EASEBOTH,
                             spotLight.pointsAtY => yCenter tween Interpolator.EASEBOTH]
                }
                ]
    }
    return anim;
}

function initStartScreen():Void{
    simplifyGradients(startScreen);
    lightAnim = addLights(startScreen);
    removeFromParent(startScreen.aboutPanel);
    removeFromParent(startScreen.waitingClownGroup);
    removeFromParent(startScreen.startGameInstructions);
    removeFromParent(startScreen.endButtons);
    removeFromParent(startScreen.gameOverText);
    makeButton(startScreen.startButton, startGame);
    makeButton(startScreen.aboutButton, showAbout);
}

function initAboutScreen():Void{
    simplifyGradients(aboutScreen);
    removeFromParent(aboutScreen.startButton);
    removeFromParent(aboutScreen.aboutButton);
    removeFromParent(aboutScreen.startGameInstructions);
    removeFromParent(aboutScreen.waitingClownGroup);
    removeFromParent(aboutScreen.endButtons);
    removeFromParent(aboutScreen.gameOverText);
    makeButton(aboutScreen.backButton, backToStart);
    aboutScreen.effect = ColorAdjust{
        hue: .2
    }
}

public function removeFromParent(node:Node):Void{
    var parent:Object = node.parent;
    if (parent instanceof Group){
        delete node from (parent as Group).content;
    } else if (parent instanceof Scene){
        delete node from (parent as Scene).content
    }
}
public function makeButton(node:Node,action:function()){
    node.blocksMouse = true;
    node.onMouseClicked = function(event:MouseEvent):Void{
        if (not blockInput){
            action();
        }
    }
    node.onMouseEntered = function(event:MouseEvent):Void{
        node.effect = Glow{}
    }
    node.onMouseExited = function(event:MouseEvent):Void{
        node.effect = null;
    }
}
public function allowInput():Void{
    blockInput = false;
}
function startGame():Void{
    lightAnim.stop();
    gameModel = GameModel{}
    FlipReplace.doReplace(startScreen, gameModel.screen, gameModel.startingAnimationOver);
}
function showAbout():Void{
    lightAnim.stop();
    blockInput = true;
    WipeReplace.doReplace(startScreen, aboutScreen, allowInput);
}
function backToStart():Void{
    lightAnim.play();
    blockInput = true;
    WipeReplace.doReplace(aboutScreen, startScreen, allowInput);
}
public function offsetFromZero(node:Node):Group{
    var xOffset = node.boundsInParent.minX + node.boundsInParent.width/2.0;
    var yOffset = node.boundsInParent.minY + node.boundsInParent.height/2.0;

    var parent = node.parent as Group;
    var index = Sequences.indexOf(parent.content, node);

    delete node from (parent as Group).content;

    node.translateX = -xOffset;
    node.translateY = -yOffset;

    var group = Group{
        translateX: xOffset;
        translateY: yOffset;
        content: node;
    }
    insert group before parent.content[index];

    return group;
}

public function createLinearGradient(stops:Stop[]):LinearGradient{
    return LinearGradient{
        startX: 1
        endX: 1
        startY: 0
        endY: 1
        proportional: true
        stops: sortStops(stops);
    }
}
public function sortStops(stops:Stop[]):Stop[]{
    var result:Stop[] = Sequences.sort(stops, Comparator{
        public override function compare(obj1:Object, obj2: Object):Integer{

            var stop1 = (obj1 as Stop);
            var stop2 = (obj2 as Stop);

            if (stop1.offset > stop2.offset){
                return 1;
            } else if (stop1.offset < stop2.offset){
                return -1;
            } else {
                return 0;
            }
        }
    }) as Stop[];

    return result
}

public function randomFromNegToPos(max:Number):Number{
        if (max == 0.0){
            return 0.0;
        }

        var result = max - random.nextFloat()*max*2;
        return result;
}

public function simplifyGradients(node:Node):Void{
    if (node instanceof Shape){
        var shape  = node as Shape;
        if (shape.fill instanceof LinearGradient){
            var linearGradient = (shape.fill as LinearGradient);
            if (sizeof(linearGradient.stops) > 2){
                var newStops:Stop[];

                insert linearGradient.stops[0] into newStops;
                insert linearGradient.stops[sizeof(linearGradient.stops)-1] into newStops;

                var newGradient = LinearGradient{
                    endX: linearGradient.endX
                    endY: linearGradient.endY
                    proportional: linearGradient.proportional;
                    startX: linearGradient.startX
                    startY: linearGradient.startY
                    stops: newStops;
                }
                shape.fill = newGradient;
            }
        }
    }
    if (node instanceof Group){
        for(n in (node as Group).content){
            simplifyGradients(n);
        }
    }
}

游戏生命周期 ：游戏启动后显示开始屏幕，用户可选择查看关于屏幕或开始游戏。游戏屏幕允许用户再次游戏或返回开始屏幕。
代码功能 ：
- initStartScreen 和 initAboutScreen 函数分别初始化开始屏幕和关于屏幕。 initStartScreen 函数会简化渐变效果，创建聚光灯动画，移除不需要的节点，并将开始按钮和关于按钮转换为可交互按钮。
- simplifyGradients 函数用于递归遍历节点树，简化线性渐变，因为从 Illustrator 导出的渐变包含过多 Stops ，会影响 JavaFX 性能，简化为 2 个 Stops 可提升性能且基本不影响视觉效果。
- addLights 函数创建一个带有聚光灯的照明效果并应用到指定组，同时创建一个时间轴动画改变聚光灯的指向位置，该动画可启动和停止，避免不必要的计算开销。
- removeFromParent 函数用于移除节点，由于 Node.parent 返回的 Parent 类型不便于直接操作，该函数会将 parent 转换为正确类型后从内容中删除节点。
- makeButton 函数为节点添加类似按钮的功能，通过添加事件监听器实现点击、鼠标进入和离开的效果。

通过上述物理与粒子效果的实现以及小丑大炮游戏的开发过程，我们可以看到如何将各种技术整合到一个完整的应用中，为游戏开发等领域提供了丰富的思路和实践方法。

物理与粒子效果及小丑大炮游戏开发（续）

物理与粒子效果深入分析

物理与粒子效果在游戏开发中扮演着至关重要的角色，它们能够为游戏增添丰富的视觉效果和真实感。下面我们对前面提到的物理与粒子效果进行更深入的分析。

物理与粒子效果的性能优化

在物理与粒子效果的实现中，性能优化是一个关键问题。将发射器作为物体的例子就是一种有效的性能优化策略。通过减少模拟中的物体数量，能够显著提升游戏的性能。以下是性能优化的具体步骤：
1. 减少物体数量 ：使用少量物体来指定粒子发射器的位置，而不是为每个粒子都创建一个物体。
2. 固定粒子位置 ：让发射器创建的粒子基本保持原位，减少粒子的移动计算。
3. 简化效果计算 ：如在 PhysicsParticle 中，通过计算已过期步骤的比例来调整不透明度，避免复杂的计算。

物理与粒子效果的扩展性

物理与粒子效果的实现应该具有良好的扩展性，以便在游戏开发过程中能够方便地添加新的效果。例如， Fireball 类继承自多个接口，使其能够包含自身产生的 FireParticles ，并在屏幕上弹跳。这种设计使得 Fireball 类具有很强的扩展性，可以方便地添加新的功能。以下是扩展性设计的具体步骤：
1. 使用继承和接口 ：通过继承和实现接口，使类具有多种功能。
2. 模块化设计 ：将不同的功能封装在不同的方法中，方便添加和修改。
3. 数据驱动 ：使用数据来控制效果的参数，如 FireParticle 中的 initialSteps 、 startingOpacity 等。

小丑大炮游戏开发的细节优化

在小丑大炮游戏开发中，除了前面提到的设计和实现，还有一些细节需要优化，以提升游戏的用户体验。

游戏界面的交互优化

游戏界面的交互性是影响用户体验的重要因素。以下是一些游戏界面交互优化的建议：
1. 按钮反馈 ：在 makeButton 函数中，通过添加鼠标进入和离开的效果，为按钮提供了良好的反馈。可以进一步优化按钮的动画效果，如添加缩放、旋转等动画，增强交互感。
2. 输入控制 ：使用 blockInput 变量来控制输入，避免用户在不适当的时候进行操作。可以添加更多的输入控制逻辑，如限制用户的点击频率。
3. 提示信息 ：在游戏中添加必要的提示信息，如功率计的使用方法、钉子的作用等，帮助用户更好地理解游戏规则。

游戏性能的进一步优化

除了前面提到的物理与粒子效果的性能优化，游戏性能还可以从以下几个方面进行进一步优化：
1. 资源管理 ：合理管理游戏资源，如图片、音频等，避免资源的浪费。可以使用资源池来管理粒子效果，减少资源的创建和销毁。
2. 渲染优化 ：优化游戏的渲染过程，减少不必要的渲染操作。可以使用分层渲染、裁剪等技术，提高渲染效率。
3. 代码优化 ：对游戏代码进行优化，减少不必要的计算和循环。可以使用缓存、预计算等技术，提高代码的执行效率。

总结与展望

通过对物理与粒子效果及小丑大炮游戏开发的介绍，我们可以看到如何将各种技术整合到一个完整的游戏中。物理与粒子效果为游戏增添了丰富的视觉效果和真实感，而小丑大炮游戏则展示了如何将这些效果应用到实际的游戏开发中。

在未来的游戏开发中，物理与粒子效果将会得到更广泛的应用。随着硬件性能的不断提升，我们可以实现更加复杂和逼真的物理与粒子效果。同时，游戏开发工具和技术也在不断发展，为我们提供了更多的选择和便利。

以下是一个总结表格，展示了物理与粒子效果及小丑大炮游戏开发的关键要点：
| 类别 | 关键要点 |
| ---- | ---- |
| 物理与粒子效果 | - 性能优化：减少物体数量、固定粒子位置、简化效果计算
- 扩展性设计：使用继承和接口、模块化设计、数据驱动 |
| 小丑大炮游戏开发 | - 游戏界面交互优化：按钮反馈、输入控制、提示信息
- 游戏性能优化：资源管理、渲染优化、代码优化 |

通过不断地学习和实践，我们可以掌握更多的游戏开发技术，开发出更加精彩的游戏。希望本文能够为你在游戏开发领域的学习和实践提供一些帮助。

以下是一个 mermaid 流程图，展示了小丑大炮游戏的开发流程：

graph LR
    A[需求分析] --> B[游戏设计]
    B --> C[图形设计]
    C --> D[代码实现]
    D --> E[测试与优化]
    E --> F[发布上线]

在开发过程中，我们需要不断地进行测试和优化，确保游戏的质量和性能。同时，要关注用户的反馈，及时对游戏进行改进和更新。