Japanino(大人の科学付録)と魚釣りゲーム

大人の科学マガジンに Arduino の互換機「Japanino」と「光残像キットP.O.V」が付いてくるということで早速購入して組み立てたところ、これでなんか軽くやってみたいなと思っているうちに、それらを使った「魚釣りゲームコンテスト」なるものがあるという事なので、簡単なゲームを作って応募してみました。

作ったゲーム「カニ漁」はwonderflのサイトにアップしてるのですが、「光残像キットP.O.V」がないとPLAY出来ない為、PLAY中の動画をアップしました。


ゲームは昭和初期のオホーツク海という設定です。
船にカニが入ったら「光残像キットP.O.V」にカニが表示されるんですが、分かり難いというかこの動画では全然カニに見えませんねw
解像度が15×7ドットなのでこんなもんでしょうか。

今、思いついたんですけど、ハンドルを回すとゴマのパーティクルが落ちる「バーチャルゴマすり」とかどうでしょう?
需要ありますでしょうか?

※「魚釣りゲームコンテスト」の応募は7月14日で締め切られました。

[追記:2010.7.27]
応募期間が延長されました。

大人の科学マガジン Vol.27(8ビットマイコン)
大人の科学マガジン Vol.27(8ビットマイコン)

付録:「Japanino」 と 「光残像キットP.O.V」

書籍を表示するスクリーンセーバー

PasteBook ScreenSaver を作りました。

まず、貼り絵がペタペタと始まります。

モチーフは amazon.co.jp で販売されている書籍の表紙です。

どういった書籍が表示されるかというと、登録した検索ワードで検出された書籍の「出版日が新しい順」や「売れている順」の上位30位の中からランダムで選出したものになります。

10分ちょっと経ったらこんな感じになります。

本の詳細ページ(amazon.co.jp)へのリンクにアフィリエイトタグを付けてるんですが、トータルで1冊でも売れるといいなー。へへ。
目ぼしい本が表示された時は迷わずGETしましょう!

スクリーンセーバーのサンプル動画&ダウンロードはこちら↓
PasteBook ScreenSaver

AS3デバッグツール Debush の使い方

■前書き
Flashのデバッグは、ほとんどtrace()でやってるんですが、
たまにEnterFrameで値の変化を確認したい時とか、Flash Tracer(FireFoxでtraceの出力が確認できるFireFoxのアドオン)が入ってない環境で値を確認したいときもあると思います。
そういう時は確認用のTextFieldを作って値を表示させれば済むのですが、毎回それをやるのはめんどくさいです。
特にTextFieldのインスタンスをグローバルインスタンスにしたりしていると負担になり心臓に悪いです。
(みなさんは実は僕の知らない便利ツールを使ってサクッと済ませてるんでしょうか?)
そこで、毎回めんどくさいなら、すぐに値をチェックできるツールを作ってしまえということで、デバッグツール Debush(デバッシュ)を作りました。

■ダウンロード
Debush ダウンロードページ

■使い方1:基本
下の黒いエリアはSWFです。その内、黄色いパネルがDebushのエリアです。
黄色いパネルの左上部を掴んで移動させることもできます。


このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Adobe Flash Player を取得


下のコードは、上のSWFのドキュメントクラスです。
赤字の部分がDebushを表示させる為の部分です。
Debushをnewで呼び出した時の引数はdebushHandler関数をどこに置くかという指定です。
debushHandler関数内に表示したい値を記述していきます。
props配列内の(0番から始まるとして)偶数のString型の値が説明で、その偶数の値の次の値が表示したいプロパティです。
2つで1ペアになります。props配列内の値の数は好きなだけ増やせます。

package {
	import flash.display.Sprite;
	import debush.Debush;

	public class Main extends Sprite {

		public function Main() {
			addChild( new Debush(this) );
		}

		public function debushHandler(recordMode:String):void {
			var props:Array = [
				"mouseX", mouseX,
				"mouseY", mouseY,
				"ball.alpha", ball.alpha,
			];
			Debush.update(props, recordMode);
		}

	}
}

 

■使い方2:記録する
下のSWFでは1秒に1回、record関数を呼び出して緑のエリアにその瞬間の値を記録しています。
赤のrecordボタンを押しても緑のエリアにその瞬間の値を記録します。
緑のreceiveボタンはトグルボタンになっていて、ボタンが緑色の時はrecord関数の呼び出しに応じますが、ボタンがグレーの時はrecord関数の呼び出しに応じません。


このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Adobe Flash Player を取得


下のコードは、上のSWFのドキュメントクラスです。
赤字の部分がrecord関数の呼び出しです。static関数なのでクラス名で呼び出します。

package {
	import flash.display.Sprite;
	import flash.utils.Timer;
	import flash.events.TimerEvent;
	import debush.Debush;

	public class Main extends Sprite {

		private var timer:Timer = new Timer(1000, 0);

		public function Main() {
			addChild( new Debush(this) );

			timer.addEventListener(TimerEvent.TIMER, timerHandler);
			timer.start();
		}

		public function debushHandler(recordMode:String):void {
			var props:Array = [
				"mouseX", mouseX,
				"mouseY", mouseY,
				"ball.alpha", ball.alpha,
			];
			Debush.update(props, recordMode);
		}

		// タイマーハンドラ:1秒に1回呼ばれる
		private function timerHandler(e:TimerEvent):void {
			Debush.record();
		}
	}
}

 

以上がDebush 1.0.0 の機能の全てです。

