ラグビーボールを追いかけて

Cocos2d-x JS版(改その1)

プログラム言語そのもののお勉強から最近やっと Ruby のRuby on Rails やPython のDjango のようなWEBアプリケーションのフレームワークの門を叩きました。Python の方がもう少し煮詰まったらDjango はやることにして(植木等さんのそのうち何とかなるだろうのノリ、、)今回はゲームなのです。

Cocos2d-x はゲームエンジンとしてunity と並んで有名なモノなのですが、オープンソースで手が付けやすいし、たまたま書籍を購入していたのでまたまた毛色の変わったボールをもち(テキトーだしすぐに飽きる)突っ込みだした次第なのです。

この Go!Go!gengen33!!は下記の記事を参考にしましたがこの方のブログではUnity と Cocos2d-x のメリットやデメリットも大変詳しく解説してありましてとても参考になりました。

【ゲーム作成】cocos2d-jsで初心者でもできるカンタンゲームを作ってみよう!

前回ざっくりとメインキャラクターだけラグビーボールを追いかけているおじんラガーのアイコンにしたのですが、main.js のところを編集していくとスマホで遊べるゲームがサクッと出来たので感動しました。画像の表示や画像の移動、衝突判定、スコアの表示、敵やアイテムの出現等々が順を追って解説されているのでモノ凄く JavaScript やCocos2d-x JS版のお勉強になりました。

せっかくだからもうひと踏ん張りして、暇なときにスマホで手軽に遊べるように改造計画(改その1)発動なのです。

先ずはラガーアイコンをもう少し小さくして敵との衝突のリスクを減らしました。次に敵の画像をまっくろくろすけをイメージして前回のPart3で使ったBANG画像にしました。ポイントになるコインの画像はPart2のヤカンの画像にしました。

それから敵がバンバン出てきてポイントが稼げないので敵とコインの出現率が1対1.5だったのを両方とも1.5にしました。

これで前回は敵の動きが速すぎて全く得点出来なかったところが改善されました。また改善点が見えてきたら改造計画を発動しますが、少しはこちらも使えるようになったので Part3 は Python版とCocos2d-x JS版の同時進行にしますわ。

◎参考書籍
Cocos2d-x かんたんゲーム開発

ラグビーボールを追いかけて(Cocos2d-x JS版)

Part3(JavaScript版)のPython版への移植はPythonをお勉強中ですから保留状態なのです。まあPythonのほうはコツコツと気長にお勉強を続けて行くとして数年前に購入して放置してあったこちらの本もそろそろ出番が来たようです。

最初にこの本を読んだ時には全くチンプンカンプンで直ぐにコケたんですが、JavaScriptも中級者のところまで来た感がありますし、今回のCocos2dのJavaScript版もサクッと動かせそうなので早速オープンソースのコードをネット上から引っ張ってきて自分流にコードを叩いてみました。main.jsだけいじればスマホでもきっちりと動くのでこれは面白そうです。


Go!Go!gengen33!!

実際にアクセスしてもらうとわかると思いますが、今までのPart2 とpart3 はパソコンだとなんとか操作できたのですがスマホやタブレットでは全く動かすことができませんでしたが、これだとスマホをタップするだけで手軽に遊ぶことができますよね。

part3の現在進行中の横スクロールアクションのいわゆる “エンドレスランナー” はスマホで手軽に遊べそうですから、Part3はCocos2d版も作ってみようと思います。

◎参考書籍
Cocos2d-x かんたんゲーム開発


ラグビーボールを追いかけてPART3(JavaScript版)

今回のPrat3はキャラクターをUPキーでコントロールして、進む洞窟は短冊のような矩形を右側に付け足していくシンプルなものです。キャラクターはラガーアイコンとボールを合体させたものにしました。

 

今回使うキャラクターのアイコンを透過して、オリジナルの洞窟と背景を入れ替えると芝生の上を走ってるイメージになりジャストフィットしますよね。

今回もまたタイプミスが非常に多くて芝生がなかなか育ちません。子要素の芝生(オリジナルでは洞窟)となる80個のdiv が次々と生成されていくはずなんですが、、、

