Perl Hobby Programming - Games::BeLike::EightBIT ターミナルで8ビット風ゲームをつくろう

2,819 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,819
On SlideShare
0
From Embeds
0
Number of Embeds
477
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Perl Hobby Programming - Games::BeLike::EightBIT ターミナルで8ビット風ゲームをつくろう

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

×