Embed Size (px)
DESCRIPTION
Citation preview
Perl Hobby Programming - Games::BeLike::EightBIT ターミナルで 8 ビット風ゲームを作ろうゲーム製作協力 ( 画像提供 ): nekokak 氏
谷内 元 twitter@keroyonn_ / Hokkaido.pm
YAPC::Asia 2011
自己紹介
WEB 系プログラマ in Hokkaido.pm 仕事のメイン： Java/Flex/ExtJS → 最近 Perl 趣味のメイン： C# + WPF + Perl
ちょっとずつ違う素敵な ID 達 cpan : keroyon http://search.cpan.org/~keroyon/ github : keroyonnhttp://github.com/keroyonn twitter : keroyonn_ http://twitter.com/keroyonn_ hatena :keroyon0630
http://d.hatena.ne.jp/keroyon0630
YAPC::Asia 2011
Games::BeLike::EightBITその特徴 ターミナルにグラフィックを描いてゲームをつくれるよ !
(Curses)
8 ビット時代のコンシュマー機と同等以上の解像度でアクションゲームも制作可能
簡単 && perl で全部作れる ( ターミナル上の vim からそのまま実行できる )
スプライト、マップ、スクロール、イベント、キーアップイベントのエミュレーションなど
( 将来項目 ) line & paint スタイルのグラフィックYAPC::Asia 2011
注意事項
テストもドキュメントも例外処理もないし、 API すらまだあまり決めていないよ
CPU 負荷が高いので、本番サーバーに入れて遊ばないでね。
もちろん、新手のワームとして使いたい場合は別だよ !
YAPC::Asia 2011
最近の開発とか
YAPC::Asia 2011
そんなこともあろうかと
最近の開発とか
YAPC::Asia 2011
メモリリークだって直してないよ !
作った動機 1
Perl でも気楽にホビープログラミングがしたい。 特に絵が動いたりするやつ。 Plack とか Router::Simple でオレオレ WAF
とか Web::Scraper とか、ホビープログラミングは気軽にできる。しかし、グラフィックを扱いたい
ゲーム系の書籍に書いてあることが、 Perl で気軽に試せるようにしたかった
YAPC::Asia 2011
最近の開発とか
YAPC::Asia 2011
こういうの
作った動機 2
気楽にできるようにしたい 環境を作るコストを 0 にしたい つまり開発用 VM とターミナルで動いてほしい。 普段はターミナルしか使わないし、
Windows 環境に「そのためにしか使わない」 perl とSDL を入れるくらいなら、 Flash Builder 立ち上げて作る方がむしろ早くて合理的
学習コストを下げたい 面倒な決りごとや、概念を学習しないで使えるように
したいYAPC::Asia 2011
何ができるのか
YAPC::Asia 2011
デモ
最近の開発とか
YAPC::Asia 2011
DEMO: PuTTY の実行画面
Gradius ゴーファーの野望のパロディです。
最近の開発とか
YAPC::Asia 2011
DEMO: PuTTY の実行画面
「トップを狙え」を意識しています。
最近の開発とか
YAPC::Asia 2011
DEMO: PuTTY の実行画面
こちも「トップを狙え」を意識しています。VicPHPer は Vicviper です。
最近の開発とか
YAPC::Asia 2011
DEMO: PuTTY の実行画面
PHPer が悪の PerlMonger を倒すという誰もが納得の勧善懲悪シューティングとなっております。
最近の開発とか
YAPC::Asia 2011
DEMO: PuTTY の実行画面
クトゥルフの二次創作をしたものは破滅すると言われています。あっ ! やば。俺じゃん。
最近の開発とか
YAPC::Asia 2011
DEMO: PuTTY の実行画面
ステージ 1 は「省鯖運用的空間」となっています。
最近の開発とか
YAPC::Asia 2011
DEMO: PuTTY の実行画面
フレームレートが 30 はりつきです。現在の表示スプライト数は 22 個です。
最近の開発とか
YAPC::Asia 2011
DEMO: PuTTY の実行画面
背景の星と手前の地形は一応多重スクロールです。
最近の開発とか
YAPC::Asia 2011
DEMO: PuTTY の実行画面
ボスが後方から高速で飛来して駆け抜けていきます。
最近の開発とか
YAPC::Asia 2011
DEMO: PuTTY の実行画面
点滅するワーニング。登場するボスは、ビッグ鯖でんな。
最近の開発とか
YAPC::Asia 2011
DEMO: PuTTY の実行画面
目玉がコアになっています。ビックコアは青白く、銀色に光り鯖に似ているなーと思いました。
簡単なゲームを作ってみるその 1 準備
Github で落してインストール https://github.com/keroyonn/p5-Games-
BeLike-EightBIT perl Makefile.PL make make install 注意：▪ ドキュメント、テスト、例外処理がなく、 API も
決定していません。タグづけもしてません。▪ 依存モジュールは、 Curses と
Class::Accessor::Fast です。 YAPC::Asia 2011
今回作るゲーム
YAPC::Asia 2011
デモ
最近の開発とか
YAPC::Asia 2011
DEMO: PuTTY の実行画面
高品質なことでは定評のあるシンプルシリーズをつくってみましょう。
最近の開発とか
YAPC::Asia 2011
DEMO: PuTTY の実行画面
シンプルシリーズの名を汚さぬよう精一杯頑張りました !
最近の開発とか
YAPC::Asia 2011
DEMO: PuTTY の実行画面
鬼がアニメーションしながら追いかけてくる !そして鬼につかまると、エラーで停止しまう !
エラー
簡単なゲームを作ってみるその 2 プレイヤーの移動
#!/usr/bin/env perluse Games::BeLike::EightBIT;
my $stage = create_stage('stage1');my $plane = create_plane('stage1:main');my $player_bitmap = create_bitmap()->load_text("111\n222\n333");my $player = create_sprite({bitmaps => $player_bitmap, x=> 20, y=>10});$plane->add($player);
$stage->keymap( { h => sub { $player->{x} -= 2 }, l => sub { $player->{x} += 2 }, j => sub { $player->{y} += 2 }, k => sub { $player->{y} -= 2 }, q => sub { $stage->exit; }, });
$stage->run;
YAPC::Asia 2011
適当なステージ名
ステージ名 : プレーン名
簡単なゲームを作ってみるその 3 敵キャラと当り判定
#!/usr/bin/env perluse Games::BeLike::EightBIT;
my $stage = create_stage( 'stage1', { debug => 1 } );my $plane = create_plane('stage1:main');my $player_bitmap = create_bitmap( undef, [ { x => 0, y => 0, w => 6, h => 3 } ] ) ->load_text("111\n222\n333");my $player = create_sprite({ bitmaps => $player_bitmap, x => 20, y => 10, is_hit => 1 } );$player->on_hit( sub { $stage->exit; } );$plane->add($player);
my $oni_bitmap = create_bitmap( undef, [ { x => 0, y => 0, w => 6, h => 3 } ] ) ->load_text("444\n555\n666");my $oni = create_sprite( { bitmaps => $oni_bitmap, x => 40, y => 10, is_hit => 1 } );$plane->add($oni);
キーマップは省略$stage->run;
YAPC::Asia 2011
当り判定領域
当り判定 ON
簡単なゲームを作ってみるその 4 敵キャラの移動
$oni->animation( 'moving', { type => 'custom', on_frame => sub { my ($sprite) = @_; my $dx = $player->{x} - $sprite->{x}; my $dy = $player->{y} - $sprite->{y}; my $d = sqrt $dx*$dx + $dy*$dy; my $vx = $dx/$d; my $vy = $dy/$d; $sprite->{x} += $vx; $sprite->{y} += $vy; }, })->play;
YAPC::Asia 2011
プレイヤーを追いかける
フレームごとのハンドラ
property, keyframe, customかもしれない
スプライト
簡単なゲームを作ってみるその 5 タイトルの追加 1#!/usr/bin/env perluse Games::BeLike::EightBIT;while (1) { create_title()->run; create_stage1()->run; create_gameover()->run;}
YAPC::Asia 2011
無限ループにする
簡単なゲームを作ってみるその 5 タイトルの追加 2
sub create_title {
# ステージとプレーン my $stage = create_stage( 'title', { debug => 1 } ); my $plane = create_plane('title:main');
# タイトル my $message = create_message({ message => 'The Onigokko', y => 15 } ); $plane->add($message);
$stage->keymap( { 'any' => sub { $stage->exit; }, } ); return $stage;}
YAPC::Asia 2011
文字を描画したビットマップをセットしたスプライトを返す
簡単なゲームを作ってみるその 5 タイトルの追加 3
sub create_gameover { # ステージとプレーン my $stage = create_stage( 'title', { debug => 1 } ); my $plane = create_plane('title:main');
# タイトル my $message = create_message({ message => 'GAME OVER', y => 15 } ); $plane->add($message);
$stage->keymap( { 'any' => sub { $stage->exit; }, } ); return $stage;}
YAPC::Asia 2011
簡単なゲームを作ってみるその 5 タイトルの追加 4
sub create_stage1 {
# ステージとプレーン my $stage = create_stage( 'stage1', { debug => 1 } ); my $plane = create_plane('stage1:main');
省略 ー さっきのメインプログラムがここに全部入る return $stage;}
YAPC::Asia 2011
簡単なゲームを作ってみるその 6 画像を利用する 1
YAPC::Asia 2011
画像は PNG で書き出したものを独自形式 (gb8 形式 ) に変換します。
実績があるのは Fireworks ですが、通常のパターンエディタでも (PNG 書き出しができれば ) いけます。
ゲームの実行ファイルのある場所に、 images/ と patterns/ というフォルダを作成し、 images に png ファイルを入れ、 patterns に gb8 を書き出すのが推奨です。
簡単なゲームを作ってみるその 6 画像を利用する 2
sub create_title {
# ステージとプレーン my $stage = create_stage( 'title', { debug => 1 } ); my $plane = create_plane('title:main');
# タイトル my $title = create_sprite( { bitmaps => create_bitmap('oni_title.gb8') } ); $plane->add($title);
$stage->keymap( { 'any' => sub { $stage->exit; }, } ); return $stage;} YAPC::Asia 2011
独自フォーマット
簡単なゲームを作ってみるその 6 画像を利用する 3
YAPC::Asia 2011
1) ANSI の 256 色カラーテーブル作成 同梱された mk_ansi_act.pl を実行し、
act ファイルを作成する 17 番目の色を (0,0,0) ではなく
(0,0,1) にし、透明色として利用している
簡単なゲームを作ってみるその 6 画像を利用する 4
YAPC::Asia 2011
2) Fireworks で、一枚の PNG に、スプライトを書く 適当なサイズのキャンパスを作成 (800x600 とか ) 前述の act ファイルを最適化パネルにロードする 「未使用のカラーを削除する」のチェックを外す 17 番目の色 (0,0,1) を透明に変更する スウォッチを「現在の書き出しパレット」に変更する → これ
でスポイトできるようになる スウォッチを分離して拡大する ウィンドウメニューで、「ウィンドウを複製」する 複製されたウィンドウをドラッグし、別ウィンドウにして重
ねる 鉛筆ツールと消しゴムツールでパターンを描画する
簡単なゲームを作ってみるその 6 画像を利用する 5
YAPC::Asia 2011
3) PNG8 ビットで 256 色に最適化する マットを透明に変更する 透明は、インデックス透明カラーを利用する 透明色を、 17 番目のカラーに変更されている
ことを確認する各キャラクタにスライスを切り、画像を書き
出す
4) GB8 形式のバイナリデータに変換する 同梱された png2gb8 を実行しする png2gb8 –output pattern/ images/
簡単なゲームを作ってみるその 7 もっと複雑なゲームを作るには 1
YAPC::Asia 2011
sub create_stage1 { my $stage = create_stage( 'stage1', { debug => 1 } ); my $plane = create_plane('stage1:main');
# プレイヤー my $player = Player->new; $plane->add($player);
# 鬼 my $oni = Oni->new; $plane->add($oni);
# キーマップ $stage->keymap( { 'h' => sub { $player->left; }, 'l' => sub { $player->right; }, 'j' => sub { $player->down; }, 'k' => sub { $player->up; }, 'q' => sub { $stage->exit; }, } ); return $stage;}
継承クラスを作成して利用
継承クラスを作成して利用
簡単なゲームを作ってみるその 7 もっと複雑なゲームを作るには 2
YAPC::Asia 2011
package Oni;use base 'Games::BeLike::EightBIT::Sprite';use Games::BeLike::EightBIT;
sub new { my ( $pkg, $args ) = @_; my $self = { name => 'oni', x => 450, y => 190, on_hit => \&_on_hit, is_hit => 1, }; $self = $pkg->SUPER::new($self); return $self;}
簡単なゲームを作ってみるその 7 もっと複雑なゲームを作るには 3
YAPC::Asia 2011
sub _init_bitmap { my $hitareas = [ { x => 0, y => 0, w => 32, h => 16 } ]; my @bitmaps = (); for my $index (1..3) { push @bitmaps, create_bitmap( "oni${index}.gb8", $hitareas); }
return { default => [$bitmaps[0]], walking => [$bitmaps[2], @bitmaps], };}
ハッシュを返す
簡単なゲームを作ってみるその 7 もっと複雑なゲームを作るには 4
YAPC::Asia 2011
sub _init_animation { my ($self) = @_; $self->animation( 'walking‘, { duration => 0.5, repeat => 1 })->play; $self->animation( 'moving', { type => 'custom', on_frame => sub { my ($sprite) = @_; my $player = get_sprite('stage1:main:player'); 省略 $sprite->{x} += $vx; $sprite->{y} += $vy; }, } )->play;}1;
walking ビットマップを勝手にアニメーションしてくれる
今後の展望
YAPC::Asia 2011
テスト、ドキュメント、例外処理 → cpan う p ゲーム開始時のシステムチェック ( 画面解像度、 256 色 ) line と paint を実装して、古くさい懐しいグラフィックを実現 全方向のスクロール ( 実は今横スクロールしか作ってない ) 雛形作成用スクリプトの作成 配布用スプリプトの作成 ( パッケージングしてくれるやつ ) ひらがなとカタカナ、記号の表示 (美咲フォントを組込予定 ) レベル ( マップ ) エディタへの対応 RPG などのゲームを作る際の便利な Util(吹き出しとか ) 公式サイトの開設 ( ゲーム紹介のポータルサイト ) ネットワークとか？ アニメーションのバリエーションを拡充 (easein/out とか ) 年末の Advent Calendar あたりまでに何とかしたい
ご清聴ありがとうございました
YAPC::Asia 2011
