feat(parts_player): アイテムエフェクト/$effitemマクロ実装 #82

matsuyuki-a · 2019-01-14T16:02:28Z

概要

アイテムエフェクトを実装します。デフォルトで有効になります。
- アイテムエフェクトは物体パーツ「アイテム」への接触時および物体パーツ「物を売る」からアイテムを購入した場合に発生します。マクロ文「$item」による代入では発生しません。
アイテムエフェクトの有効/無効を切り替える $effitem が実装されます。
アイテムエフェクトをゲーム起動時に無効にする属性 data-wwa-item-effect-enable 属性が追加されます。無指定または true でアイテムエフェクト有効, false でアイテムエフェクト無効になります。

Java版との挙動の違い

アイテム使用の赤枠はアイテムエフェクトが動いている間でも表示されてしまいます。
メッセージが開いている間でもエフェクトは動き続けます。（CSSなので止めるわけにもいかない）

動作確認方法

(Chrome 72 Mac)

アイテムエフェクトが発生する
アイテム上書き時にアイテムが上書きされるようなモーションが発生する
アイテム格納位置が指定されていて、該当アイテムボックスにアイテムが埋まっていて、なおかつそのアイテムの格納位置指定が当該ボックスでない場合かつ、アイテムボックスの空きが1以上ある場合、アイテムの追い出しが発生してからエフェクトが発生する
$effitem=0 でアイテムエフェクトを無効化できる
$effitem=1 でアイテムエフェクトを有効化できる
data-wwa-item-effect-enable 属性でアイテムエフェクトを無効化でいる
data-wwa-item-effect-enable 属性でアイテムエフェクトを無効化した後 $effitem=1 が実行されるとアイテムエフェクトが有効化される

matsuyuki-a · 2019-02-03T09:03:05Z

packages/assets/style/wwa.css

@@ -253,6 +253,10 @@ div.item-disp {
    margin: 0px;
 }

+.item-transitioning {
+    z-index: 240 !important;


アニメーション動作中の#item0 ... #item11 のDOMをなるべく高いところに持っていく
#wwa-fader (QuickSaveとかで出てくる灰色の枠)のz-index: 250より下である必要があるのでこの値に
あまりやりたくなかったが、他のセレクタの組み合わせでこれより強いスタイルが当たることがあるので !important

一旦DOMの構成もちゃんと見直して、できればz-indexを使わない方向に持っていきたい

matsuyuki-a · 2019-02-03T09:04:04Z

packages/engine/package.json

@@ -44,8 +44,8 @@
    "typescript": "^2.5.3",
    "uglify-js": "^3.3.27",
    "uglifyjs-webpack-plugin": "^1.2.5",
-    "webpack": "^4.9.1",
-    "webpack-cli": "^2.1.4",
+    "webpack": "^4.20.2",


古い組み合わせだと動かなくなっていたのでアプデ

matsuyuki-a · 2019-02-03T09:05:40Z

packages/engine/src/wwa_main.ts

@@ -214,6 +214,7 @@ export class WWA {
            }

            this._wwaData = e.data.wwaData;
+            this._wwaData.isItemEffectEnabled = itemEffectEnabled;


$effitem の状態をゲーム状態(this._wwaData)に含まれるデータとして保持する
これにより、QuickSaveでもこの値を引き継ぐ

matsuyuki-a · 2019-02-03T09:22:08Z

packages/engine/src/wwa_main.ts

@@ -3710,7 +3722,12 @@ function start() {
    if (classicModeAttribute !== null && classicModeAttribute.match(/^true$/i)) {
        classicModeEnabled = true;
    }
-    wwa = new WWA(mapFileName, loaderFileName, urlgateEnabled, titleImgName, classicModeEnabled, audioDirectory);
+    var itemEffectEnabled = true;


data-wwa-item-effect-enable が false に指定されている場合、アイテムエフェクトが最初から無効な状態で開始します。WWA Phoenix などで設定次第で与えられることを想定しています。

matsuyuki-a · 2019-02-09T14:39:50Z

packages/assets/style/wwa_classic.css

@@ -258,6 +258,16 @@ div.item-disp {
    margin: 0px;
 }

+.item-overwritten {


クラシックも忘れずに更新
（はやくsassにしたい...)

@aokashi
#74 では _sidebar.scss ですかね?
これと #74 のどちらが先に入るかわからないですが、後から入れる方は追従することになりますね

@matsuyuki-a
ですね。
アイテムボックス関係は _sidebar.scss に入っていますが、z-index だけは _z-index.scss に分けています。

matsuyuki-a · 2019-02-09T15:16:28Z

packages/engine/src/wwa_parts_player.ts

+                            if (prevOverwrittenItemElement) {
+                                parent.removeChild(prevOverwrittenItemElement)
+                            }
+                            const overwrittenItemElement = document.createElement("div");


アイテムボックス下にDOMをつくり、その場所にかつてあったアイテムを描画する。
このDOMは、新しいアイテムのDOMより下層に描画されるため、アイテムボックスが上書きされる時に新しいDOMが上からのしかかる構造になる。
アニメーションが終わったらこのDOMは消去される。

aokashi

軽くレビューしました。
動作には問題なさそうです。
個人的に言うとネストが深い傾向なので、ここの辺りは工夫したいかなと思います。

aokashi · 2019-02-10T06:11:24Z

packages/engine/src/wwa_parts_player.ts

+                            parent.removeChild(overwrittenItemElement)
+                        }
+                    }
+               }


