2012年4月22日日曜日

enchant.js meetup 東京 vol.2 で LTしてきてた

enchant.js meet up 東京 vol.2 でLTをしてきました!



聴衆をマッハで置いてけぼりな感じのLTをしてきたので、自分のブログに解説を書きました。きっと、更に凄い勢いでいろんな人を置いてけぼりにするはずです。(コードをかけばいくらかマシなんでしょうがその元気はない……)

enchant.js meetup 東京 vol.2でLTしてきた。 - 名称未定ドキュメント"Que"

他にもたくさん面白い話を聞けたので、機会があればまとめたいなーとおもいます。

とりあえず、gl.enchant.jsやばい。MMDを読み込んでIKまで実装してあるってのをみて鼻血が止まらなくなるかとおもった。

2012年4月17日火曜日

jsdo.it で avatar.enchant.js を使うには


enchant.js にはキャラや背景を手軽に使うための仕組みである
avatar.enchant.js というものがあります。

どんなものかというのはこのへんを見てもらえると分かるかと思います。
http://wise9.jp/archives/7060 とか
http://osakijs.blogspot.jp/2012/04/avaterenchatjs.html とか(ステマ)

こんなに便利な avatar.enchant.js ですが、現在 jsdo.it の Majjor Library にはありません。
(遠からず入るかと思いますが)

でも使いたいよーという紳士淑女の方々がいらっしゃると思いますので
こうすると使えるよ!というのが今回の記事の趣旨です。いざ本題へ。

1. まず avatar.enchant.js を用意します
  1.1 Start coding して JavaScript タブに avatar.enchant.js のコードをまるっと貼り付けます
      (https://github.com/shi3z/enchant.js の plugins 以下にあります)



  1.2 背景やモンスター画像を使いたい人は Files に画像を追加しておきましょう
      (https://github.com/shi3z/enchant.js の images 以下にあります)














  1.3 保存します

2. 上記で作成した avatar.enchant.js を使います
  2.1 Start coding して Add Library で enchant.js を追加します

















  2.2 Add Library で avatar.enchant.js を追加します(「1.」で作成したもの)

















  2.3 enchant.js のコードをもりもり書きます









(」・ω・)」うー!(/・ω・)/にゃー!

2012年4月11日水曜日

ターミナルプレクサーのお話(1)

依頼があってから寝かせすぎた感のあるターミナルマルチプレクサのお話です。

マルチプレクサってなに?って人は一回Linux系にターミナルログインしてscreen って打ってからC-a c って打ってみたらいいとおもう。

一般的によくあるたーみなるまるちぷれくさ についてデス
今のところ僕が知る限りではこれぐらいあります

  • GNU screen
  • tscreen
  • tmux
  • byobu
個人的に大枠でくくると

1)GNU Screen tscreen byoubu
2)tmux

の2グループにわけられる。いや分けたと思った。
違いはScreenの拡張 か、個別の機能があるかってちがいです。

screen自体が「古い」って言われるのはたぶん枯れきって開発がほぼ終了してんじゃね?ってぐらい(実は別の人がかいはつを続けているっぽいですが)それに比べるとtmuxの方が更新頻度が高いからなんじゃないかなーと思っています。

んなわけでScreen系とtmux系の違いはどこーってなるとこんな感じかな?とおもっとります