加速度センサーで演奏

上の映像で、PCモニタに映っているのはswfファイルです。
手に持っているやつは3軸加速度センサー×FIO×XBee無線モジュールです。
これでswfファイルのスティックの動きをコントロールします。

本当は手に持っているやつの動きとまったく同じ動きが出せれば良かったのですが、3軸加速度センサーからの情報だけでは厳しいようです。
3軸加速度センサーの値からは、XYZの3軸の角度情報が割り出せるので、2軸分の角度情報だけを使ってswfのスティックを動かしています。

加速度センサーとFIO

2軸分の動きしかしないんだったら特にflashを3Dにする必要もなかったんですがね。
と、後で気付きました。

「オレのふんどしリーグ」制作工程

一球入魂投稿サイト「オレのふんどしリーグ」が公開されて今月で1年になります。
そして更新するのに力尽きて半年になりますw

投稿して盛り上げてくださったみなさん。ありがとうございました。
って終わる訳じゃないですがw

今回は、そんな「オレのふんどしリーグ」公開から一年目にしてやっと、blogという紹介できる場が出来たので制作工程を紹介したいと思います。

■きっかけ
mixiで、お題に対して面白投稿をするコミュを管理していて、そのコミュが一時期盛り上がっていたため、次はFlash版を作ってみようと思ったのがきっかけです。

■見せ方
どうやって面白く見せようかと、喫茶店で一人でジーっと考えていると野球のメタファーを思い付きました。で最高に面白い投稿は“ホームラン”ということにしようと。その時期にYahoo!プロ野球の「打撃ランキング」をよく見ていたのが原因だと思います。そこから一気に見せ方が決まりました。

■ロゴ

A案・B案で迷った末、B案だとグラウンドにいるキャラと見た目がかぶってしまうという理由からA案で行くことにしました。

■イラストとアニメーション
一番楽しい部分ですね。
これは、最初は1コマ目はイラレでペンタブレットを使って描いて、2コマ目からはイラストをFlashに持っていって、オニオンスキンを見ながら直接flaファイル描きました。
キャラのポーズを描くのに重宝したのが↓この人形です。

ジョジョ立ち

ピッチャーがボールの人を投げるシーンは、こんなコマ数になっています。

ボールの人がかなりキモいことになっています

■URL同期
各お題(シーズン)ページごとにflashでURLを与えているんですが、今だとprogressionを使ってやるのが王道だと思いますが、当時はprogressionを使ったことがなかった為、SWFAddressライブラリを使ってURL同期しています。
(ここら辺の技術関連の1年前の状況を紹介していると時間の流れを感じますね。今はprogressionなしじゃ生きて行けません!)

■データベース
flashからphp(pearライブラリ)を経由してMySQLに読み書きするという王道(?)なやり方です。

■気を付けた点

  1. 投稿画面で白と黒のペンツールがありますが、お題自体を黒のペンツールで上から塗りつぶすことができるようにして、お題の絵そのものに手を加えることができるようにしました。それに気付いた時は「裏技を知った」気分になれる機能です。
  2. 投稿の絵をデータベースに保存する際、絵の座標情報をズラーっ並べて保存するのですが、ちょっとでもサーバーのデータ容量を軽くする為(当初は何万投稿もあることを想定していましたw)、座標情報をアルファベットの大文字小文字を使ったオレ流の52進数に変換して保存しました。文字量が2/3程度に減ります。
  3. 投稿画面で絵を描いているときに、描けば描くほどベクターデータが増えて描画速度が遅くなっていくという問題が出た為、一筆描くごとに絵をビットマップ化してベクターデータは消していくと問題解決しました。

■作ってみて
やっぱり更新が大変だと力尽きてしまいますねw
資金面で余裕さえあれば、新しいお題を作ってGoogle Adwordsでppc広告を出すと投稿者が増えて面白いことになりそうだなーとか思ってます。まさにブルジョアの道楽です。

■最後に
投稿はいつでも受け付けてますので一球入稿の投稿お待ちしています。

オレのふんどしリーグ

ABOUT

MY APPLI

サッカーピープル
サッカーピープル

操作のしやすさ最優先の
自由自在なサッカーゲームです
iOS版 / Android版

コロッコトロッコ
コロッコトロッコ

石ころのコロッコを転がしながら
サラリーマンを会社へ運ぶゲームです
iPhone版 / Android版

CATEGORIES

ARCHIVES

TAGS

3Dプリント AIR ANE Arduino Away3D client work DIY Flash Funnel JavaScript Kinect LED openFrameworks PhotoShop Progression Qubicle Unity Xcode アプリ インターバル撮影 カメラ キャラ ゲーム制作 コロッコトロッコ スクリーンセーバー デバッグ フットサル ミニマル ランニング レーザーカッター 事務所 低山部 作品 動物 塗装 展示会 文字 料理 福岡てら子 美食家 街ぶらり 道具 鉄道 電子工作

FEEDS

SNS

--

Arduinoをはじめよう
Arduinoをはじめよう

電子工作が未経験の人にも
分かりやすい入門書

Arduinoをはじめようキット
Arduinoをはじめようキット

上の書籍の内容が
一通り試せるツールセット

Prototyping Lab ―「作りながら考える」ためのArduino実践レシピ
Prototyping Lab

「Arduinoをはじめよう」より
深く掘り下げた内容の実践書

Make: Electronics
Make: Electronics

電子工作の基礎から実践まで