複数の任意時間に於けるコールバックメソッド

ゲーム開発に於いては単位時間の処理が欠かせないものとして iPhoneアプリの製作の際、基本的な統合的開発環境のXcode上での処理について 本ブログに稿をものしたのが以下の2017年3月27日の配信記事でした。

-(void)update:(CFTimeInterval)currentTimeメソッドに於ける任意時間のコールバックメソッド

処で斯くも重要な要素たる単位時間処理は 唯に一箇所のみで必要となるに限られるものでもなく 手元の開発ゲーム バルーンズ・オキュパイ でも複数箇所で利用するに如くはない事態が出来しました。 具体的にはキャラクターの移動処理とバルーン陣地の拡大処理が異なる単位時間に処理されるのが其れで 而して一つでは間に合わない様相を呈したのです。

其処で対処として考えたのが…

"複数の任意時間に於けるコールバックメソッド" の続きを読む

WordPressにJavaScript背景画像スライダーVegasを導入する

デザイン上、問題ないレベルのレイアウトを安易に実現出来るため屡々採られる一部を幅広に取るモデルがあります。

Webページの一部分だけ幅広にするデザインモデルに於いて幅広のメイン画像部分を画像スライダーにするデザインモデル

中でも図示した様にメイン画像の部分を幅広にするだけでなく 其の画像が次々に切り替わる所謂画像スライダーを実現したいと言う要請は決して少なくはないようです。

しかし此の要請の実現に於いては問題が発生します。 画像スライダー部分をページ全体を規定する一定の幅より広く取ると ブラウザの表示時、デスクトップパソコンなどで充分画面サイズが広ければ問題ないのですが 一般にノートPCなどの小さな画面では横幅が収まり切らず横スクロールが発生し、 ちょっとしたことで画面が左右に動き扱い難いだけでなく 此の様なデザインを良しとする向きには許容範囲を超える横スクロールバーが表示されてしまいます。

処で解決のために画像スライダー部分をレスポンシブ対応にすると ブラウザの横表示が狭い場合には横幅はきっちり収まるのですが 縦幅も応じて小さくなってしまい、 他のコンテンツ部分と著しい差が生まれてしまいます。 此の時画像だけならまだしもメイン画像部分には惹句などが記されることも多く 其れ等の文字は極めて読み難い状態が招かれざるを得ません。

此の問題を解決するために…

"WordPressにJavaScript背景画像スライダーVegasを導入する" の続きを読む

Spritekitを利用したゲームAIもどきの実装

今流行りのAI、即ち人工知能とタイトルすれば甚だ釣り気味ですが、 ゲーム作成に於いてはコンピュータにプレイヤーの相手をさせる場合、 大にしろ小にしろ孰れ其の為のアルゴリズムを用意しなければなりません。 其れは手元の開発iPhone専用ゲームアプリ バルーンズオキュパイ でも一般です。

略してバルオキュでは プレイヤーが画面上に風船を膨らませて自陣を拡張しているのに対し 此のゲームでは敵キャラクターとなる うさ犬 兄弟の弟、 はなまる が画面上を所狭しとジャンプしまくりプレイヤーが膨張させつつある風船を割って回る、 と言うゲーム内容になっています。 此の際、はなまるはプレイヤー陣地の確定した部分は避けて飛ぶ必要があります。 また膨張中の風船にはなまるが飛び込めば其の風船は割れてプレイヤーの負けが確定しなければなりません。 此の両者の解決を同時に図る上手い方法はないものかと模索して、 どうやら共に衝突判定が使えるだろうと思い付きました。 ゲームAIに衝突事件を組み込んで実装すればはなまるは確定風船を避けつつ時には膨張中の風船を割りに掛かるだろうと言う目論見です。

Hanamaru and uPanda in iPhone Game Balloons Occpy

衝突判定の実装は一般に難しいと言われる処ですが アップル社がXcodeに用意する2Dゲーム開発フレームワークである SpriteKit には最初から其の機能が用意されているので其れを用いることにします。

"Spritekitを利用したゲームAIもどきの実装" の続きを読む

