A-Liaison BLOG

2009年8月7日金曜日

cocos2d for iPhone Project Template v0.8 真似して作ってみました

cocos2d導入キット（http://d.hatena.ne.jp/Seasons/20090511/1241990196）としてid:Seasonsさんが公開されているキットを元に、私もcocos2d用のプロジェクトテンプレートを作ってみることにしました。id:Seasonsさん、すばらしいキットをありがとうございます！

今回の作業にあたり参考にしたページはこちら。
http://d.hatena.ne.jp/griffin-stewie/20090315/p1

作成したテンプレートはgitに公開いたしましたので、よろしければ使ってみてください。
http://github.com/akisute/cocos2d-xcode-template/tree/master

■インストール方法
downloadタブから0.8をダウンロードしてきて、解凍したファイルを以下のパスに配置してください。

~/Library/Application Support/Developer/Shared/Xcode/Project Templates

配置後、.gitと.gitignoreファイルを削除してください。削除しないと後からテンプレを使って新しいプロジェクトを作ったときに、これらのファイルがコピーされてしまいgitを使おうとしたときに問題が発生する可能性があります。

■テンプレートの内容
id:Seasonsさんが公開されている0.8beta用のテンプレートを元に、一部自分の気になった箇所を自分好みに修正しました。また、使用するcocos2dのバージョンを0.8betaから0.8リリース版に変更しました。一応ビルドして画面が出るところまでは確認しています。ただし、全機能をテストしたわけではないので、一部不具合があるかもしれません！
また注意点として、簡素化のため元のcocos2dや外部ライブラリに付随していたREADMEやドキュメント、LICENSEファイルなどをすべて削除してしまっています。おそらくは大丈夫だと思いますが、ライセンス的に問題が発生するかもしれません。大変申し訳ありませんが、このテンプレートを利用した際に生じる一切の不具合について当方では責任を負いきれませんのでご了承ください。

■id:Seasonsさんのテンプレートから変更したところ一覧

使用するcocos2dのバージョンを0.8リリース版にした。
プロジェクトのグループ構成およびディレクトリ構成を変更した。この変更により、本来システムが利用する/Developer/Platforms/iPhoneOS.platform/Developer/Library/Xcode/Project Templates/Application以下ではなく、ユーザーのライブラリである~/Library/Application Support/Developer/Shared/Xcode/Project Templates以下にテンプレートを配置しても動作するようになった。
MenuSceneとGameSceneが最初のテンプレとして用意されていたのを統廃合し、MainSceneひとつだけにした。
ビルドの設定を必要に応じて変更し、またGCC_PREPROCESSOR_DEFINITIONSにDEBUGを追加した。これにより最初からデバッグビルド時にCCLOGマクロが正しく機能する。
ソースコードのインデントがまちまちになっていたのを、すべてApple式のインデントに修正。
ソースコード中から日本語コメントをすべて除去し英語コメントに置換。
一部使用されていたdepreciatedメソッドを除去。[[Director sharedDirector ] setDeviceOrientation:CCDeviceOrientationLandscapeRight];を使うようにした。

■思わぬ収穫
この作業によってXcodeの仕組みとテンプレートの作り方、ビルドの仕方などにかなり詳しくなることができました。たとえば・・・

Xcodeのテンプレートファイルは単なる普通のXcodeプロジェクトと何ら変わらない。そのままビルドして実行することもできる。
唯一異なる点が、xcodeprojバンドルの中に、TemplateIcon.icnsとTemplateInfo.plistというファイルが存在し、これらを変更することでテンプレートとしての設定を変更することが出来る点。
libhogehoge.a（静的ライブラリ？）の作り方。ターゲットに新規ターゲットを追加して、必要なソースをぽいぽい投げ込むだけ。antでbuild.xmlを書くより簡単。
___PROJECTNAMEASIDENTIFIER___.pchの配置パスを変更したときは、ターゲットのビルド設定のPrefix Headerの値を書き換える必要がある
同様に、___PROJECTNAMEASIDENTIFIER___-Info.plistのパスを変更したときも、ターゲットのビルド設定のInfo.plistファイルの値を書き換える必要がある
main.mは何処に置いておいても大丈夫らしい

ということで、Xcodeプロジェクトのテンプレートを作成するのは凄く勉強になります。皆さんも一度自分好みのテンプレートを作成してみてはいかがでしょうか？

2009年8月4日火曜日

cocos2d for iPhoneをためしてみました

