AnimateCC html5canvas書き出しでスマホページ書き出しの問題

先日作ったhtml5canvasの書き出しをスマホでどういう風に見えるか確認してみると問題が発生。

仕組みとしては

ローカルで保存している画像やカメラを起動させて保存した画像を読み込んで

表示させたものにスタンプを付けて配置させたり出来るようなものを制作している。

どうやってもAnimateCCでは実現できないのでAnimateCCで書き出したhtml5にfileAPIを後から組み込んだhtmlファイルを制作。

これをスマホで表示したのだが、明らかにAnimateCCで書きだした部分だけスクロールが出来ない。

overflowとかいじってみてもダメ。

fileAPIを入れてるところは通常のページっぽい挙動で問題ないのだが

スマホ実機で見るとAnimateCCで作った部分だけスクロールしてくれない。

しかしよく考えるとクリックやらドラッグやら実装してるコンテンツを

普通にふりっくでスクロールできちゃダメだよな。。（オブジェクトのドラッグなどに影響するんじゃないのか・・？）とも思う。

うーん、こう考えると動かないのは納得いくがしかし使いづらい。

実際画面からはみ出るようなコンテンツ作った場合ってAnimateCCだと

スクロール出来ないから全部見れないのか・・？？

若しくは原寸表示みたいな事が出来ない？

レスポンシブとかでフィットは出来るがあくまでAnimateCCで書きだした部分のみでのフィットなので今回のようにFileAPIなど別のパーツと組み合わせたコンテンツの場合は非常に不便。

AnimateCCにhtmlを書きこめる機能はないのか。。

CSSが書けるんだからhtmlのタグだけでも書かせてくれれば解決したのだが

どうも調べてみるとAnimateCCの書き出し部分は画像っぽい挙動をしている。

これが原因なのか、と思うがこれを回避する方法も分からない。

数少ないAnimateCCの解説サイトでもこの手の情報は全く無いし

気付けばどこにもそんなページも無い。

世界でこの情報探してるの俺だけか？！それともあまりにチョロい話で

扱うまでも無い・・？

flashはまだ終わってねーぞ！と言いながら頑張ってはいるがもう難しいのかな。。

CreateJS スクリーンショットボタンを作る

CreateJSで画面のスクリーンショットを取りたい時用

セーブ用のボタンsave_btに関数を設定する。

this.save_bt.addEventListener("click", save_func);

function save_func(event) {
stage.cache(249,32,720,390);

//stageのその部分を画像にするか座標を決める。

//cache(x,y,x軸何pxか,y軸何pxか）

var obpng = stage.cacheCanvas.toDataURL('image/png',null);
stage.uncache();
var w = window.open('about:blank');

var a0="<img src='" + obpng + "'/ style='float:left;'><br>";

var a1="<font color='#ff0000">他のコンテンツ</font>";

w.document.write(a0+a1);

//↑こんな感じで繋げる。
}

 window.openで別窓を開いてそこにタグ使ってimgでスクショを埋める

感じになる。

他のコンテンツも入れたいならa1みたいな感じで1行ずつhtml書いて

最後にa0+a1+a2と繋げて表示させる。

アルカディアスの戦姫 周回プレイ

2周目、トロコンについて。

敵の火力が高いのだが全く問題ない。
周回前にアイテムが２つもらえる。
転生の証となんとかなんとかというもの。

□転生の証
装備した人が分身する。
分身は二人付くので単純に攻撃が三倍できる。
更にエリアル系の打ち上げ攻撃の浮きのリミットが
外れてお手玉が楽にできる。
もしかしたらこれは周回の効果かもしれないが。
そのため300ヒットは非常に簡単になる。
画面端で敵を浮かせて□□↑□、みたいなキャラ固有の浮かせ技を繰り返すだけで無限にヒット数が稼げる。

□なんとかかんとか。
もう、なまえを完全に記憶してないが効能は
えげつない。
強化回数を「99回にできる」
という強烈な効果の強化用素材。
どんなヘボ武器でもイカれ性能の武器にできる。
しかし回数が増えても強化素材が無ければ結局同じなのである程度話が進んでから使うのがよい。

