プログラミング

【enchant.js】神経衰弱の作り方 その2【TCard.js】

『神経衰弱の作り方 その2』です。 今回はゲームを繰り返しプレイできるよう、ループを仕込みたいと思います。

【enchant.js】神経衰弱の作り方【TCard.js】

今回は先日公開したTCard.jsを使って、実際にゲームを作ってみたいと思います。 作るゲームは一人用神経衰弱です。 enchant.jsを使用しますが、enchant.jsの解説は行いませんのでご注意下さい。みなさん御存知の通り、神経衰弱とは伏せた状態で場に置かれた…

【enchant.js】TCard.jsをgithubにupしました【ゲーム制作】

タイトル通りです。v416/TCard.jsgithub.com従来のTCard.jsはenchant.jsに依存していましたが、コア部分をenchant.jsから切り離しました。 画像部分はenchant.jsに相変わらず依存してます。ってか、enchant.jsで提供されているグラフィックを使ってますしね。…

【enchant.js】タグを使ってみよう

今回取り上げるのは、enchant.jsでのhtmlタグの利用についてです。enchant.jsは、v0.5まではDOMベースの描画で、文字列を扱うLabelにタグを直接書き込むという荒業が可能でした。しかしv0.6以降、描画がCanvasベースに変わったためLabelでタグを利用すること…

【tmlib.js】とくにつまづいた2つのこと

TM-Shooterやブロック崩さぬで利用されているライブラリ『tmlib.js』をいぢりはじめました。 前々からさわってはいたのですが、慣れているenchant.jsとは勝手が違うため「アプリを1本作ろう!」というところまでは至っていませんでした。ですが、ちまちまい…

クリスマスダンジョンに挑んできたよ!

codeiq.jpで開催されていた「FizzBuzzダンジョン」及び「クリスマス版素数のダンジョン」をクリアできたので、せっかくだからとこちらのイベントにもお邪魔して来ました。FizzBuzz問題を私が60文字、70文字で四苦八苦して解いてる中、twitter上には34文字で…

【enchant.js】正弦波の書き方【やっぱり関係ない】

前回は円を扱いましたので、今回は正弦波を描画してみましょう。 正弦波ってどんな図形かというと、『あずまんが大王』のOPの1:10あたりでやってる動きですw 冗談はさておき、正弦波の描く図形は「波」です。 これがなぜ円と関係してくるのでしょうか。 円…

【enchant.js】arcを使わない円の書き方【あんまり関係ない】

ここ最近、すっかりプログラミング熱が冷めております。 じゃあプログラミングに向けられていた熱がどこ行ったのかというと、今はお絵かきの方に向けられています。 最近はA・ルーミスという方が書かれた教本をチラチラと見ているのですが、これがまた面白…

【enchant.js】MOON Challenge!【9leap】

久々に9DaysChallengeが開催されましたね。 その名もMOON Challenge! 7月に発売されたUEIのタブレット『enchantMOON』にちなんだ9Daysです。 それも2回! もちろん、私も参加しました!MOON Challenge #1 9leap : マルっと! by v416 - どこでも遊べる、…

【enchant.js】円を区切る方法【canvas】

みなさま、お久しぶりでございます。 もはや月に1回の更新があるかどうかというへなちょこブログの更新であります。 8月はコミケに9daysが2回と、ついでに言うと仕事の方でもリリースがあったりとイベント盛りだくさんの月でした。 「だから更新できなく…

【enchant.js】Hello Physical World vol.2【box2d】

さて。 お待たせしました。「Hello Physical World」2回めです。 今回はちょっとやっかいな反発係数を取り上げようと思います。反発係数とは! 2物体の衝突において、衝突前の互いに近づく速さに対する、衝突後の互いに遠ざかる速さの比のことである!ようす…

Sublime Text 2のsnippetを試してみた

Sublime Text 2にはsnippetという、まぁ一種の自動補完のような機能があります。 snippetの詳しいことはテキトーにググって下さい。 で、こちらを参考にひとつ試しに作ってみました。 <snippet> <content> </content> </snippet>