そして何度もソースコードを見直して出来たのがこちらです。↓↓

ラグビーボールを追いかけてPART3(JavaScript版)

芝生の上端か下端にラガーアイコンの上端か下端が達すると衝突と判断されてbang アイコンが出てゲームオーバーになります。

前回のPart2同様にスマホやタブレットでは操作が難しく、なお且つ今回はパソコンで操作してもキャラクターのラガーアイコンが私の人生同様にすぐに降下しちゃいます。(それに加えて私はすぐにスベるタイプです、、)ゲームとして楽しむには障害物を途中に入れたり芝生(洞窟)のカーブを三角関数を使って滑らかにしたりかなり手を入れなければなりませんよね。

今回は主目的がPython の方にあるのでPart2も含めて改良版はもう少し私のプログラミング力が向上してからにしましょうか。(JavaScriptもやっと初心者から中級者になったくらいでまだまだお勉強しなきゃ、、)

 

◎参考書籍
ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング


ラグビーボールを追いかけてPART3(序)

Python の入門書を読んでコードを叩いております。そろそろ飽きてきたので、Ruby → Ruby on Rails のように Django をやろうと思っていましたが、ふと、横スクロールアクションで “ラグビーボールを追いかけてPART3” を作ることを思いつきました。


Pythonプログラミングより)

手持ちのJavaScript を使ったゲームを紹介しているプログラム入門書に横スクロールアクションのゲームのサンプルがあるので、ラガーとボールを一体化したアイコンを動かすものにします。うまい具合にこの本の続編に同じゲームをPython に移植しているものがあり、すでにこの本も購入済みですので、javaScript とPython で動かしてみてその相違点を抑えることもできそうです。

最初に pygame という Python のゲーム用のライブラリを自分のWINマシンでイぢってみました。まずはウインドウの表示です。

pygame は JavaScript のCanvas とAnimation といったところですよね。引き続きPython のサンプルコードを叩きながら、先ずはJavaScript の方の横スクロールアクションのゲームをサンプルを動かしてみて画像をラグビーモードに置き換えたJavaScript 版を作ります。

(JavaScript編に続く、、)

◎参考書籍
ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング

ゲームを作りながら楽しく学べるPythonプログラミング



ラグビーボールを追いかけてPart2 後編

これはいわいる”落ちゲー” と言われている落ち物パズルの一種です。ラグビーボールやヤカンが落ちてきて私のラガー姿のアイコンが左右に動いて追いかけるものです。プログラミング入門のムック本のゲーム特集の中にあるサンプルコードのキャラクターとアイテムと背景を入れ替えただけなので、コードを叩けばサクッと動いて、すぐに遊べると思っていましたが、世の中はそれほど甘いものではありません。

なかなか思うように行かなくて連日Facebookのお友達にボヤいておりました。

ゲームの動くが止まるところやおかしいところでコンソールログを調べて行きましたがほとんどがタイプミスでした。ラガーモードアイコンが出現してマウスを動かすと消えるのはアイテム画像を呼び出すときの “item.png”の ” ” の中に余分なブランクありラグビーボール達を呼び込めずに先に進めないのが原因でした。

すんなり動いてしまうよりはジックリと JavaScript の挙動を検証することができたのでいいお勉強にはなりました。けれどもアイテムをキャッチしたときの音も出ないし、1週間近く悩みましたので不本意なのですが、大学院で画像解析の研究をしていて生意気なことに大学4年の春と秋に国家試験の基本情報と応用情報にパスしているので主要なプログラミング言語のツボをおさえている、ちょっとキモくてヘンな愚息に好物のメロンパンと辛ラーメンのカップ麺を買ってきて叩いたコードを見てもらいました。

2重チェックは重要ですよね。game() が gane() になってるところと sound が saund になっているところがすぐに見つかりました。

ラグビーボールを追いかけてpart2

早速、gengen33ドットコムのTOPページに表示されている追っかけっこの画像の下にリンクを貼り付けておきました。このゲームはマウスで動かすものなのでスマホのタップではかなり難易度が高いです。