YourTurnが一段落したので、今度は前々から一度やってみたかったゲームにチャレンジしてみようと思い、cocos2d for iPhone(http://code.google.com/p/cocos2d-iphone/)を使い始めました。cocos2d for iPhoneとは、iPhone上で簡単に2Dのゲームを作成するためのフレームワークです。FPS管理、アニメーション、パーティクル、シーンの管理およびアニメーション付きの切り替え、メニュー、タッチおよび加速度イベントの管理など、ゲームに必要な要素をほぼすべて網羅してくれています。さらにオプションとしてBGMやサウンドエフェクトの管理と、2D物理エンジンも用意されており、まさに至れり尽くせりといった感じです。

まずは手始めにチュートリアルをやってから、Tic Tac Toe（いわゆるタダのマルバツゲーム）を作ってみました。
ソース全体 http://github.com/akisute/Cocos2DTest/tree/master
ヘッダ部分のみ http://gist.github.com/160244
実装部分のみ http://gist.github.com/160246

この程度の内容のソースでパーティクルも作れるし音も鳴らせるしで、本当に簡単です。ここまで簡単だとRPGツクールより簡単かもしれませんｗ
今までゲームプログラミングの経験が全然無い人のとっかかり用としては最適ではないでしょうか？

2009年7月25日土曜日

Bloggerにretweetボタンを付ける方法

IDEA*IDEAさんで紹介されていた、こちらの記事（http://www.ideaxidea.com/archives/2009/07/retweet_js.html）を参考にして、私のBlogにも早速Retweetボタンを設置してみました。Bloggerでこのボタンを設置するにはちょっとだけ工夫が必要でしたので、私が行った設置方法を簡単にご紹介いたします。

■１．スクリプトを読み込ませる
まずは以下のスクリプトタグを、Bloggerテンプレートの<head>要素内に設置します。

<script src='http://ejohn.org/files/retweet.js'/>

■２．ボタンを配置する
スクリプトタグを置いたら、後はボタンを好きな場所に置くだけです。以下のソースを任意の場所にコピペしてあげてください。

<a class='retweet' expr:href='data:post.url' expr:title='data:title + ": "+ data:post.title' />

たったのこれだけでretweetボタンを配置することができます。いやー便利。

■トラブルシューティング
(1) もし上記のソースをコピペしても動かない！という場合には・・・
コピペする際にソースコード中の

を

& quot;

要するにHTMLの文字実体参照に差し替えてください。
※残念ながら、Bloggerの本文中にこの記号が含められないのです・・・

(2) もしボタンを配置する場所が分からない場合には・・・
コメント欄でご指摘いただいたのですが、Bloggerのテンプレートは長くて複雑で、初めての人には何処に何を置けばいいのか分かりづらいです。ということで、各投稿のフッター欄（post-footer-line）にRetweetボタンを配置するサンプルソースを書いてみました。

    <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>
      <span class='post-ほげほげ'>
      <!-- ここになにやら難しい記述がたくさん -->
      </span>
      <!-- post-footer-line post-footer-line-1の一番最後に追加 -->
      <a class='retweet' expr:href='data:post.url' expr:title='data:title + &quot;: &quot;+ data:post.title' />
      
      </div> <!-- post-footer-line post-footer-line-1 ここまで -->

      <div class='post-footer-line post-footer-line-2'>
      <!-- ここになにやら難しい記述がたくさん -->
      </div>

      <div class='post-footer-line post-footer-line-3'>
      <!-- ここになにやら難しい記述がたくさん -->
      </div>
    </div>
  </div>
</b:includable>

■ちょっとだけ補足説明
http://ejohn.org/blog/retweet/に記載されているコードをそのまま何も考えずに貼り付けると、Retweet先が現在ロケーションバーに表示されている先になってしまいます。

このコードを貼り付けて自分のBlogのトップページなどからRetweetボタンを押してみると、すぐに変だと気づくはずです
<a class='retweet self' href='' />

そこでBloggerのテンプレートXMLの記法を利用して、現在の記事のタイトルとURLを正しく指定してやります。具体的にはexpr:hrefとかdata:post.urlとかです。どうやら、expr:をhtmlの任意の属性に付けてやると、data:post.urlとかdata:titleとかが利用可能になるっぽいです。expr:を付けた属性の中で任意の文字列リテラルを利用したいときは& quot;で文字列を囲み、+で文字列を結合してやることができるみたいです。

登録: 投稿 (Atom)