「第肆回天下一カウボーイ大会」で生き恥をさらしてきましたよ

2月3日に行われた「第肆回天下一カウボーイ大会」に行って来ました。すごかったですね! どれもこれも魅力的な講演で、もう、本当に聞き入ってしまいましたよ。実はですね、本当は行く気なかったんです。 「数学とかわかんねーし、どーせ聞いてもワケワカメ…

【enchant.js】アトラスXの例えばこんなハック【GGJ】

先日のGGJ、皆様お疲れ様でした。 同じチームとなった@sparrow_Pさんと@Kadesh_Laurantさん、本当にお疲れ様でした。一緒にゲームを作ることが出来て、しかも完成にまでこぎつけることが出来てほんとうによかったです。 GGJ内のサイト。 Game: Earthly Star …

【enchant.js】Hello Physical World vol.1【box2d】

最近、このブログに「box2d.enchant.js」で検索かけて辿り着く方が多いようです。*1 こんな記事も書いているわけですからさもありなん。しかし改めて読み返すと……結構つっけんどんですよね。もっと初歩からキチンと書いとけや、と。というわけで、box2d.ench…

【enchant.js】TShape.js作りました【プラグイン】

enchant.jsは画像なしでもある程度作れるようにしてほしいなー。四角簡単に作れる程度には。2013-01-10 00:09:25 via YoruFukurou というtweetを見たので、マルや多角形を描画するライブラリを作ってみました。 ソース サンプルはこちら

【tmlib.js】プログラミングぞめ【box2d】

あけましておめでとうございます。 本年もよろしくおねがいします。はてさて。わたくし、休暇中はほとんどプログラミングをやらない人間で、先日仕事の折(4日から仕事ですよ!)にちびーっといぢって見ました。成果は以下の通り。 http://jsdo.it/blogpart…

【enchant.js】Nodeの表示順 v0.6対応版【Advent Calendar】

はてなのアクセス解析のぞくと、Nodeの表示順で検索されて当方のブログに辿り着く方がいらっしゃるようで。enchant.jsもバージョンが上がったことですし、ここいらで再度まとめてみたいと思います。まずは基本のおさらい。 enchant.jsでは、addChildをすると…

【enchant.js】TCard.jsはv0.6対応の夢をみるか【Advent Calendar】

先日書いたAdvent Calendarの記事では@phi_jpさんのtrakpad.enchant.jsを取り上げましたが、思わぬ方向からブーメランが飛んできました。そっかー。TCard.js、v0.6だと動かないのかー。 そっかー……。で、ここで終わったら何とも悲しい。せっかくなのでTCard.…

【enchant.js】trackpad.enchant.jsをenchant.js v0.6で使うには【Advent Calendar】

enchant.js Advent Calendarなるものに参加です。tmlib.jsでもお馴染みのphiさんが、今年の3月にtrackpad.enchant.jsというプラグインを発表されています。 こちら、120x80という小さな範囲で画面全体をカバーできるというスグレモノでして、導入も簡単で非…

【enchant.js】ver. 0.6でのGroupの注意点【実験】

先日、enchant.js 0.6がリリースされましたね。 twitterを眺めていると、色々な方の悲鳴が聞こえてきます(笑)。今回のバージョンアップの目玉は、やはりCanvasベースの描画でしょうか。 というわけでその影響を受けるもののひとつ、Groupについて探ってみ…

9分間でゲームを作る方法

先日お台場の日本科学未来館で開催された「デジタルコンテンツEXPO」では、UEIのブースで行われた「9 minutes coding battle」が人気だったようですね。私は会場に足を運ぶことはできなかったのですが、twitterを見ていると触発された結構いらっしゃった…

【enchant.js】TTweet.js【作ってみた】

必要にかられて漫画の吹き出しのようなメッセージ出力クラスを作ってみました。 吹き出しクラス by v416 - code.9leap.net でtweetしてみたら おお、これは面白い RT @v416: 吹き出しクラス by v416 - URL URL @9leapさんから でけた2012-10-19 17:24:43 via…

ネオクラッシック結果発表、きた!

