enchant.js 怒涛の 100 tips
enchant.js 怒涛の 100 tips!!
ローカル整理してたら昔勉強がてら作った enchant.js のサンプルが大量に出てきたので, 整理するついでに公開しようと思います.
最終的に 100超えちゃったけどw(全部で102個あります) 逆引きてきな感じでまとめてます. 参考になれば幸いです.
全て jsdo.it に移植したので Web上で実行できます!! fork なりダウンロードなりして遊んでくださいな♪♪
Tips
Base(基本)
基礎です.
Entity(エンティティ)
表示物系の基底クラスです. 内部で DOM を持っているので表示はもちろんのこと CSS との連携なんかもできちゃいます.
- Entity を生成してSceneに追加しよう
- Entity の幅を変えてみよう
- Entity の高さを変えてみよう
- Entity の背景色を変えてみよう(string)
- Entity の背景色を変えてみよう(hex)
- Entity の背景色を変えてみよう(rgb)
- Entity の背景色を変えてみよう(hsl)
- Entity を透明にしてみよう
- Entity の位置を変えてみよう(x, y)
- Entity の位置を変えてみよう(moveTo)(推奨)
- Entity の位置を変えてみよう(moveBy)(推奨)
- Entity をランダムな位置に表示してみよう
- Entity をたくさん表示してみよう
- カラフルな Entity をランダムな位置に表示してみよう
- Entity の className を使って CSS と連携してみよう
- Entity と CSS を連携して円を描画してみよう
- Entity と CSS を連携して Hover 演出させてみよう
- Entity と CSS を連携してアニメーションさせてみよう
EventTarget(イベントターゲット)
イベント関連の機能を持ったクラスです. 上で解説した Entity もこのクラスを継承しているのでひと通り機能を使うことができます.
Sprite(スプライト)
画像を表示する機能を持ったクラスです. 画像をグリッドで区切ってフレームアニメーションなんかも簡単にできる便利なクラスです.
- Sprite を表示しよう
- Sprite を移動させてみよう
- Sprite を回転させてみよう(rotation version)
- Sprite を回転させてみよう(rotate(deg) version)
- Sprite を拡縮させてみよう(scaleX, scaleY version)
- Sprite を拡縮させてみよう(scale(x, y) version)
- Sprite を透明にしてみよう
- Sprite をフレームアニメーションさせてみよう
- Sprite をフレームアニメーションさせながら移動させてみよう
- Sprite を画面外に出ないように制御しよう
- Sprite の進行方向に応じて表示する向きを変更しよう
Surface(サーフェス)
canvas 機能をラップしたクラスです. context を持っているのでそのまま Canvas 系の API が使えます. また, Sprite の image に代入すると画像のように使えるので非常に便利です.
Label(ラベル)
ラベルクラスです. テキストなどを画面に表示する際に使用します.
キー入力/タッチ操作
操作系の tips です.
Group(グループ)
複数の Node を子に持つことができるクラス. たくさんの Entity をグループとして管理するときなどに使用します.
Sound(サウンド)
音を再生することができるクラスです. 内部で audio 要素をラップしています.
Class(クラス)
クラスを作成するメソッドオブジェクトです.
Entity 中級
その他
避けゲー(KUMAvoid)
プレイヤー(クマ)が自動で床を走ります. タッチすると進行方向が反転します. 敵がピョンピョン跳ねながら襲ってくるので避けつづけて下さい.
どれだけ長時間避け続けられるかを競うシンプルなゲームです.
タッチゲー(クマタッチ)
ランダムに動きまわるクマをタッチしてスコアを稼ごう. 制限時間内にどれだけ多くのスコアを獲得したかを競うゲームです.
Links
随時追加, 更新すると思うのでたまに覗きにきてくれると嬉しいです. 更新したらTwitterでもつぶやくと思います.
何かこんなん作ってとかアイディアや要望, アドバイスなどありましたら気軽にTweetもしくは Mail下さい. 出来る限り応えます.
今後, 他のライブラリの tips 集なんかも作ろうかなぁ~なんて考えています. 現在の進行状況としては gl.enchant.js の tips は 70個ほど, arctic.js は 50個ほど作ってます.
100 個超えたあたりで公開しようかなと考えています.
自作 JavaScript ライブラリの tmlib.js にいたっては 200個以上あるので, この辺整理したいところ. jsdo.it さんのエディタの Add Library で追加できるライブラリに tmlib.js を追加してくれると嬉しいんだけどなぁ~.
enchant.js をさわるフェーズに入ったら参考にしよう。
今からはじめる人にお勧めです
おお!!/もう少し早く知りたかった…。
おおー、すごい
所要あってenchant.js絶賛勉強中!あとでよむ!
後でじっくり試す。
enchant.js 怒涛の 100 tips | TM Life
enchant.js
素晴らしい!
すげー
enchant.js 怒涛の 100 tips
逆引きenchant.js的なもの。いろいろサンプルがあって参考に。
便利かも。
すごいボリュームだ
まさに怒濤
Tips100ってスゲーな!
まとまっているというかチュートリアルというか。
enchant.js 怒涛の 100 tips | TM Life
enchant.js チュートリアル、、、
enchant.js 怒涛の 100 tips | TM Life
[…] に出てきたので, 整理がてらざっくり公開しようと 思います. 最終的に整理してたら 100超えちゃったけどw 参考になれば幸いです . 全て jsdo.it に移植したので, fork なりダ… original article […]
enchant.js 怒涛の 100 tips | TM Life
jsdo.itに全部上がってるのは素晴らしいよね
[…] enchant.js 怒涛の 100 tips カテゴリー: enchant.js, HTML5, JavaScript 作成者: admin パーマリンク /* […]
[…] enchant.js 怒涛の 100 tips phiさんの怒涛のTips集:なんとなくenchant.js分かってきたーって人はここのTipsを修行僧の用にストイックにこなせばennchant.jsある程度できます。と言えるようになる […]
enchant.js 怒涛の 100 tips | TM Life
[…] enchant.js 怒涛の 100 tips phiさんの怒涛のTips集:なんとなくenchant.js分かってきたーって人はここのTipsを修行僧の用にストイックにこなせばennchant.jsある程度できます。と言えるようになる […]
[…] enchant.js 怒涛の 100 tips phiさんの怒涛のTips集:なんとなくenchant.js分かってきたーって人はここのTipsを修行僧の用にストイックにこなせばennchant.jsある程度できます。と言えるようになる […]
現在進行形で拡充中。応援。/ああああ、javascript書きたくなってきた・・・。
“enchant.js 怒涛の 100 tips | TM Life” http://t.co/T71FIiVd
enchant.js 怒涛の 100 tips http://t.co/RWBQt31i @phi_jpさんから
enchant.js 怒涛の 100 tips | TM Life B! http://t.co/iMTXYPJA
enchant.js 怒涛の 100 tips | TM Life
“enchant.js 怒涛の 100 tips | TM Life” http://t.co/uj2Vpetg
enchant.js 怒涛の 100 tips http://t.co/NkU0JPW9 @phi_jpさんから
enchant.js 怒涛の 100 tips | TM Life http://t.co/bWjzBzYg
避けゲー(KUMAvoid)の章を公開しました.jsdo.itで作っているので実際に実行したり,
フォークしてパラメータをイジって遊んでくれると嬉しいです.
『enchant.js怒涛の100tips』
http://t.co/3jG2Bj50
#javascript #web
避けゲー(KUMAvoid)の章を公開しました.jsdo.itで作っているので実際に実行したり,
フォークしてパラメータをイジって遊んでくれると嬉しいです.
『enchant.js怒涛の100tips』
http://t.co/3jG2Bj50
#javascript #web
避けゲー(KUMAvoid)の章を公開しました.jsdo.itで作っているので実際に実行したり,
フォークしてパラメータをイジって遊んでくれると嬉しいです.
『enchant.js怒涛の100tips』
http://t.co/3jG2Bj50
#javascript #web
避けゲー(KUMAvoid)の章を公開しました.jsdo.itで作っているので実際に実行したり,
フォークしてパラメータをイジって遊んでくれると嬉しいです.
『enchant.js怒涛の100tips』
http://t.co/3jG2Bj50
#javascript #web
enchant.js 怒涛の 100 tips http://t.co/PCVG3f6k @phi_jpさんから
enchant.js勉強するときに参考にする > enchant.js 怒涛の 100 tips http://t.co/0FnexCXx @phi_jpさんから
enchant.js 怒涛の 100 tips | TM Life はてなブックマーク – 人気エントリー http://t.co/Iyl4HGAJ
enchant.js 怒涛の 100 tips | TM Life http://t.co/G625DuNw
“enchant.js 怒涛の 100 tips | TM Life” http://t.co/42XNpMva
enchant.js 怒涛の 100 tips http://t.co/I67GNjW1 @phi_jpさんから
ソーシャルゲームや、コンテンツのコカ・コーラパーク化と合わさって、ゲーム要素の需要が増えている2012年。その助けとなりそうなenchart.jsの100tips。
PhoneGapとenchant.jsでゲームアプリ作りたくなってきた。
enchant.js 怒涛の 100 tips | TM Life http://t.co/R9pW8NYA
“enchant.js 怒涛の 100 tips | TM Life” http://t.co/cyrqqr8r
遅くなりましが整理中だった『クマタッチ』の章のjsdo.itへの移植完了しました.これで全ての移植終わった.
全部で102tips.皆さんからの反応もたくさんあって楽しかったです.
『enchant.js 怒涛の 100 tips』
http://t.co/3jG2Bj50
それぞれの tips の解説はリンク先のjsdo.it ページの Readme に書いています.
今も随時調整中です. 間違いやアドバイスなどありましたら連絡していただけると幸いです.
『enchant.js 怒涛の 100 tips』
http://t.co/3jG2Bj50
それぞれの tips の解説はリンク先のjsdo.it ページの Readme に書いています.
今も随時調整中です. 間違いやアドバイスなどありましたら連絡していただけると幸いです.
『enchant.js 怒涛の 100 tips』
http://t.co/3jG2Bj50
“enchant.js 怒涛の 100 tips | TM Life” http://t.co/St4GclUx
とりまメモ→enchant.js 怒涛の 100 tips | TM Life http://t.co/EOE82HiJ
[enchant.js][starter][how to][tips][enumeration] / “enchant.js 怒涛の 100 tips | TM Life” http://t.co/UszLEdiT
enchant.js 怒涛の 100 tips http://t.co/dAY9cvqO @phi_jpさんから
http://tmlife.net/programming/javascript/enchant-js-100-tips.html
[enchant.js][ゲーム][javascript][プログラミング] / “enchant.js 怒涛の 100 tips | TM Life” http://t.co/O7snKs5L
enchant.js 怒涛の 100 tips | TM Life
逆引き風
[…] 今回は enchant.js で怒濤ったとき同様 CoffeeScript についても怒濤ってみました. […]
“enchant.js 怒涛の 100 tips | TM Life” http://t.co/YCQJafV0
enchant.js 怒涛の 100 tips http://t.co/ectAr12k @phi_jpさんから
enchant.js 怒涛の 100 tips http://t.co/u5QSdPEE @phi_jpさんから
“enchant.js 怒涛の 100 tips | TM Life” http://t.co/aE28bxz1
enchant.js 怒涛の 100 tips | TM Life http://t.co/PdrQau0s
今からはじめる人にお勧めです / “enchant.js 怒涛の 100 tips | TM Life” http://t.co/C6p6GfUm
今からはじめる人にお勧めです / “enchant.js 怒涛の 100 tips | TM Life” http://t.co/C6p6GfUm
今からはじめる人にお勧めです / “enchant.js 怒涛の 100 tips | TM Life” http://t.co/C6p6GfUm
今からはじめる人にお勧めです / “enchant.js 怒涛の 100 tips | TM Life” http://t.co/C6p6GfUm
今からはじめる人にお勧めです / “enchant.js 怒涛の 100 tips | TM Life” http://t.co/C6p6GfUm
今からはじめる人にお勧めです / “enchant.js 怒涛の 100 tips | TM Life” http://t.co/C6p6GfUm
@alkaid_72th 基本はこちらと同じです。 http://t.co/1M0eugHB 著者はphiさんですからね。大きな違いはプラグイン周りを扱っていることですね。プラグイン周りがなかったら多分買ってません
@blz_bb こちら http://t.co/1M0eugHB とこちら http://t.co/VL5wbe9d はいかがでしょう
http://t.co/8vKpYN5o の書籍化っぽい / “enchant.js開発のレシピ|書籍情報|秀和システム” http://t.co/NwDLYBlv
[…] 著者は、9leapへの常連投稿者としても御馴染みで「enchant.js 怒濤の100tips」の作者でもあるphiさん。 […]
“enchant.js 怒涛の 100 tips | TM Life” http://t.co/Zr6opUlT
enchant100tips
“enchant.js 怒涛の 100 tips | TM Life” http://t.co/FK6cFuSV
[…] また, 以前私が書いた『enchant.js 怒涛の 100 tips』を書籍化したものだと思われている方がいるかもしれませんが, 違います!! […]
[…] ついにenchant.js本第三弾が今週金曜日に発売されるぞ! 既に秋葉原ヨドバシカメラの有隣堂や池袋のジュンク堂など、一部の店舗では先行発売されているらしいこの本、著者は「enchant.js 開発のレシピ」でお馴染みのphiさんだっ! […]
“enchant.js 怒涛の 100 tips | TM Life” http://t.co/lLqA0IFb
重宝! / enchant.js 怒涛の 100 tips http://t.co/kUa7nY30 @phi_jpさんから
“enchant.js 怒涛の 100 tips | TM Life” http://t.co/G4UA6YXN
[…] enchant.js 怒涛の 100 tips […]
メモ。 enchant.js 怒涛の 100 tips http://t.co/hiEuW4SU @phi_jpさんから
いつも参考にさせてもらっています!
質問なのですが、safari5.1.7で動作確認したところ今まで動いていたゲームもaudioが読み込めず(?)動かなくなってしまいました。
>>TypeError: ‘undefined’ is not a constructor (evaluating ‘new Audio()’)
何か対策があれば教えてください。。
すみません、原因ここに書いてありました!
http://infobrink.com/safari-not-liking-the-html5-audio/
WinのsafariはQTがインストールしてないと動かないそうです。
今インストールしたところ無事動きました。お騒がせしました。
返信が遅くなり申し訳ありません>< 解決したようでよかったです:)
“enchant.js 怒涛の 100 tips | TM Life” http://t.co/rKuXAjY8
“enchant.js 怒涛の 100 tips | TM Life” http://t.co/rKuXAjY8
[…] また, 以前私が書いた『enchant.js 怒涛の 100 tips』を書籍化したものだと思われている方がいるかもしれませんが, 違います!! […]
enchant.js 怒涛の 100 tips http://t.co/ZAoIzhk0 @phi_jpさんから
@sinyamabc コメントありがとうございます!! 前に書いたエントリーで Step by Step 書いているので良かったら参考にしてください.『enchant.js 怒涛の 100 tips』- 避けゲー(KUMAvoid)
http://t.co/kNJr3Epi
[…] http://tmlife.net/programming/javascript/enchant-js-100-tips.html この記事で学ぶのが一番早いかも。大変お世話になりました。 […]
Hi all. I got problem on accessing CSS with Javascript in enchant.js. I tried the tutorial that author posted on this website but it seems only work for old version of enchant. Right now I am using the newest one which is enchant.js v0.6.2 but it seems not working. Could you guys give me some suggestion?? Thanks!!!! 🙂
途中だった「キー入力/タッチ操作」, 「Group」, 「Sound」, 「Class」についてのサンプルを公開しました. 今日中には全て公開します!! 『enchant.js 怒涛の 100 tips』 http://t.co/kNJvBeqc #web #javascript
すげー参考になった!
enchant.js 怒涛の 100 tips http://t.co/FE8W6sdLvS @phi_jpさんから
“enchant.js 怒涛の 100 tips | TM Life” http://t.co/vDPGPbSxKH
enchant.js 怒涛の 100 tips | TM Life http://t.co/tRLfO2q74Y
enchant.js 怒涛の 100 tips | TM Life http://t.co/tRLfO2q74Y
enchant.js 怒涛の 100 tips | TM Life http://t.co/iwrjJyCA02
@takaya1992 こちら(http://t.co/JtisralUDh)とこちら(http://t.co/9fr35e1ksW)のサイトを足がかりに、enchant.jsのAPIドキュメントを読んでゆくと色々発見があると思います
RT @v416: @takaya1992 こちら(http://t.co/JtisralUDh)とこちら(http://t.co/9fr35e1ksW)のサイトを足がかりに、enchant.jsのAPIドキュメントを読んでゆくと色々発見があると思います
“enchant.js 怒涛の 100 tips | TM Life” http://t.co/Zr6opUlT
[…] イトかと思います。 enchant.js 怒涛の 100 tips 以下のTipsが載っています。 […]
[…] サイトかと思います。 enchant.js 怒涛の 100 tips 以下のTipsが載っています。 […]
今からはじめる人にお勧めです / “enchant.js 怒涛の 100 tips | TM Life” http://t.co/C6p6GfUm
[…] enchant.js 怒涛の 100 tips | TM Life […]
[…] enchant.js 怒涛の 100 tips | TM Life […]