ムック本のサンプルコードの画像を置き換えただけなので暇をみてラグビーボールをキャッチした時は “ナイスキャッチ” 300ポイント、野球のボールの時は “違うぅだろぅぅ” 100ポイントと音と得点を変えてラグビーボールが地面についたときに “ノッコン” と笛の音を入れてみようと思います。






ラグビーボールを追いかけてPart2 前編

1年前に JaveScript のお勉強の一環で私のラガーモードのアイコンがラグビーボールのアイコンを追いかけるスクリプトを作りました。壁で跳ね返るところでそのまま突き抜けてしまい跳ね返るようにするのにかなり苦戦しましたが、愚息やなかしまぁ師匠のアドバイスもありなんとか完成、 Canvas と Animation のいい実践勉強になりました。

日経ソフトウエアのムック本 “プログラミング入門” の特集記事第3部の “挫折しないプログラミングの始め方” を読んでいて掲載されているゲームが、ラガーモードアイコンが落ちてくるラグビーボールをキャッチする “ラグビーボールを追いかけてPart2” に応用できそうなので記事を読みながらサンプルコードを叩いてみました。

まずは Canvas の復習も兼ねてグランド上にラガーモードアイコンを表示させます。そして Animation の復習でラガーモードアイコンが左右に行ったり来たりする “ランパス” にしてみます。

ひとりランパス

さあ、いよいよ本番です。このスクリプトは、ゲーム全体を管理する Gameオブジェクトからキャラクターを動かす Characterオブジェクトとラグビーボール等のアイテムを出現させ頭上からランダムに落とす Itemオブジェクトを生成して操作しています。なかなかイメージを理解できないでいる “オブジェクト” のいいお勉強になりそうですわ。

ランダムに出現するアイテムをラグビーボールと野球のボールと何故か “桃” にして、10秒間動きが早くなる “スターアイテム” をラグビーのオールドファンには懐かしの “ヤカン” に置き換えてポツポツとサンプルコードを叩きます。

(後編に続く、、)






ラグビーボールを追いかけて

さて前回の続き、2つの画像が canvas の枠の中を動くソースを見つけてラグビーボールを私のおじんラガーアイコンが追いかけるものを作って自分のWEBサイトのTOPページに置こうと思いましたが枠から出るとなくなっちゃうので悪戦苦闘しておりました。

ソースを引っ張ってきてつなぎ合わせても自分流にカスタマイズすることは難しいので、参考の書籍とドットインストールの canvas 入門の動画を見て ” canvas で画像を表示する、そしてその画像を動かす” ところからお勉強のし直しです。

ボールを持ったらとりあえず突っ込んじゃうので、毎度のことながら足踏みの連続ですよね。

初期値(最初に画像をおく座標)と画像の動く速度を設定するのですが、2つの画像なので Array を使い設定して、IF文では枠の上下左右の端に画像が来たときに反転する(速度に-1をかける)ところに留意してようやく完成となりました。

さて今度はこのスクリプトを “gengen33ドットコム” のTOPページに貼っけなくては。

うーーん。またここで苦労しそうだゾ。






ラグビーボールを転がすぞぉ

私の個人WEBサイト ”gengen33ドットコム” にラグビーボールを私のおじんラガーのアイコンが追いかけているシーンを載せたくて2つのアイコンが動くソースを引っ張ってきましたがこれだと枠をはみ出したら2つのアイコンがどこかに行って帰ってきません。

こんな感じ

IF文で壁にぶつかったら進行方向を逆にする(速度に-1をかける)といいとHTML5のなかしまぁ師匠と愚息にアドバイスをもらいましたが canvas に画像を取り込みその画像を動かすということがすんなりできません。まずは canvas の描画テクそして跳ね返るボールのスクリプトを足元からきっちり勉強しますわ。

理想とするコードを読む(プログラムの動きがわかる)コードを書く(自分流にカスタマイズする)ことができるようになるまでまだまだ先は長いなぁ~