WordPressで特定親カテゴリーとその子カテゴリー全ての記事一覧を日付順に取得する

WordPress案件でよくある要請にカテゴリー記事一覧の表示があります。 単に特定の単独カテゴリーの記事一覧であれば 其の方法はネット検索すればかなり豊富に見付かります。 此れが複数カテゴリーの記事一覧の表示になると些か其の方法が見付かり難くなるのは カテゴリーの複数化に因る表示のバリエーションが増え、 情報が其々の状況に応じたものに寄せてあって目的に適い難い部分が出てくるからかも知れません。

バリエーションの一つとして此の要請のオプションに於いては屡々 カテゴリーの親子関係を考慮した記事一覧の表示が求められと言う条件が与えられます。 具体的に言えば 複数カテゴリーの其々最新の記事を一つづつ表示したり、 複数カテゴリーを横断して最新の記事を任意数表示したりする条件から、 中には親子カテゴリーを考慮して特定親カテゴリーに属する子カテゴリーの其々の記事一覧を表示したりするものまで なかなか多様な条件に彩られると言っても良いかも知れません。

手元で実現したい条件としては 特定の親カテゴリーの記事一覧と其の子カテゴリー全ての記事一覧を合わせて 中から日付順に表示していく必要があるもので、 此れもオプションとしては要請の度合いが高いものに属するかも知れません。 此の条件を実現しようとすると どうしても複数カテゴリーの記事の全てを取得して 時系列で整列させて上で表示させなければならなくなります。

"WordPressで特定親カテゴリーとその子カテゴリー全ての記事一覧を日付順に取得する" の続きを読む

ゲーム画面を覆うようにforループでNSMutableArrayを生成する

陣取りゲームとして目論む処のゲーム主画面に於いては 陣地の遣り取りの判定のために画面全体を区切る必要があります。 区切った画面各々にプレイヤーの陣地か如何かの判定フラグを持たせ 更には他にも様々に応用して用いる使い勝手の良い 配列 として扱う腹積もりです。 この際ゲーム画面の幅に合わせて区切りを柔軟に保たせるために 可変配列を用いることにします。

可変配列オブジェクト NSMutableArray の概要については iPhoneアプリ開発の虎の巻 のページ NSMutableArray などが参考になるかも知れません。

"ゲーム画面を覆うようにforループでNSMutableArrayを生成する" の続きを読む

Scene受け渡し時の画面サイズの初期化

キャラクターが空を飛んでいるのを表現するのに iPhoneの画面を超えて縦横無尽に飛び回る状況を作り出したい為に上方に上限を設けぬ実装を鑑み Spritekitに於ける座標系を考察したのが以下列挙する本ブログの両記事です。

処が此処に問題の内在が発覚しました。 時折デバッグの為に変数を出力して検討するのは誰もが実行する処でしょう。 2017年5月5日記事 SpriteKitに於ける時間軸に基づく背景グラデーションの独自実装 に記したようにゲームに於いてキャラクターが上空に飛翔すればするほど 宇宙空間に近いた表現で空色を濃く染め上げるのに背景色を変化させたのですが 此の時必要なのはキャラクターの縦軸の位置変数であるのは言う迄もありません。 其の変数とした honmaruPosYRatio の算出法は以下コードとなります。

"Scene受け渡し時の画面サイズの初期化" の続きを読む

WordPressでjQueryを必要とするJavaScriptファイルをjQueryの後に読み込む

世の中フロントエンドと言えばFacebookの提供するフレームワークなどで大規模なものを想起し勝ちとなりましたが まだまだホームページに於ける小規模な実装では jQuery が活躍しますしWordPressの2017年最新版に於いても標準で読み込まれるような実装となっています。 ちょっとしたスムーススクロールやアンカーリンクの無効化などを一部に適用するなどの要請では 特定のページに読み込むだけの実装で済ませられれば大規模なフレームワークでは些か冗長さを免れません。 jQueryを利用すれば此れ等の如きJavaScriptファイルは僅か数行となりますから尚更です。