上記２つのアイテムが手に入る。

そのため、トロコンは以下のような手順が
よろしいかと思われる。

ちなみに1周目の全クエSランクは相当に厳しい。
不可能なわけではないが、「ノーミス」若しくは「300hit」を達成しなければならないため
極端に敵が少ない、繋ぎづらい、などのため敵配置を覚えて叩く必要がある。
この苦労をするくらいなら2周目にやった方が圧倒的に楽。

□トロコンについて。

電源入れて起動したらまずは1周クリア。
とりあえずなんでもいいから最後までいき
できれば一人だけレベル99にしておく。（異界対策のため）
エンド後にクリアデータをセーブして再度そのデータで始めると
異界がクエストに追加されている。
この異界を5までクリアして2周目に突入。

2周目は番外編も含め全てSランクを狙う。

敵を一匹でも画面端で浮かせて300ヒット稼いでクリア、を繰り返えせば全てSは取れる。
ボス戦はできるだけ速攻で倒すようにすれば
大体Sは取れる。
どうしても取れないならクリアだけして一旦次へ。
番外編はS取れなくてもいいから必ず出現時にクリアしておくこと。
（物語の進行によって消えるため）
ラストで消えた番外編もクリアしてれば復活する。

道中それなりに強化素材があるようなら
厨2マンの武器を例の素材を使ってイカれ武器にしておく。攻撃力は450を越えるくらいならほぼ全ての敵を速攻で倒せる。
(500程度で苦労する敵はいなくなったが450でも大丈夫だろう。)

進行に合わせて適宜兵団強化。一個だけでよい。
ラスト「最終兵器プルミエール」までクリアしたらここからが本番。

一周目からここまでで残っているトロフィーは
全員レベル99、全員友好度マックス、全クエSランク、激乱戦100回くらいだと思う。
もし他のトロフィーが残っているなら潰してもよいが
金は勝手に貯まるし、番外編消化してれば全キャラいるはず。(居なかったら番外編4を落としているのでもう一周です。)
注意点としては「1人の友好度をMAXにする」は主人公のがってんしょうち姫のみが対象になるようなので
早めにやっておく。

残っているトロフィーはラスト前の
「扉を越えていけ！」で稼ぐ。
激乱戦な上に経験値高い人型の敵がわらわらでる。
友好度を先にあげたいかもしれないがそれは後でどうにでもなる。
まずは「扉をー」をひたすら100回。
友好度は無駄がないように確認してこまめに入れ替え。
レベル99になったら入れ替えて転生の証付け替えてまたキャラ育成。
武器は後半で拾った武器を適当に見繕って。
兵団は75くらいまで上げてればほぼ放置しても大丈夫。奥義使ってもいい。勝てばいい。負けてもいい。友好度とクリア経験値が入らないだけで戦闘した経験値は入ってる。
激乱戦100回が片付いたら気分転換に次は友好度。
メンタル大丈夫ならそのままそこで全キャラレベル99をやってもよい。

友好度は城の左下の最初のドラゴンのクエをひたすら回す。
友好度が全キャラマックスになったら
まだレベルが99になってない人が居るならお好みで「扉を越えて」か「最終兵器プルミエール」で。
使えないクソ四天王は基本控えで参戦させてれば
最終的にこいつらのレベル99が残るはず。
これは我慢。Sランク埋めにも使えないのでやはり「扉を越えて」がいいかもしれない。

Sランク埋めは前述した通り、どこでもよいので浮かせてお手玉を繰り返して300ヒット越えたらクリアをするだけでS取れる。

ボス戦も改めてイカれ武器+厨2マンでいけばまずSは取れる。
ラスボスも速攻で沈む。

トロコン自体は大して難しく無い上に軽くプレイ出来るのでオススメ。
中古屋にあるなら速攻で押さえたらよいかと。

アルカディアスの戦姫 クソ四天王

プレイヤーキャラで非常に使い勝手の悪いキャラがいる。

