朝からセミさん全力すぎ。
鳴き声で起こされたがちゃまにあですどーもおはようございます。
昨日から始めたencant.js。
【enchant.js】JavaScript初心者がenchant.jsを使ってゲームを作りたい話(始動編) - がちゃまにあ日報
ちょっとだけいじってみましたよー。
code.9leapというサイトが死ぬほど便利で感動!!
そこでチュートリアルをやってみました。
ローカルでやろうと思ってたけど
JavaScriptでも何でもそうだと思うんだけど、コード書くのはテキストエディタあればいいけど、それを動かして試す環境もいるんですよね。
色々調べてまずは自前で環境設定*1したんですが、ブラウザに上手く反映されない。
【JavaScript】ぎゃぁぁぁできた!(*゚∀゚*) ページ上部に戻るボタン(解決・設置編) - がちゃまにあ日報
このボタンを作るのにJS binというサイトを使ったので試してみたんだけど、やっぱりダメで。
おい、いきなり躓くか!?( ゚Д゚; )
とか思ってたところに現れたのがこのサイト。
code.9leap.net
良くみたらenchant.jsのサイトでちゃんと紹介されてんのな(笑)
ここはほんと初心者に優しい。泣ける。
そもそもenchant.jsが画像まで用意してくれてることにも感動したんだけど。
ゲーム作りするときに、0から画像作るのって結構大変なんですよね。
それだけでちょっと挫折しそうになったり(笑)
まずはいくつかのサンプルがあるのでそれをfork(コピーを生成して保存)する。
右にサンプルコード、左に実行画面。
RUNボタンを押せばコードが実行されます。
コードいじる画面はこんな感じ。
これはクマさんを表示しよう、っていうチュートリアルです。
操作の説明なんかいらないほどシンプル。
右のコードいじって、RUNを押すだけです。
実行画面の下に課題みたいなのがあるのも良いですね。
どこをいじったらどうなるかがわかるもの。
私はまだ最後までチュートリアルをやってないんですが(脱線してアレンジしたくなる罠にはまりました)、最後に簡単なゲームのサンプルコードがあるので、一通りやればなんとなく理解できるのではないかと。
あとはひたすら他の人のコードを読んで分析あるのみ!
そんなわけでcode.9leap、なかなかオススメでございます。
ちなみにこれが脱線結果。
enchant(); // ここで自作クラスBearをつくる Bear = Class.create(Sprite, // Spriteクラスを継承 { initialize: function(x, y) { //初期化する Sprite.call(this, 32, 32); //Spriteオブジェクトを初期化 this.image = game.assets['chara1.png']; this.scale(2,2); this.x = x; this.y = y; this.frame = 0; game.rootScene.addChild(this); }, //enterframeイベントのリスナーを定義する onenterframe: function() { var p=""; if(this.age % 5 === 0){ p=Math.floor (Math.random () * 30) + 1} switch(p){ case 1: this.x=Math.floor( Math.random() * 270 ); this.y=Math.floor( Math.random() * 270 ); this.frame=0;this.opacity=1; break; case 5: this.x=Math.floor( Math.random() * 270 ); this.y=Math.floor( Math.random() * 270 ); this.frame=0;this.opacity=1; break; case 8: this.x=Math.floor( Math.random() * 270 ); this.y=Math.floor( Math.random() * 270 ); this.frame=0;this.opacity=1; break; case 9: this.x=Math.floor( Math.random() * 270 ); this.y=Math.floor( Math.random() * 270 ); this.frame=0;this.opacity=1; break; default: break; } }, //touchendイベントのリスナーを定義する ontouchend: function() { this.frame = 3; //泣く score+= 50; } }); window.onload = function() { game = new Game(320, 320); game.preload('chara1.png'); game.onload = function() { var score ="0"; bear1 = new Bear(10, 100); // 一人目のクマさん bear2 = new Bear(40, 110); // 二人目のクマさん bear3 = new Bear(0, 120); // 三人目のクマさん } game.start(); }
クマランダム出現
↓
クリック
↓
泣くアクションのまま停止 ←今ここ
↓
消える
クリック時のアクションに「this.tl.delay(10)」とか組み込んでもダメだったんですよね。
enterframeで読み込んじゃってるからなー。うーむ。
1・5・8・9が出て消えるの待つしかないっていうね。
ほんとはswitch使う必要ない。どの数字が出る確率も一緒だから。
わかってたけど「連続してると嫌だ」という小学生的なこだわりでifをやめました(笑)
あとswitch文好きなんですよね、なんとなく。
おお?enchant.jsの仕組みって、ActionScriptに似てるかも?
— がちゃまにあ (@gachamania21) July 15, 2014
とかも思ってみたりね。
*1:環境設定って言うほど大袈裟なものじゃなくて、enchant.jsをダウンロードしてフォルダを作り、そこにmain.jsというファイル、img、libというフォルダを同じ階層に作ったりしただけです。結局上手くいかんかったけど。