wise9 › 9Days Challenge2012#5 ネオクラシックゲームチャレンジ 、優勝は・・・!? はい、ネオクラッシックの結果が発表されました。 私の作成した「君に届け」は後半一気にプレイヤー数を獲得していったのですが、「ショットガンポーカー」との差を埋めるこ…

【enchant.js】「君に届け」を投稿しました【9leap】

9leap : 君に届け by v416 - どこでも遊べる、投稿型ゲームサイト 爆弾投げて茶クマどもを蹴散らし、奥にいるクマ美にラブレターを届けるという恋愛シューティングゲームです。 9月の9DaysChallenge合わせのゲームなので9日には投稿していたのですが、完成…

enchant.js:box2d.enchant.js事始め

※7/31 その6、その7を追加しました。 ※8/3 その8、その9を追加しました。9leapでまた面白い試みがスタートしましたね。 ゲームプログラミングの統合学習環境サイト「code.9leap」。すでに多くの人がアクセスしているようで、先日私がForkした際に振られ…

enchant.js:棒倒し法による迷路生成

こちらのサイトを参考に、棒倒し法による自動迷路生成関数を作ってみました。 enchant.js:棒倒し法による迷路生成 - jsdo.it - share JavaScript, HTML5 and CSS前にwise9にフロア分割による迷路生成の記事がありましたね。 迷路生成にはいくつも方法がある…

enchant.jsでの文字入力

twitter見ていたらenchant.jsで文字の入力処理をどうやるか悩んでる方がいらっしゃったので、ちょっと作ってみました。enchant.jsでの文字入力 - jsdo.it - share JavaScript, HTML5 and CSSはい。コードを見てもらえば分かる話ですが、Label.textにformとin…

setTimeoutの話

まーenchant.jsに限る話ではありませんが。一定時間後にある関数を実行してくれる「setTimeout」、便利ですよね。 私も結構使っています。 ですがこの関数、ちょっと使い方にコツがあるんです。 例えば以下のようなクラスがあったとします。 TScene = enchan…

enchant.jsにおけるEntity表示制御 番外編

2回で終わらせるつもりだったのですが、zIndexいぢっている人を見かけたのでこっちも負けじと続けたいと思います。重要なことなので最初に言っておきます。 zIndexはenchant.jsではサポート対象外のプロパティです! Issue #3: z-indexのプロパティが欲しい…

Entityの表示順について その2

Entityの表示順、第2回目です。まずはinsertBeforeの動きについておさらいしましょう。 というわけでまずはこちらをお読み下さい。 enchant.jsにおけるノードの入れ替え - 416番地OK? んじゃまサンプル1つ目。 Spriteの表示順制御・失敗例 - jsdo.it…

落ちてゆくクマ 〜衝突判定の例〜

twitterのTLで「落ちてきたオブジェクトが床にめり込まないようにするにはどうするか」というお題を見かけました。せっかくなので「Swipe Action !」でやったやり方を書いておきます。まぁロジックとしては、0から1フレームあたりの最大落下距離まで、何か…

Entityの表示順について その1

Entityの表示順に関するツイートが散見されたので、ちょっと書いておきます。enchant.jsの描画は、SceneにaddChildされた順に行われます。 for (var i = 0; i < 5; i++) { var entity = new Entity(); entity.id = i; game.rootScene.addChild(entity); } と…

物理演算-Box2d その2

では昨日の続きです。前回はボールが落ちてゆくだけでしたが、今回は床を生成してボールをはねさせてみましょう。 前回のボール生成の箇所の下に、以下のように追加して下さい(上でもいいですけど)。 // 床の生成 var groundBodyDef = new b2BodyDef(); gr…

物理演算-Box2d その1

Box2dWebの世界へようこそ!今回から数回に渡って、私の備忘録も兼ねてenchant.jsでBox2dWebを利用する手順を書いてゆこうと思います。 先日も書いた通り、enchant.jsには@kassy708さんが作成されたbox2d.enchant.jsがpluginとして提供されています。しかし…

Box2Dへの道

