もくじ
Animate CC html5 書き出しで簡単なゲームを作ってみた！
練習も兼ねて作ってみました！
ボタンを押して文字をランダムに変えてるだけの簡単なものです…！
ゲームとしてはかなりレベルが低いものですが…
Animate CCのHTML5書き出しの練習も兼ねて作ってみました！
動画でも解説してます
自分で遊んでみました
HTML５ canvasで新規作成をする
- WEBを押す
- サイズを選ぶ
- 作成ボタンを押す
まずはHTML5用のキャンバスを作成します。
テキストとボタンを作る
- テキストを配置する
⇒プロパティからダイナミックテキストにする
⇒インスタンス名を入力する - 四角い絵を配置する
⇒ムービークリップシンボル、またはボタンシンボルに変換する
⇒インスタンス名を入力する
変更するテキストを用意する
テキストはプロパティからダイナミックテキストに変更するだけでOKです。
ダイナミックテキストにする理由は、ソースコードの命令から文字を変換できるようにするためです。
ダイナミックテキストに変換すると、インスタンス名の入力欄が表示されます。
後でソースコードから指名する時用の名前を入力しましょう！
テキストを変更するためのボタンを用意する
ボタンは四角い絵を描いて[右クリック＞シンボルに変換]か[F8キー]でシンボルに変換しましょう。
↓シンボルについての詳細はコチラの記事をお読みください！
シンボルに変換すると、インスタンス名の入力欄が表示されます。
こちらも後でソースコードから指名する時用の名前を入力しましょう！
ソースコードを簡単に追加する方法
四角い絵をクリックしてから[ウィンドウ＞コードスニペット]を表示しましょう。
次に、HTML5 Canvasにある「マウスクリックイベント」をダブルクリックしてコードを追加しましょう。
ダブルクリックするとアクションウィンドウが表示され、コードが追加されています。
これでクリックした時の命令を追加できたのか
コードが追加されたシンボルがあるフレームはαマークが付きます。
ちなみにHTML5 CanvasなのにActionScriptにあるコードを追加すると、動かした際にエラーが起こりますので注意です！
お粗末すぎるソースコードを一応公開【動けばいいや】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
this.button01.addEventListener("click", fl_MouseClickHandler_2.bind(this)); function fl_MouseClickHandler_2() { var rand1 = Math.floor(Math.floor(Math.random()* 100 )/20+1); var rand2 = Math.floor(Math.floor(Math.random()* 100 )/5+1); var t1; var t2; switch(rand1){ case 1: t1="フリー" break; case 2: t1="脚本" break; case 3: t1="名言" break; case 4: t1="敵" break; case 5: t1="職業" break; } switch(rand2){ case 1: t2="クウガ" break; case 2: t2="アギト" break; case 3: t2="龍騎" break; case 4: t2="ファイズ" break; case 5: t2="ブレイド" break; case 6: t2="響" break; case 7: t2="カブト" break; case 8: t2="電王" break; case 9: t2="キバ" break; case 10: t2="ディケイド" break; case 11: t2="ダブル" break; case 12: t2="オーズ" break; case 13: t2="フォーゼ" break; case 14: t2="ウィザード" break; case 15: t2="鎧武" break; case 16: t2="ドライブ" break; case 17: t2="ゴースト" break; case 18: t2="エグゼイド" break; case 19: t2="ビルド" break; case 20: t2="ジオウ" break; } this.text1.text = t1; this.text2.text = t2; } |
先ほどのインスタンス名は、最後の行で呼び出してます。
動きを確認する＆HTML5書き出し
[Ctrl + Enter]でブラウザが開き、動きを確認することができます。
HTML5書き出しは「ファイル＞パブリッシュ」からできます。
html、js、imagesフォルダが出力されています。
これをサーバーにおいて、HTMLで呼び出すだけでOKです。
ちなみに、出力する内容は細かい設定ができます。
私の場合今回は上記のように設定してみました。
HTML5で書き出したファイルをWEBサイトで呼び出す
サーバーに画像のようにフォルダを作りました。
HTML5で書き出したファイルを、アップロードしましょう。
|
1 |
<iframe width="450" height="400" src="https://made-in-hashimo.com/canvas/usa/usa3.html" frameborder="1" scrolling="no" data-mce-fragment="1"></iframe> |
HTMLではiframeタグを使って呼び出します。
今回はこんな感じで呼び出しました。
スマホで暗くなる問題の解決
スマホからタップした際に画面が暗くならないようにするコードはコチラを使いました。
種まきのタネ.blogさんありがとうございます。
|
1 2 3 |
if (createjs.Touch.isSupported()) { createjs.Touch.enable(stage, true); } |
参考にしたサイト：種まきのタネ.blog
まとめ
みんなもオリジナルゲームを作ってみて！
HTML5書き出しの練習ということで、1作品目はショボイ感じになりました…
とりあえず、HTML5で動いたので感動！
みんなもオリジナルゲーム作ってみてくださいね！
- ヒューマンアカデミー たのまな
⇒29,800円で1ヵ月動画学習＆Adobe CC12ヶ月ライセンス付き - デジタルハリウッド
- アドバンスクールオンライン
[…] Animate CC html5 書き出したものをワードプレスに貼り付けてみた！ | メイドインハシモAnimate CC html5 書き出しで簡単なゲームを作ってみた！ 練習も兼ねて作ってみました！ 脳内でたまに遊 […]