Hex Pattern Practice: OPTIMIZATION

tsmallfield

License: MIT License

Fork
0
Fav
1
View
1497
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 1 lines
  • HTML 5 lines
  • CSS 23 lines
■ 六角形パターン最適化のあれこれ(社内説明用?)

以下は(以前にUPした)六角形のパターンを用いて2枚の画像のトランジションを行う例です。
http://jsdo.it/tsmallfield/6W0p2

これを(仮に)実際の案件に応用する場合、処理をなるべく軽くする工夫が必要です。

最適化の方針はいろいろありますが、ここでは
「描画する六角形の数を最小限にする」
という観点から最適化を施した例を示します。

※各コードは簡単のため、説明に不要な部分(演出)を省略しています。

/////////////////////////////////////////////////////

#01 最適化してないもの http://jsdo.it/tsmallfield/aouO
#02 デバッグ用の表示を追加したもの http://jsdo.it/tsmallfield/uk0r
#03 必要最低限の六角形のみ描画するようにしたもの http://jsdo.it/tsmallfield/zURu
#04 デバッグ用の表示を取り除いたもの http://jsdo.it/tsmallfield/8GIC

/////////////////////////////////////////////////////

各 iframe の右端に、それまでに描画した六角形の最大数が表示されています。
それぞれの数値を比較すると、
最適化前は最大で 438個 の六角形を描画していましたが、
最適化後は最大で約 40個※ の描画ですんでいることがわかります。

※スクロールの仕方で若干前後する実装のため「約」をつけています。

この最適化の効果は特に、
・描画領域のサイズを大きくする
・六角形のサイズを小さくする
等で描画する六角形の数が増えるほど顕著になります。
  • Hex Pattern Practice: OPTIMIZATION
  • Hex Pattern Practice: OPTIMIZATION

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by