今回作成した「Cat in the Basket」では、物理エンジン「Box2dWeb」に挑戦してみました。enchant.jsには@kassy708さんが作成されたbox2d.enchant.jsがpluginとして提供されています。 最初は私もbox2d.enchant.js利用していたのですが、触れてゆくうちに「や…

enchant.jsにおけるキー追加

enchant.js ゲーム制作 Tips – キーボードでプレイヤーを移動させてみよう!! 斜め移動にも対応してるよん♪ HTML5 enchant.js クラス定義・キー操作enchant.js でのキーボード入力がトレンドらしいので便乗してみます。 というかcloudpackさんのところの記事…

そうだ、ゲームを作ってみよう2

まず「7ならべ」のルールを確認しよう。・デッキから各プレイヤーに1枚づつカードを配る。カードはすべて配り切る。 ・手札に7があるプレイヤーはそれを場に出す。 ・先手から順にカードを出す。 出せるカードは場に出ているカードとつながるもののみ。 …

そうだ、ゲームを作ってみよう1

ゲームを作ってみたい。 でも、プログラミングは多少かじったけどどうすればいいのかわからない、という人は案外多いのではないだろうか。 そんな人を対象に、ゲームの作り方というものを書いてゆこうと思う。ゲーム制作未経験者にお勧めしたいのが、トラン…

隠されたもの

HTML5のaudio要素にはendedという再生終了を告げるイベントとプロパティが存在する。 これらを利用した音声ファイルの連続再生をenchant.jsで行おうとしたら、イベントの反応はないしプロパティはundefinedと返された。なんじゃらほいとenchant.jsの中を覗い…

七夜めぐり

七夜めぐり新作投稿。 運の要素が強いため、すべてのパネルを取れるは時々。 けして取れないわけではない。

DokiDokiスピード!

DokiDokiスピード!全然DokiDokiしないゲームで申し訳ない。 おぢさんとしてはあーんなことやこーんなことを考えていたのだが、コミPo!が思いの外難しい……。だいたいデフォで体操服やスクール水着がないというのは問題だと思う。

今宵の空は…

今宵の空は…位置情報を利用したプログラム。 案の定、9Daysには間に合わなかった。 scaleの使い方難しい…

GPSの世界へようこそ

ようやくgeolocationAPIを使う目処が立った。今回苦労したのはgeolocationAPIのスコープだった。 geolocationAPIで位置情報を取得すること自体はさほど難しいことではない。wise9にもサンプルが載っていたが、まさしくあのコードをソースに貼り付けてやれば…

形にする力

「スイカ割り大会」をつくるにあたって妄想したシステムがある。 プレイヤーのインターフェイスは相変わらずなのだが、あるサイトをのぞくとマップが表示されプレイヤーとスイカの位置がリアルタイムに表示される。ギャラリーは決められたタグを付与してtwee…

衝突判定

enchant.jsには衝突判定の関数が用意されているが、残念ながら透明色が考慮されていない。 例えば公式Materialの「イトカワ」と32x32で抜き出した「はやぶさ」の衝突判定を行うと、見た目上ぶつかっていないのに関数がtrueを返してくる場合がある。 パッと思…

ノード入れ替え、もうひとつ

レイヤーの前後関係を考慮したキャラクター追加方法 - 強火で進めなるほど、CSSを利用する方法があるのか。 ……実はHTMLとCSSのことをよく知らない。HTMLはまだタグを大文字で書いていた時代の知識だし、CSSにいたってはクエスチョンマークが跳び回る体たらく…

Canvasによるゲージ的な何か

enchant.jsでcanvasを使いゲージ的なものを表示する方法をまとめてみる - アンバランスな日々にこちらにいくつかまとめられているが、私が「ミッション!」内で実装した方法がなかったので簡単に紹介しようと思う。 やり方は簡単だ。まずfillRectでバーを描…

enchant.jsにおけるノードの入れ替え

Spriteを最前面に持ってくる関数 / HTML5 enchant.jschildNodesで入れ替えられるんじゃない? と思ったけど無理だった。 childNodes.lengthで子ノードの個数を取得したりできたんで単なる配列と思っていたんだけど、表示のためにかいろいろ裏でやっているっ…