そこで、彼らは何故クソなのかを改めて考察する。

□クソ四天王

斧のおっさん、槍のメガネ、魔法使いのバカ、弓のやつ。

明らかにこいつらは性能で他キャラに劣る。
とんがった、クセのある、などやんわりと言うこともできるがあえて言わせてもらう。

こいつらはクソだ。

では、何故クソなのかを説明していこうと思う。

□斧のおっさん(ルドなんとか)
こいつのクソたる所以はとにかく、鈍い。
何がなんでも鈍い。
コンボも続かない。
更に相手をぶっ飛ばしてしまいコンボは更に切れやすくなる。
もう使いたくない。
これだけダメなキャラなのにセリフが神経を逆撫でさせる。
「さっすが、俺様！」

もう、こいつマジか。
クリアするたびにこれを聞かされる。
イライラ度はマックスだ。

□槍のメガネ(名前なんか知るか)
こいつもまず腹立つのが態度のデカさと実力の
不釣り合いさ。
コンボは四天王必須項目のクソ加減。
自分で打ち上げた敵に次の攻撃が間に合わないなら打ち上げできちゃダメだろ。
仲間が飛んでこなきゃなんの役にもたたない。
同じ槍使いの女の子(ヴィオ)はできる子なのに何故お前はそんなにクソなの？
飛びからのコンボも踏みつけで硬化はクソ長い。
なんだその変なメガネ！

有能な同業と比べて目立つ分斧より腹が立った。

□弓のやつ(名前なんか出てこねーや。)
一応、→△でスライディングが出るのでそれで
若干は立場を回復したがそれでもまだ余裕の(クソ)上位メンバー。

とにかくつまようじ出すのが鬱陶しい。
撃っても撃っても敵は平然と向かってくる。
敵はあっというまに距離を詰めて来るのに追い返しする技がなく、簡単に乱戦になる。
仕方なく→△のスライディングを連発することになるがほぼタコ殴り。
距離なんか取れるわけねーよ！
ただただ殴られ続ける。
みるみる減っていく体力に気づけば死んでいる。
彼は完全にこの戦いに向いていない。

□魔法使いのバカ(アーシュ)
あまりに使えなさ過ぎて名前覚えたわ、クソが。
態度、性能、動作、全てに腹が立つクソキャラオブザイヤー受賞者。
「がんばりまーす」　イラッ

飛べばふわふわ、撃てばマシュマロ、やる気のないセリフ。
もうこういうキャラ超キライ！
なんだコイツ！
強いていうならレーザーは強い。
だが遠距離キャラなのに自ら突っ込む突進系の技もあり、誤爆で突進したらあとはタコ殴りされる。
弓以上にいつ死んだかわからないバイパーIIも真っ青の紙装甲。

ミスるとリカバーの効かない上級者キャラ、とでも言うべきか。

それなりに楽しんでますけどね。

AnimateCC html5 fileAPIとの連携

javascriptを使う案件が入ったのだがjavascriptなんて昔ちょっと触っただけで

正直いい思い出も無い。ろくでも無い使われ方しか昔してなかったのに。。

とりあえず昔ちょっと触ったtoolkitで書きだそうかと思いとりあえず手を出してみたが

Animateはもう少しちゃんとhtml5 canvasを書き出せる様になっており使い勝手が

非常にいい（昔に比べれば）多分adobeでもっと他にいいツール出来てんだろうけど

javascriptベタ書きなんて出来ないしそんな時間も無いのでAnimateにて書きだす。

依頼内容：ファイル読み込みボタンでローカルPC内の画像を読み込みそれをjavascriptの中のコンテンツに読み込みたい。htmlコンテンツは全てAnimateCCでつくらざるをえない。

とりあえず考えるべき事はまずファイル読み込みボタン。

これはちょろい。

<input type="file"> 

 こんなタグ書いてりゃ勝手にファイル読み込みボタンが完成する。

fileAPIで出来るらしい。素晴らしい。これflash今出来ないんだよね。

あとはこれで読み込んだ要素を表示させる対象を指定すればいい。

しかしここからが問題。