インデントのスペースが1個足りないです。

prettier導入して綺麗にしたい...
無計画に入れると大量のdiffが出ちゃうのでPEが入った後あたりに
https://prettier.io/

aokashi · 2019-02-10T06:14:01Z

packages/engine/src/wwa_parts_player.ts

+                this._itemBoxElement[i].style.transitionDuration = "0s";
+                this._itemBoxElement[i].style.transitionProperty = "";
+                this._itemBoxElement[i].style.left = "0";
+                this._itemBoxElement[i].style.top = "0";
            } else {


ネストが深くなっています。
アイテムボックスが何もない場合はこの処理で次のループに入っているので、continueで止めてしまうのはどうでしょうか？

aokashi · 2019-02-10T06:18:28Z

packages/engine/src/wwa_parts_player.ts

-                this._itemBoxElement[i].style.backgroundPosition = "-" + cx + "px -" + cy + "px";
+                const cx = this._wwa.getObjectCropXById(this._itemBox[i]);
+                const cy = this._wwa.getObjectCropYById(this._itemBox[i]);
+                let parent = util.$qs("#item" + i) as (HTMLDivElement | undefined);


個人的な意見になるんですけれども、ソースコードを読む途中、 parent って何だっけ... と忘れてしまいそうです。
parentElement というように、変数名の最後に種類を表す文字列を加えてみるとどうでしょうか？

む、たしかに
型情報である程度わかるかもしれませんが、一応つけておきます

aokashi · 2019-02-10T06:29:51Z

packages/engine/src/wwa_parts_player.ts

+                    let durationMs = (-dx) * Consts.DEFAULT_FRAME_INTERVAL / Consts.ITEM_EFFECT_SPEED_PIXEL_PER_FRAME;
+                    target.style.left = dx + "px";
+                    target.style.top = dy + "px";
+                    window.setTimeout(() => {


どういう処理か分かっているのであれば、別のメソッドとして独立すると良いかもしれません。
しかし、targetやanimationOptionなどの引数を別途設定する必要があるため、少し面倒かもしれません(特にJSDoc)。ここの判断は任せます。

処理長いので確かに分割してもいいかなとは思うのですが、分割しない方が処理の流れを追いやすそうなので、このままにしておきます

aokashi · 2019-02-10T06:30:14Z

packages/engine/src/wwa_parts_player.ts

+             itemBoxScreenPixelCoord: new Coord(
+                 Consts.MAP_WINDOW_WIDTH + (insertPos - 1) % 3 * Consts.CHIP_SIZE,
+                 Consts.ITEMBOX_TOP_Y + Math.floor((insertPos - 1) / 3) * Consts.CHIP_SIZE),
+                 overwrittenObjectId


インデントのスペースが1個多いです。

aokashi

神

Squashed commit of the following: commit a7338fe Merge: ca061e3 4716d20 Author: Matsuyuki <matsuyuki.eca@gmail.com> Date: Wed Feb 20 22:51:10 2019 +0900 Merge pull request WWAWing#91 from WWAWing/fix/mapid-table fix(mapIDTable): パスワードセーブが重い件を修正 commit 4716d20 Author: Matsuyuki/rmn. (@rmn_e) <matsuyuki.eca@gmail.com> Date: Wed Feb 20 22:41:51 2019 +0900 docs(wwa_main): @see commit ca061e3 Author: Matsuyuki/rmn <matsuyuki.eca@gmail.com> Date: Mon Feb 18 00:49:04 2019 +0900 型定義が衝突していたので修正 commit 8c4c26b Author: Matsuyuki/rmn <matsuyuki.eca@gmail.com> Date: Sun Feb 17 21:45:42 2019 +0900 fix(mapIDTable): パスワードセーブが重い件を修正 mapIDTableをWWADataから外す commit ee02a71 Merge: a16129b c442d8e Author: Aokashi <Aokashi.Towa@Gmail.com> Date: Sun Feb 17 16:11:21 2019 +0900 Merge pull request WWAWing#81 from WWAWing/chore/issue-template Update issue templates commit c442d8e Author: Aokashi <Aokashi.Towa@Gmail.com> Date: Sun Feb 17 16:10:58 2019 +0900 Update Default Issue Template 不具合報告へ繋ぐURLを配置 commit 56cae76 Author: Aokashi <Aokashi.Towa@Gmail.com> Date: Sun Feb 17 16:06:38 2019 +0900 Issueのデフォルトテンプレートを作成 commit 533f8fe Author: Aokashi <Aokashi.Towa@Gmail.com> Date: Sun Feb 17 15:48:47 2019 +0900 Rename ----.md to bug.md ----.md は分かりにくいので commit a16129b Merge: 980c6cd eb64fd4 Author: Matsuyuki <matsuyuki.eca@gmail.com> Date: Sun Feb 17 13:58:03 2019 +0900 Merge pull request WWAWing#78 from WWAWing/refactor/bundle-crypto-js refactor(html):CryptoJSをdevでもバンドルする commit eb64fd4 Author: Matsuyuki/rmn <matsuyuki.eca@gmail.com> Date: Tue Feb 12 00:19:41 2019 +0900 ケツカンマ commit fbbc453 Author: Aokashi <Aokashi.Towa@Gmail.com> Date: Mon Feb 11 23:18:45 2019 +0900 Update ----.md 句読点の追加と原因の説明について追記 commit 4337626 Author: Matsuyuki/rmn <matsuyuki.eca@gmail.com> Date: Mon Feb 11 23:12:20 2019 +0900 chore(package): remove duplicate dependencies commit 6df1a8d Author: Matsuyuki/rmn <matsuyuki.eca@gmail.com> Date: Mon Feb 11 22:33:00 2019 +0900 chore(webpack): ライセンスコメントをシンプルにした commit 5d154c2 Merge: 9093240 980c6cd Author: Matsuyuki/rmn <matsuyuki.eca@gmail.com> Date: Mon Feb 11 21:19:03 2019 +0900 Merge branch 'develop' into refactor/bundle-crypto-js commit 9093240 Merge: c534289 c67f43d Author: Matsuyuki/rmn <matsuyuki.eca@gmail.com> Date: Mon Feb 11 21:07:53 2019 +0900 Merge branch 'develop' into refactor/bundle-crypto-js commit 980c6cd Merge: c67f43d d1957a9 Author: Matsuyuki <matsuyuki.eca@gmail.com> Date: Mon Feb 11 17:36:28 2019 +0900 Merge pull request WWAWing#85 from WWAWing/merge-effitem Merge effitem commit d1957a9 Merge: c67f43d ad6496d Author: Matsuyuki/rmn <matsuyuki.eca@gmail.com> Date: Mon Feb 11 17:33:36 2019 +0900 Merge branch 'last-java-compatible' into merge-effitem commit ad6496d Author: Matsuyuki/rmn <matsuyuki.eca@gmail.com> Date: Mon Feb 11 17:28:04 2019 +0900 chore(wwamap): スタンダードマップに$effitemの件を追記 commit 166b724 Merge: d2426f5 841bb5b Author: Matsuyuki <matsuyuki.eca@gmail.com> Date: Mon Feb 11 16:54:44 2019 +0900 Merge pull request WWAWing#82 from WWAWing/feature/effitem feat(parts_player): アイテムエフェクト/$effitemマクロ実装 commit 841bb5b Author: Matsuyuki/rmn <matsuyuki.eca@gmail.com> Date: Mon Feb 11 16:28:58 2019 +0900 refactor(parts_player): きれいにした commit eeae8e1 Author: Matsuyuki/rmn <matsuyuki.eca@gmail.com> Date: Mon Feb 11 16:21:11 2019 +0900 refactor(parts_player): トランジション絡みを切り出し commit f031036 Author: Matsuyuki/rmn <matsuyuki.eca@gmail.com> Date: Sun Feb 10 00:28:58 2019 +0900 docs(manual): マニュアルに data-wwa-item-effect-enable 属性について追加 commit 6781bf8 Author: Matsuyuki/rmn <matsuyuki.eca@gmail.com> Date: Sat Feb 9 23:33:37 2019 +0900 fix(parts_player): 上書きでも正常に動作するように修正 commit 93a2b72 Author: Matsuyuki/rmn <matsuyuki.eca@gmail.com> Date: Sun Feb 3 23:24:15 2019 +0900 refactor(parts_player): 不要コード削除+コメント commit bcc7a9c Author: Matsuyuki/rmn <matsuyuki.eca@gmail.com> Date: Sun Feb 3 22:38:41 2019 +0900 feature(OBJECT_SELL): 物を売るパーツからアイテムを取得時にアニメーション commit e4c1251 Author: Matsuyuki/rmn <matsuyuki.eca@gmail.com> Date: Sun Feb 3 16:50:16 2019 +0900 fix(parts_player): エフェクト中の重なり順を変更 commit c67f43d Merge: 4da2a05 1bd330a Author: Matsuyuki <matsuyuki.eca@gmail.com> Date: Sat Jan 19 19:06:24 2019 +0900 Merge pull request WWAWing#83 from WWAWing/chore/license update license commit 1bd330a Author: Matsuyuki/rmn <matsuyuki.eca@gmail.com> Date: Sat Jan 19 19:05:39 2019 +0900 各パッケージのライセンス更新 commit 56bdba1 Author: Matsuyuki/rmn <matsuyuki.eca@gmail.com> Date: Sat Jan 19 19:03:13 2019 +0900 update license commit d53f958 Author: Matsuyuki/rmn <matsuyuki.eca@gmail.com> Date: Tue Jan 15 01:00:43 2019 +0900 chore(wwa_parts_player): アイテムエフェクトをlinearにした commit 1337a35 Author: Matsuyuki/rmn <matsuyuki.eca@gmail.com> Date: Tue Jan 15 00:57:19 2019 +0900 feature(wwa_main): data-wwa-item-effect-enable属性実装 commit 23f35fc Author: Matsuyuki/rmn <matsuyuki.eca@gmail.com> Date: Tue Jan 15 00:46:59 2019 +0900 feature(effitem): effitemマクロ実装 commit 325e3a1 Author: Matsuyuki/rmn <matsuyuki.eca@gmail.com> Date: Mon Jan 14 23:24:20 2019 +0900 fix(wwa_parts_player): アイテムボックスの最後のアイテムが他の箇所に出てくる問題 commit 200007d Author: Matsuyuki/rmn <matsuyuki.eca@gmail.com> Date: Mon Jan 14 15:51:29 2019 +0900 feature(parts_player): アイテムエフェクト実装 commit ba4c375 Author: Aokashi <Aokashi.Towa@Gmail.com> Date: Sun Jan 13 00:29:20 2019 +0900 Update issue templates commit c534289 Author: Matsuyuki/rmn. (@rmn_e) <matsuyuki.eca@gmail.com> Date: Wed Dec 12 21:00:02 2018 +0900 refactor(html):CryptoJSをdevでもバンドルする commit d2426f5 Merge: d7b5027 23e1e00 Author: Matsuyuki <matsuyuki.eca@gmail.com> Date: Tue Nov 27 15:07:21 2018 +0900 Merge pull request WWAWing#76 from WWAWing/hotfix/npm-mulware flatmap-streamの脆弱性対応 # Conflicts: # packages/engine/src/wwa_data.ts

matsuyuki-a added 5 commits January 14, 2019 15:51

feature(parts_player): アイテムエフェクト実装

200007d

fix(wwa_parts_player): アイテムボックスの最後のアイテムが他の箇所に出てくる問題

325e3a1

feature(effitem): effitemマクロ実装

23f35fc

feature(wwa_main): data-wwa-item-effect-enable属性実装

1337a35

chore(wwa_parts_player): アイテムエフェクトをlinearにした

d53f958

matsuyuki-a changed the title ~~feature(parts_player): アイテムエフェクト/実装~~ feature(parts_player): アイテムエフェクト/$effitemマクロ実装 Jan 14, 2019

matsuyuki-a changed the title ~~feature(parts_player): アイテムエフェクト/$effitemマクロ実装~~ 【WIP】 feature(parts_player): アイテムエフェクト/$effitemマクロ実装 Jan 14, 2019

fix(parts_player): エフェクト中の重なり順を変更

e4c1251

matsuyuki-a commented Feb 3, 2019

View reviewed changes

matsuyuki-a added 2 commits February 3, 2019 22:38

feature(OBJECT_SELL): 物を売るパーツからアイテムを取得時にアニメーション

bcc7a9c

refactor(parts_player): 不要コード削除+コメント

93a2b72

This comment has been minimized.

Sign in to view

fix(parts_player): 上書きでも正常に動作するように修正

6781bf8

matsuyuki-a commented Feb 9, 2019

View reviewed changes

matsuyuki-a changed the title ~~【WIP】 feature(parts_player): アイテムエフェクト/$effitemマクロ実装~~ feat(parts_player): アイテムエフェクト/$effitemマクロ実装 Feb 9, 2019

matsuyuki-a requested a review from aokashi February 9, 2019 15:13

matsuyuki-a commented Feb 9, 2019

View reviewed changes

docs(manual): マニュアルに data-wwa-item-effect-enable 属性について追加

f031036

aokashi reviewed Feb 10, 2019

View reviewed changes

matsuyuki-a added 2 commits February 11, 2019 16:21

refactor(parts_player): トランジション絡みを切り出し

eeae8e1

refactor(parts_player): きれいにした

841bb5b

matsuyuki-a force-pushed the feature/effitem branch from 23b139b to 841bb5b Compare February 11, 2019 07:49

aokashi approved these changes Feb 11, 2019

View reviewed changes

matsuyuki-a merged commit 166b724 into last-java-compatible Feb 11, 2019

matsuyuki-a deleted the feature/effitem branch February 11, 2019 07:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(parts_player): アイテムエフェクト/$effitemマクロ実装 #82

feat(parts_player): アイテムエフェクト/$effitemマクロ実装 #82

matsuyuki-a commented Jan 14, 2019 •

edited

Loading

matsuyuki-a Feb 3, 2019 •

edited

Loading

matsuyuki-a Feb 3, 2019

matsuyuki-a Feb 3, 2019

matsuyuki-a Feb 3, 2019

This comment has been minimized.

This comment has been minimized.

matsuyuki-a Feb 9, 2019

matsuyuki-a Feb 9, 2019

aokashi Feb 9, 2019

matsuyuki-a Feb 9, 2019

aokashi left a comment

aokashi Feb 10, 2019

matsuyuki-a Feb 11, 2019

aokashi Feb 10, 2019

aokashi Feb 10, 2019

matsuyuki-a Feb 10, 2019

aokashi Feb 10, 2019

matsuyuki-a Feb 10, 2019

aokashi Feb 10, 2019

aokashi left a comment

feat(parts_player): アイテムエフェクト/$effitemマクロ実装 #82

feat(parts_player): アイテムエフェクト/$effitemマクロ実装 #82

Conversation

matsuyuki-a commented Jan 14, 2019 • edited Loading

概要

Java版との挙動の違い

動作確認方法

matsuyuki-a Feb 3, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment has been minimized.

This comment has been minimized.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aokashi left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aokashi left a comment

Choose a reason for hiding this comment

matsuyuki-a commented Jan 14, 2019 •

edited

Loading

matsuyuki-a Feb 3, 2019 •

edited

Loading