Your SlideShare is downloading. ×
Perl Hobby Programming - Games::BeLike::EightBIT ターミナルで8ビット風ゲームをつくろう
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,035
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,035
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×