Screen
・ RH・Debian系なら大抵標準で入っている   <<( 重要)
・ 便利なscriptがいろんな人によってすでにそろっている。
・ tscreen やbyoubuといった拡張派生系のものがあって移行も比較的すんなりScriptもそのまま使えたりする。
・ 慣れてる人が多い(w
・ メモリくうよ・・・マジで

tmux
・標準設定のままでもそれなりに使えるステータスバー
・各ショートカットがコマンドベース
・縦分割機能搭載(僕がtmuxを知る事になった要因・・・でも最も使ってない機能)
・たまに混乱する「ペイン」って概念
・まぁ概念としてはScreen互換なんだけど・・・・・
・コピー&ペースト用のバッファを複数保持できる(これがでかい)
・sessionが複数もてて、しかも任意に切り替えが出来る(割と重要)

なかんじです。
今更ってかんじの情報ですね。

で、個人的な見解ですが、僕はLinux系のOS運用をする事が多いので基本はGNU screenつかってます。
これなら、自分の作業アカウントに「.screenrc」入れれば環境そのまま使えますので。
同じ問題でscreenscriptもあまり使わないようにしてます。

じゃぁtmuxは? って話なんですがこれは常時使用しているWSの方で使っています。
理由は、メモリの使用量の問題と上記の
「・sessionが複数もてて、しかも任意に切り替えが出来る(割と重要)」
これです。

この辺は次回もっと書いて良いよって言われたら書きます。
昼飯のあいまに書いたので今回こんなところで。

2012年4月10日火曜日

avater.enchat.jsでいろいろ遊んでみた

avater.enchant.jsがいい感じ

avater.enchant.jsがかなりイケてます。
簡単にキャラクタが表示できるというのは、絵心のないプログラマにはまさに福音!
これで「絵がかけないからゲームつくれない」なんてちょっと意味のわからない言い訳が聞けなくなりますね!

さて、このavater.enchant.js、好きなキャラメイクができるのもさることながら、デフォルトで何種類かの動きを備えています。

  • stop
  • run
  • attack
  • special
  • damage
  • dead
  • demo
それぞれ、使いたいタイミングで player.action = "damage" とか指定してあげると













こんな風にダメージうけてくれるわけです。キャワイイ!

じゃぁ、なんか作りたいよね?


さて、こんな横向きで、走ったり攻撃したりするキャラクタがいるんだから、横スクロールシューティングゲームを作りたくなるのがゲーム屋の心情というやつですよね!
というわけで、とりあえず女の子が剣を降ると、弾がでるってのを作りましょうか。
クリックしたタイミングで、弾を出すようにしてみましょう。














あ、あれー? コレじゃない感……。
こう、刀を抜いた時にズバーっと弾がでてほしいじゃないですか。
なのに、あれ?

コード読んでみる


avater.enchant.jsのコードを見てみると、attackの時のアニメーションのコマは

"attack": [ 0,2,9,10,11,5,0,0,0,-1], 
てな具合の定義がしてあります。
この配列の順序で画像を切り替えてアニメーションされるのですが、配列の先頭の0というのは、stopの時と同じ画像なんですね。

これ、配列4番目とか5番目とかその辺りで弾がでてくれたらカッコイイきがします。
なので、そのように書いてしまいましょう。JavaScriptの自由自在っぷりが発揮されます。

まず、そのキャラクタが今何のアクションをしているかはplayer.actionで取得できます。
よって、以下のようなコードで、攻撃アクション中かどうかをしることができます。

var player = new Avater("2:2:1:2076:21310:2206");

if(player.action === "attack") {
  // 攻撃中の処理をここに書く
}

これで取得できます!
さて、つぎは攻撃中のアニメーションの4コマ目あたりで弾を出したいなぁ……と思います。
また、avater.enchant.jsのコードを読むと、actionの指定がある場合、毎フレームごとにanimFrameという値を1増加させて、animPatternという配列に従って画像の表示を変えているようです。
つまり、animFrameの値 = action開始時からのフレーム数ということがわかります。
というわけで、以下のようなコードを書きました。

if(player.action === "attack"){
  if(player.animFrame === 4){
     game.rootScene.addChild(new Bullet());
  }  
}

これで、attack動作中で、4コマ目のときにBullet(弾)を表示するというコードが完成しました!
じゃぁ、動かしてみましょう!

ああ、いいですね! ばっちりです。最高です! 捏造したかのような思い通りのスクリーンショットも取れました!

まとめ

avater.enchant.js のコードを読めば、大抵のことができる。


コード読んでてハマったとこ

var w = ~~(image.width/4);

このコードが何やってるかわからなかったんですね。このチルダチルダ
いろいろ読んでいくつか解説しているページを見つけました。

なるほど。Math.floor使わないという方法があるのか。
いろいろありますなぁ〜。

ソースコードを読むのはとても勉強になりますね><

2012年4月3日火曜日

これも開発環境

Osaki.jsはenchant.jsでゲームを作ったり、遊んだりするクラブ活動です。
みんなでノートパソコンを持ち寄って、わいわいやってるんですが、すげーマシンでコード書いてる猛者がいました



どうです、こいつ!
こいつ、シャープ製 WILLCOM D4 ですよ!
こいつでコードかいてjsdo.itに貼りつけてデモしていました!



初回は、本体のキーボードでちまちま打ってたんですが、さすがに辛かったらしく、第2回はキーボードマウス、ディスプレイケーブル持参という徹底っぷり。
すごく……かっこいいです。

しかし、それより、このエンターブレインのロゴがついたキーボードはどこで手に入れたんだ……。

enchant.js(+Safari)でrotateと移動を一緒にやる方法

昨日のOsaki.jsの終わって、自席に戻ったときに@pinori さんに
Spriteを回転させながら移動ってできない? 
と聞かれました。
つまり、コードにしたらこんな感じ

var img = new Sprite(16, 16);
img.image = someImage;

game.rootScene.addEventListener(Event.ENTER_FRAME, function(){ 
    img.y += 5;
    img.scaleY += 1;
    img.rotate(30);
  }
});

imgというSpriteを毎フレーム毎にy方向に動かしながら、活縦にびよーんと伸ばしながら、かつ30°づつ回転させるというコードです。
コレが動かない……。

で、今日(4/3)は大風、大雨で会社が半ドンとなったので家でこの原因究明しようと思い、



とつぶやくと、

UEIの清水さんから直接ご回答いただきました! 本当に便利な世の中です! ありがとうございました!




バグなら仕方ないんですが、やはりSafariで確認することが多いMac使い。ここはSafariでも動くようにしておきたい。
というわけで、動くようにしました。

回避方法は、twitterでもつぶやいているように、偶数フレームではローテート、奇数フレームでは移動するという動作を交互に実行するようにしました。

コードはこんな感じ。


  var img = new Sprite(16, 16);
  var dScaleY = 1,
      dRotate = 30,
      dy = 3;

  game.rootScene.addEventListener(Event.ENTER_FRAME, function(){
    if(game.frame % 2 === 0) {
      console.log("hoge"); 
      if(img.y > game.height || img.y < 0) {
        dy *= -1;
      }
      img.y += dy;
    } else {
      if (img.scaleY > 10 || img.scaleY < -10) {
        dScaleY *= -1;
      }
      img.scaleY += dScaleY;
      img.rotate(dRotate);
    }
  });

うん、説明と逆だね! 偶数フレームで移動、奇数フレームで回転&拡縮を行なっています。
jsdo.itにサンプル上げたんでそちらもどうぞ


Osaki.jsは勉強になるね!(棒

でもできるゲームを早く公開できたらいいなーと思います。
昨日は、入社3年目ボーイがつくった Metal Bear Solidがスペランカーばりの難易度でゲラゲラわらえてよかったw

2012年4月2日月曜日

Osaki.js#2 で enchant.jsでClass作る方法をお話しします。

今日の Osaki.js はデモ会なんですが、enchant.js でClassを作る方法を軽く解説しようとおもいます。

あくまで、軽く。
軽いジャブ程度に。
資料はenchant.jsのクラス継承とJavaScriptのクラス継承のちょっとした違いを参考にしました