How to PaperZD その4-チャージ攻撃を作る-
横スクロール2Dアクションで使うようなチャージ攻撃の想定です。
チャージ攻撃と言っても色々ありますが、スマブラのスマッシュ攻撃みたいなイメージになりました。
![](https://assets.st-note.com/production/uploads/images/107813539/picture_pc_b08733a802bf5ff91cca457f9c2eb363.gif)
その4とはなってますが、通し番号のようなもので、前回まで続いた1~3までと関連性があるわけではないです。
が、ファイルなどは続きのものでやるので、興味のある方で触ったことない方は1~3までやっていただけたらわかりやすくなるかもしれません。
(使ってるテクスチャなどは今後特に書く予定がないので)
まあ、ここにたどり着くということは基本UE5のPaper2Dとか周りのことがわかってるものと思います。(僕よりも。)
ここまで書いといて何だけどチャージ攻撃の前に普通の攻撃組んでないのは内緒。
チャージ攻撃で使う素材の用意
Flipbook
チャージ攻撃は三段階
チャージ開始直前
チャージ中
攻撃
の3種類のFlipbookを用意します。
![](https://assets.st-note.com/img/1686322596108-qKOVzKGl4d.png?width=1200)
![](https://assets.st-note.com/img/1686322622656-dLApgQUl3w.png?width=1200)
![](https://assets.st-note.com/production/uploads/images/107807283/picture_pc_e5b3b7c13ad51aceb02910aadae9232e.gif)
……まあ、このままだと見栄えが悪くなる気がするんですが、ポーズの違いがわかりやすいのでこれで進めます。
AnimationSource
AnimasionSourceに登録。
![](https://assets.st-note.com/img/1686322966302-hPa7SifPn7.png?width=1200)
AnimBPに組み込み
ChargeAttackをジャンプ用ノードとして用意。
PreChargeにチャージ開始直前
Chargeにチャージ中
ChargeReleaseに攻撃
のアニメーションをそれぞれ中に入って繋げます。
![](https://assets.st-note.com/img/1686323042344-sPadoZvQXB.png)
![](https://assets.st-note.com/img/1686323123570-lWgVNWC8fr.png?width=1200)
忘れてましたがInputActionも用意しておいてください。
自分は右クリックでチャージ攻撃にしました。
![](https://assets.st-note.com/img/1686323500674-XAtPxie4yb.png)
![](https://assets.st-note.com/img/1686323520630-wYPH7uTo4G.png)
BluePrintと遷移ルールの設定
プレイヤー用Blueprintに移動
チャージ攻撃をさせたいプレイヤーキャラのBlueprintに移動し、チャージ中の判別をするBoolean型の変数を用意。(IsAttackChargingと名付けました)
![](https://assets.st-note.com/img/1686324007780-OeQoDZ8Lwj.png)
イベントグラフに次の画像のように組みます。
Jump to NodeのJump Nameに先ほど作成したジャンプ用ノード名「ChargeAttack」を入れます。
![](https://assets.st-note.com/img/1686324092813-A0iDisyibt.png?width=1200)
遷移ルールの設定
StateMachineに戻り遷移ルールを設定していきます。
・PreCharge to Charge
TimeRemainingとEqualを繋げ0とイコールに。
意味的にはアニメーションの残り時間が0になったら、みたいな。
![](https://assets.st-note.com/img/1686324407972-mqqDEjviWR.png?width=1200)
・Charge to ChargeRelease
作ってあったプレイヤーBPを呼ぶ変数(わからない方はその1~3を見てみてください。)を置き、そこから先程作った変数をGet、NOTBooleanに繋がってるので、
IsAttackChargingにチェックが入ってなかったら遷移、みたいな感じ。
![](https://assets.st-note.com/img/1686324727102-I84qBbfjfg.png?width=1200)
・ChargeRelease to Run
PreCharge to Chargeの時と同様にアニメーションが終わったら遷移にします。
![](https://assets.st-note.com/img/1686324908490-oEAGORKoNw.png?width=1200)
チャージ中エフェクトを出す
NiagaraSystemの作成
見栄えのためにチャージ中にエフェクトを軽く作って付けてみます。
フォルダの任意の箇所で右クリック、NiagaraSystemをクリック。
![](https://assets.st-note.com/img/1686326322130-GODVs3eyXj.png)
New system from selected emitter(s)を選びNext>
![](https://assets.st-note.com/img/1686326409391-wboyflDLBJ.png)
一覧にHanging Particlesがあるので選択肢右下の+ボタン、Emitter to Addに追加されるのでFinish。
![](https://assets.st-note.com/img/1686327174653-4mtjQ2r3u7.png)
するとNiagaraSystemファイルができるので名前を変えましょう。(NS_Chargeにしました)
![](https://assets.st-note.com/img/1686327238171-6jkRC2d2J0.png)
ダブルクリックで開くと次のような画面が出ます。
チャージ風に軽く改造します。(もしくは自分で作ってもらっても構いません。)
![](https://assets.st-note.com/img/1686327390700-LiXAVDyjPw.png?width=1200)
Propaties>Emitter>LocalSpaceにチェック。
![](https://assets.st-note.com/img/1686327527105-qnJSms0FPj.png)
EmitterUpdate>EmitterState>InactiveResponseをKillに。
![](https://assets.st-note.com/img/1686327616667-NJrXdUmvvA.png)
ParticleSpawn>InitializeParticle>LifeMinとLifeMaxをそれぞれ0.5と0.6に
Colorを赤系(好きな色でOK)
UniformSpriteSizeMinとUniformSpriteSizeMaxをそれぞれ40.0と50.0に
![](https://assets.st-note.com/img/1686327878320-UeKtjKnfRj.png?width=1200)
ParticleSpawn>ShapeLocation>ShapePrimitiveをSphereに。
![](https://assets.st-note.com/img/1686327977488-EtTfQuI7RP.png?width=1200)
SystemOverview内のParticleSpawnの右にある+ボタンをクリック
AddVelocityで検索して選択。
![](https://assets.st-note.com/img/1686328038513-aJ9UTm4yPW.png)
ParticleSpawn>AddVelocity>VelocityModeをFromPointに
VelocitySpeedは-25.0
![](https://assets.st-note.com/img/1686328154168-DA9bmx6V7E.png?width=1200)
ParticleUpdate内のWindForceとAeridynamicDragをDeleteで削除。
![](https://assets.st-note.com/img/1686328208136-BQsEGVP6Go.png)
ParticleUpdate>ScaleSpriteSizeのグラフを変更。
次の感じに。数値的には1つ目のキーは0.0 0.15 2つ目は0.8 0.3 3つ目は1.0 1.0
(線の上で右クリック>Add Keyでキーを増やせます。)
![](https://assets.st-note.com/img/1686328422611-NNdkt33Ddm.png?width=1200)
ParticleUpdate>ScaleColorのグラフを変更。これはグラフボタン一つ押すだけ。
![](https://assets.st-note.com/img/1686328687847-dv6CS0xdjd.png?width=1200)
SystemOverview内のParticleUpdateの右にある+ボタンをクリック
PointAttractionForceで検索して選択。
![](https://assets.st-note.com/img/1686328716345-HmGjaOH3pC.png)
SystemOverview>PointAttractionForce>AttractionStrengthを50.0に。
![](https://assets.st-note.com/img/1686328787546-8OsSP6V0iQ.png?width=1200)
なんか中心に溜まる感じのエフェクトが出来上がったかと思います。
![](https://assets.st-note.com/img/1686328831420-Sg8YKKnQPt.png)
Blueprintに組み込み
StateMachineに戻り、Changeノードを選択、Details欄の
Callbaks>On State Enter Event NameとOn State Exit Event Nameをそれぞれ
ChargeStartとChargeStopに書き換えます。
![](https://assets.st-note.com/img/1686329174805-PaCBxj9nw0.png?width=1200)
これでそれぞれの名前のCustomEventが作れるようになりました。
AnimBPのEventGraphに移動。グラフ内でAddCustomEventを検索し選択。
![](https://assets.st-note.com/img/1686329512354-LixtQqnByQ.png)
名前をChargeStartに。
![](https://assets.st-note.com/img/1686329536017-aSotiRKVMY.png)
SpawnSystemAttachedを繋げ、Systemtemplateに先程作ったNiagaraSystemを入れます。
![](https://assets.st-note.com/img/1686329666001-SI7De3NFbT.png)
どこに出すかをアタッチするため画像のように追加して繋げます。
![](https://assets.st-note.com/img/1686329766196-DiuqGK5vfS.png)
スプライトに出すことは設定しましたが具体的にどこに出すかを設定します。
チャージのFlipbookで使っているSpriteを開き、右欄中のSocketsの+ボタンでIndexを増やします。Locationをエフェクトの出したい位置、SocketNameをChargePointにしておきます。
![](https://assets.st-note.com/img/1686330091047-M1XJq5Rx2x.png?width=1200)
AnimBPに戻り、SpawnSystemLocationのAttach Point Nameに先程ソケットにつけた名前を入れます。これでソケットの位置にエフェクトを出せるようになります。(多分。)
![](https://assets.st-note.com/img/1686330426518-Ve3laiyj4e.png?width=1200)
行けた。
![](https://assets.st-note.com/img/1686330485942-x5ajwlZLT9.png)
ただ、このままだとチャージ中から別のアニメーションに遷移してもエフェクトが消えません。なので消す処理を加えます。
Spawn System AttachedのReturn Valueから伸ばし、変数を作ります。
(名前はCharging Effectにしました。)
![](https://assets.st-note.com/img/1686330932152-468c8xrPI9.png?width=1200)
エフェクトを止める
カスタムイベントを新規作成し、名前を前に設定したChargeStopに。
これでチャージアニメーションが終わった時に動くイベントとなります。
先程作ったCharging Effect変数をget、Destoroy Componentを出して、画像のように繋げばOK。
![](https://assets.st-note.com/img/1686332300893-n0tjXOfibM.png)
完成
![](https://assets.st-note.com/production/uploads/images/107813640/picture_pc_7ca424ec445fbeae0f97492354319a02.gif)
このままだとチャージ中も動けたり、ジャンプで解除しちゃったり、チャージ開始してすぐでも攻撃できる問題がありますが、ここからはおまかせします……
自分はロックマン的な感じのチャージが好みなので、発展させていきたいところです。
ではまた。
この記事が気に入ったらサポートをしてみませんか?