懐かしのポケコン シャープポケットコンピューターPC-1210
懐かしのポケコン シャープ ポケットコンピューター PC-1210

此れをWordPressの特定ページに読み込ませたりする際には functions.php にWordPressの特有関数 wp_enqueue_script を用いてファイル読み込みを実装するのが定石でしょう。 例えばhomeで関連づけられた wp_register_style を用意して孰れかのタイミングで add_action おけばif文で条件分岐した wp_enqueue_style で読み込めると言った塩梅で実に重宝です。

"WordPressでjQueryを必要とするJavaScriptファイルをjQueryの後に読み込む" の続きを読む

テーブルタグのレスポンシブ対応とiPhoneのフォント指定無効問題

スタイルシートで確りフォントサイズの指定をしているのに iPhoneに限って其の折角の指定が無効になっている場合が多々あります。 確認の為にPCブラウザのエミュレータで見て見ても問題ないのにiPhoneでは想定外のフォントサイズで表示されている事例としては Portraitモード、即ち縦位置で見ている画面をLandscapeモード、即ち横位置にすると 文字サイズがは大きくなる現象は割と知られているのではないでしょうか。 此れはスマホに於けるユーザービリティを考慮して スマホのブラウザでのみ有効な -webkit-text-size-adjust なる属性が用意され効いているのに起因するのも周知されている処だと思います。

しかし例えば自前のブログでは屡々振り仮名を持ちいるのですが 此の時利用する ruby タグで囲った部分には此の属性は効かないようで タグ内に記入した文字は横位置でも縦位置と同じフォントサイズであれば 横位置では思わぬ不揃いの文章表示となってしまうのでした。 此れなどは以下のリンク、サイト ヒビヅレの2011年5月24日の記事などに代表される情報を参照すれば bodyタグ、若しくはフォントサイズを指定する箇所の大枠部分に -webkit-text-size-adjust: 100%; を効かせてやれば解決するのでした。

"テーブルタグのレスポンシブ対応とiPhoneのフォント指定無効問題" の続きを読む

SpriteKitに於ける時間軸に基づく背景グラデーションの独自実装

手元の開発ゲームに於いてキャラクターの縦横無尽に動き回る 背景の空部分の広大な空間を表現するためにグラデーションを用いたく考えました。 青空は単に一様に青いのではなく 青さも位置取りに基づいて薄っすらと変化させたい要請が発生した訳です。

其処でXcodeでグラデーションを描画する実装が必要になり 大凡簡単なものだろうと高を括っていたら案に相違して 其れ程お手軽に実現出来るメソッド等はどうやら用意されていない様です。

SpriteKitに関する情報は余り多くなく 其れでこそ本ブログも幾許かの役立つ情報を提供出来るかも知れない所ですが 残念ながらSpritekitでは現状背景グラデーションに用意されたメソッドは見当たりません。 しかし UIView では幾つか方法がネットに共有されているのを見付けましたので下にリンクを貼り置きましょう。

"SpriteKitに於ける時間軸に基づく背景グラデーションの独自実装" の続きを読む

Spritekitの物理空間で衝突を発生させる為の必須処理と衝突判定とすり抜け

アップル社がiPhoneアプリ開発に提供する2Dゲーム用フレームワーク SpriteKit を開発アプリに適用すればゲーム画面内に物理空間を生じせしめ 内部でオブジェクト同士の衝突の検出を可能にします。

処でアップル社が提供する統合開発環境、 IDE(Integrated Development Environment) 足るXcodeでは補完機能が随分重宝します。 特にスティーブ・ジョブズに依って齎された NEXTSTEP を継承するアップル社の開発環境では長くなり勝ちなメソッド名や変数名などを扱うには 補完機能がないとなると実に不便に感じるものです。

さてSpritekitを利用して開発するゲームに於けるコーディングでは 利用するクラスファイルのヘッダファイル冒頭に以下記述が必要になるのは周知でしょう。 先ずはSpritekitをインポートしなければならないのは言わずもがなです。

"Spritekitの物理空間で衝突を発生させる為の必須処理と衝突判定とすり抜け" の続きを読む