AnimateCCで制作したhtml5コンテンツは何か分からないが通常のhtml5と違って

なんだかひと固まりっぽくなっており、確かにjsファイルとhtmlが書き出される。

だがhtmlファイルを見てもなんとも書きだした部分が塊でありいまいちベタ書きや

他のツールで制作したパーツと親和性が少ない。（ように思う）

前述のファイル読み込みボタンをベタ書きでhtmlに書いたが、このボタンとAnimateで

書きだしたコンテンツがどうも別々に出てる感満載。

AnimateCCのhtml5コンテンツは全て読み込み終わった後に表示されるが通常のhtmlコンテンツはパーツごとに読み込まれるのでAnimateコンテンツはとにかく表示が遅い。

その時差たるや、なんだ、どうした・・？壊れてるのかな？？と思うほどだ。

そしてもちろんファイル読み込みボタンで読み込んだ内容をAnimate側に表示させるのは一手間かかる。

AnimateCCのコンテンツ内の

root.hoge.fuga.test　という場所にあるMCに表示させる場合は

AnimateCCの外側のhtmlコンテンツに

exportRoot.hoge.fuga.test=・・・みたいな感じで書く必要がある。

要はrootがexportRootに変わるだけだ。

これで外側からAninateCCの内部コンテンツにアクセスする方法が分かった。

では読み込んだ素材を内部の表示させてみよう。

//AnimateCCで書き出したhtmlコンテンツを開いて書き足す。

var file_image = document.getElementById('file-image');//ID変数に。
file_image.addEventListener('change', selectReadfile, false);

//イベントリスナ登録。
//ファイルが選択されたら読み込む
function selectReadfile(e) {
var file = e.target.files;
var reader = new FileReader();
//dataURL形式でファイルを読み込む

reader.readAsDataURL(file[0]);
//ファイルの読込が終了した時の処理
reader.onload = function(){
var image = new Image();
image.src = reader.result;
var bitmap = new createjs.Bitmap(image);
exportRoot.main_f.phot_i.addChild(bitmap);

//↑AnimateCCコンテンツのmain_f.phot_iにaddChildして表示させる。

}
}
//ボタンの方の処理ここまで

こんな感じ。

あとはhtmlのbody内に

<input id="file-image" accept="image/*" type="file">でもかいてりゃ動く。

ただ動くは動くんだけどどうしてもファイル読み込みボタンをAnimateCCの内部に入れたいんだがどうしても入らない。。

AnimateCCコンテンツで内部にhtmlを書ければ上手くいくのかもしれないがCSSしか出来ないし。。

というわけで出来るといえば出来るが無理矢理な感じですね。という連携でした。

Animateでhtml5の書き出したコンテンツを外部から操作する。

AnimateCCで書き出ししたhtml5コンテンツを外部から操作したい場合の手段。

exportRootからの絶対パスで指定する事で操作出来る。

Animateコンテンツ内部にtestというコンテンツがあり、このコンテンツにhtmlから直接操作、処理を行いたい場合は以下のように書く事で操作が出来る。

exportRoot.test.処理したい内容;

AnimateCC内ではthis.test.~~みたいな感じで処理を記載していたと思うがthisがexportRootになっただけ。

これでAnimateコンテンツ内のものをhtml上から命令を出す事が出来る。

fileAPIなどのファイル読み込みボタンをhtml上に記載して読み込んだ処理を

AnimateCCのインスタンスに読み込ませる、などという場合に使った。

AnimateCCでfileAPIが使えないからしょうがない。

アルカディアスの戦姫 まとめ

プレイしていると薄々感づくとは思うがこのゲーム、レベル上げで全てどうにかなる。

兵団戦（激乱戦）も相性とか考える必要は無い。相手の兵団よりも10程度上のレベルなら一方的な暴力で鎮圧出来る。

兵団はキャラのレベルの上限まで上げる事が出来るが一つ突出したレベルの兵団を作っておくだけで相手がどの武器の兵団である、数がいくつである、など関係無く

蹂躙してくれる。

4兵団出さなければならないクエでも一つ高レベルの兵団あとは全部レベル1でOK。

そうなると姫（剣士）の兵団のレベルを上げまくる事で激乱戦は簡単に終わる。

姫、若しくは厨剣士のレベルを高めに上げておき兵団も上限までレベルを上げる

（兵団のレベルは町で金を使って上げる。）事で激乱戦はなんら苦労しない。

あとは攻撃命令でも出せばみんな死んでいく。

とっとと終わらせたいならゲージ溜めて奥義でも使えばすぐ消える。

武器のカスタムについて。

どれくらい差異があるのかよく分からないが武器は強いに越したことは無い。

しかしそれすらキャラのレベルで覆る。

カスタム好きな人はカスタム素材集めるとかいろいろ出来るのでやってみるのが

いいかと思うが俺は面倒だったのでその都度拾った武器で強ければ装備、という

ルンペンスタイルで進めた。

トロフィー対象に「武器を強くした」、「武器を進化させた」があるがこんなものは

拾ったゴミみたいな武器を片っ端から進化させる、強化するですぐに終わる。

どうせ扉を越えて行けを100回近くするんだから金は馬鹿みたいにあるはずだ。

拾える武器もよほどこまめに売ったりしてない限り腐るほどあると思うので

それらを適当に進化、強化。

進化させる武器が無い！という場合は序盤から中盤の激乱戦をすれば2-3回で山ほど

進化させられる武器（右下に赤いトンカチマークのある）が手に入るはずだ。

どのみち激乱戦は100回しなければならないのだから。

ただ状態異常が付く武器は非常に使い勝手がいい。

スロー、気絶、毒などのスキルが付いた武器、氷結属性武器は良い。

後半はスロー、気絶、毒のどれかが付く状態異常・中ってスキルの付いた武器もあるのであったらそれを使おう。雑魚の動作停止、足止めなど非常に使いやすいのだ。

逆を言えばよほど進化、強化を拘らない限りは状態異常系付与武器で火力があれば

いいような気もする。

拘りのハイパワー武器を作るもの楽しいと思うがレベル99になった時に倒せない敵が

居なくなってしまっているので作るのも悲しい気がする。

原始人相手に核爆弾までは必要無い、機関銃と弾があれば問題無く封殺出来るのと

同じで相手も居ないのに必要以上の火力の武器を作るモチベーションが保てるだろうか。

しかもこのゲームは2周目に武器や金を引き継ぐ事は出来ないのだ。

また全く気付かなかったのだが店でも武器や素材は売っている。

ラス前で気づいたのだが在庫がある無しにかかわらず有り余る金で全て買えるだけ買ったがそれでも金が無くなる事態にはならない。

それくらい激乱戦を繰り返す必要がある。

最悪店売り武器でもいいんじゃないか、と思う。

ーまとめー

非常に広い範囲のプレイヤー層をターゲットにしており誰でも気軽にプレイ出来る

アクションロープレゲーだと思う。

アクションだけにどうしてもどこかで繰り返し感が出てきてしまうとは思うが

軽くやるタイプの緩いアクションでテクニックが無ければレベルを上げて対応も

出来るので良い。

BGM、デザイン共にほんわかした感じでのほほんと楽しめるゲーム。

ボリューム面ではどうしても少ないと感じる部分はあるがやたらと時間ばっかり

かかって面倒くせぇゲームよりは潔い。

仕事で追いつめられて、家に帰ればゲームで追っかけまわされたり

撃たれたり面倒だわ・・って

いう心が疲れた時なんかに緩くプレイ出来るゲームである。

80年代当時アーケードでブイブイ言わせていたおっさん連中もちょっとやってみると

「おっ、なかなか進化してんじゃん」と思えるかも知れない。

あとエンディングがいい曲。

なんで一回しか聞けないんだよ、エンディング前のセーブデータ消せないじゃないか。

真っ暗な画面にスタッフロール、しかもエンディング曲のカラオケ入ってるのは

いかがなものか、と思うが。

次回作はエンディングもうちょっと作ってほしい。