SpriteKit.jp : Sprite Kit 日本語情報サイト

アレンジしやすそうなオープンソースのカジュアルゲーム「ColorWheel」

2018-08-17T00:00:00+00:00

GitHubで良さそうなゲームを見つけました。

https://github.com/AngelaRucci/ColorWheel

こんな感じで降ってくるボールと回転するホイールの色を合わせるカジュアルゲームです。

ColorWheel

このままでも面白いのですが、シンプルなのでいろいろ手を加えやすそうです。

例えば、

タップで回転ではなく指の動きに合わせて回せるようにする
ボールを跳ね返るようにする

など。

FlappyBirdは実装がお手頃で、今でもいろんな題材に使われていますが、このゲームもそういう用途にいい感じだと思います。

これを元にして、久しぶりになにか作ってみようかな。

sceneDidLoad()を知らなかった…

2018-03-15T00:00:00+00:00

2018年3月1日〜2日にtry! Swift TOKYO 2018が開催されました。

https://www.tryswift.co/events/2018/tokyo/jp/

僕は残念ながら参加できなかったのですが、giginetさんによるSpriteKitの講演があり、SpriteKitファンとして楽しみにしていました。

聞き起こしは以下で閲覧できます。（後日講演の動画も公開されるはずです）

http://niwatako.hatenablog.jp/entry/2018/03/01/172744

SpriteKitの概要を掴むには良いと思いますので、これから触ってみるという方は是非ご覧ください。

それでは、本題です。

スライドの中でsceneDidLoad()というメソッドが出てきました。
「え？UIViewControllerのviewDidLoad()的なもの？？そんな便利なものあったの？」とびっくりました。

ドキュメントを見ると確かにありました！

https://developer.apple.com/documentation/spritekit/skscene/1645216-scenedidload

iOS 10.0+

iOS 10から追加されていたようです。気付かずにずっとdidMove(to:)を使い続けていました…。
（こちらはiOS 7からある）

今度からSceneの読み込み直後に行ないたい処理はdidLoadを使おうと思います。

最近気になったSpriteKit/GameplayKit関連の記事 #8

2017-07-03T00:00:00+00:00

前回の更新からかなり時間があいてしまいました。

Simplifying iOS Game Logic With Apple’s GameplayKit’s Rule Systems – Smashing Magazine
GameplayKitを使ったパズルゲーム。
【GameplayKit】GKRuleSystemで複雑な条件を管理する - しめ鯖日記
GKRuleSystemの説明。
ゲームの「敵」キャラで分かる「人工知能」の作り方（3）：iOS GameplayKitのRule SystemsでゲームAIプログラミングはどう変わるのか (1/2) - ＠IT
気になる連載の第3回です。
AppleWatchKitとSpriteKitでスペースシューティングゲームを作ってみた - Qiita
Apple Watchでゲーム。
stared/science-based-games-list: Science-based games - a collaborative list
科学を学べるゲーム達。
touyou/ARKitSample: ARKitのサンプル
話題のARKit。SpriteKitのサンプルは少ないので助かります。

最近気になったSpriteKit/GameplayKit関連の記事 #7

2017-04-13T00:00:00+00:00

今回もいくつかおもしろそうなものがありました。

ゲームの「敵」キャラで分かる「人工知能」の作り方（2）：SwiftのGameplayKitでAIに追いかける、避ける、逃げる処理を追加するには (1/4) - ＠IT 気になる連載の第2回です。
raywenderlich/SKTUtils: Sprite Kit helper classes and functions. From the book iOS Games by Tutorials. SpriteKitのUtility。12月末にSwift 3化されていた。
efremidze/Magnetic: SpriteKit Floating Bubble Picker (inspired by Apple Music) Apple Music風？のバブルピッカー。

最近気になったSpriteKit/GameplayKit関連の記事 #6

2017-03-18T00:00:00+00:00

久々の投稿。今回も興味深い記事がいくつかありました。

SpriteKit Text Disintegration テキストが崩壊していくアニメーション。おもしろい。
How To Make a Game Like Cut the Rope Using SpriteKit and Swift Cut the Ropeゲームの作り方。
[Swift3.0][iOS][SpriteKit]SpriteKitでテキストを落としたり、ぶっ飛ばしたりした！ - Qiita テキストを吹っ飛ばす。
Build Your Own Flappy Bird game with Swift 3 and SpriteKit | Sweettutos 最近公開されたFlappy Birdの作り方。
mdaskalov/Maze: Create a maze using SpriteKit and SKTileMapNode iOS, watchOS and macOS variants included 迷路の自動生成。watchOSでも動くらしい。

最近気になったSpriteKit/GameplayKit関連の記事 #5

2017-02-04T00:00:00+00:00

nakumKishan/TapCars: Simple 2d Car Game using spritekit in swift3.0 Xcode8 カーゲーム。ライセンス不明。
ios - Using a UITableView in Spritekit - Stack Overflow SKSceneにTableViewを貼る。
SpriteKit Tutorial: Create an Interactive Children’s Book with SpriteKit and Swift 3 子供向けの絵本アプリを作るチュートリアル。
ゲームの「敵」キャラで分かる「人工知能」の作り方（1）：iOS GameplayKitの「Agents, Goals, and Behaviors」で作る、鬼ごっごの鬼AI (1/3) - ＠IT 新連載。期待。

最近気になったSpriteKit/GameplayKit関連の記事 #4

2016-12-25T00:00:00+00:00

今回はわりと収穫がありました。

Swift 3 Game Development - Second Edition | PACKT Books 来年1月発売予定。5ドルセール中です。
8 Free Apple Game Framework Tutorials Updated For Swift 3 8つのチュートリアルがSwift 3化されました。
How To Make A Game Like Color Switch with SpriteKit and Swift さらに新しいチュートリアルも追加。

最近気になったSpriteKit/GameplayKit関連の記事 #3

2016-12-05T00:00:00+00:00

iOS 10もリリースから2ヶ月以上たち、毎年この時期だけ盛り上がるSpriteKit関連の情報が減ってきたようです。というわけで、今月はあまり気になるものはありませんでした。

以下はiOS開発全般の話ですが、今月メモした記事です。

In-App Purchase Promo Codes Now Available . - News and Updates - Apple Developer アプリ内課金アイテムのプロモコードが発行できるようになったようです。
Shaps  on Twitter: "ProTip: Why debug with print when you can dump? dump uses Mirror for introspection. #swift #iosdev #protip #xcode https://t.co/jAdCX3AJc6" dump知らなかった。printより便利な場面ありそう。

最近気になったSpriteKit/GameplayKit関連の記事 #2

2016-11-06T00:00:00+00:00

swift - Are their any guarantees made as to which body is bodyA and bodyB when didBegin(_:) is called? - Stack Overflow
didBegin(_:)をパターンマッチでリファクタリング。よさそう。
ios - Restarting Sprite - Kit Game Swift - Stack Overflow
ゲームをリセットするいい方法は？という質問に対して、Sceneを作り直せば？との回答。単純だけど、なるほど…。
objective c - How to make native (realtime) blur in Sprite-Kit? - Stack Overflow
scene.filterにCIFilterを設定してリアルタイムにblurをかける。使えそう。
Cross-Platform SpriteKit // Speaker Deck
watchOSやmacOSについても触れられている。
Let’s Make Pong! (Pt. 1 : Swift 3 in Xcode : SpriteKit) - YouTube
Pongクローンを作る動画チュートリアル。
How to Make a Waiting Game Like Farmville with SpriteKit and Swift
放置ゲームを作るチュートリアル。Swift 3にアップデートされた。

最近気になったSpriteKit/GameplayKit関連の記事 #1

2016-10-08T00:00:00+00:00

[Swift] SpriteKit SKEffectNodeで画像をぼかす（ブラー効果） | はじはじアプリ体験記お手軽。この記事の他にも入門に役立つ記事満載。
sprite kit - Adding Collision Detection to SKTileMapNode - Stack Overflow SKTileMapNodeにPhysics設定したいという話。今はダミーのNodeを作る方法しかなさそう？
SpriteKit.com 今更ながら…英語のSpriteKit関連情報のまとめ。便利です。

GameplayKit SandboxにGKNoiseのサンプルを追加しました

2016-09-26T00:00:00+00:00

昨日も少し触ったGKNoiseのサンプルをGameplayKitSandboxに追加しました。

GameplayKitのドキュメントを見ると、GKNoiseSourceのサブクラスは9つ用意されています。
そのうち、GKCoherentNoiseSourceは抽象クラスなので除外して、他の8つを並べてみました。

GKNoiseSource

Constantが単色でおや？と思いましたが、他のものと組み合わせて使うようです。

https://developer.apple.com/reference/gameplaykit/gkconstantnoisesource

今回はあまりいじっていませんが、それぞれのソースごとにいろいろと設定できるパラメータがあり、生成されるノイズを変化させることが可能です。
わかりやすい例で言うと、Checkerboardの四角形のサイズが設定できます。

iOS 10の新機能にもだいぶ慣れてきたので、実際のゲーム開発に使ってみたいところです…。

SpriteKit, GameplayKitのiOS 10新機能つまみ食い

2016-09-25T00:00:00+00:00

遅ればせながら、WWDC 2016の

を見ました。
プログラミングガイドが更新されないので、正式リリース後も概要を掴むにはWWDCの情報が頼りです。

その中で気になった、

SKTileMapNode
SKWarpGeometryGrid
GKNoise

の3つを無理やり組み合わせて使ってみました。

What's New in SpriteKit on iOS 10

マップを描画してるのがSKTileMapNode
移動の時に円の形を変えてるのがSKWarpGeometryGrid
周囲に壁のようなものがGKNoise

です。

ソースコードはこちらです。

https://github.com/tnantoka/What-s-New-in-SpriteKit-on-iOS-10

GKNoiseについては、GameplayKitSandboxにも後日サンプルを追加する予定です。

GameplayKit Sandboxをアップデートしました

2016-09-20T00:00:00+00:00

Xcode 8で動かなくなっていたので、Swift 3に書き換えました。
と言っても、ほとんどXcode 8の自動変換ですが…。

https://github.com/tnantoka/GameplayKitSandbox

なんとこのレポジトリ、iOS SDKとSwiftで始めるゲーム作成入門（3）：iOS 9の最新機能で自動ルート検索を簡単にゲームに組み込む (3/3) - ＠IT で紹介されていました。
ありがとうございます。
（久々にゲーム作りたいなぁと思ってSpriteKitを復習していたら自分のrepoが出てきたのでびっくりしました。）

約1年ぶりの更新なのに内容薄くてすみません…。

ゲームロジック用フレームワーク「GameplayKit」のサンプルを作成しました

2015-10-03T00:00:00+00:00

tvOS向けに何か作れないかなぁとドキュメントを眺めていたら、

DemoBots: Building a Cross Platform Game with SpriteKit and GameplayKit

DemoBots is a fully-featured 2D game built with SpriteKit and GameplayKit

なる記載が。ん？GameplayKitってなんだ？？

調べてみるとゲームのロジック部分を書きやすくしてくれるフレームワークらしい。今年はWWDCとかの情報全然追えてなくて知らなかった。

ちょっとドキュメント読んでみたけど、すぐには理解できる気がしなかったので、サンプルを作ってみることに。

GameplayKitには7つの主要な要素があるため、その1つずつにサンプルを作成しています。
以下がその一覧と簡単な説明です。

ソースコードはtnantoka/GameplayKitSandboxで公開しています。

Randomization

ランダムな数値を得るためのUtility。

ランダム度合いとパフォーマンスの違う3つのRandomSourceがある。
取得する数値のばらつきが違うDistributionも3つ用意されてる。
よく使うと思われるサイコロ用にはGKRandomDistribution.d6()等も。

サンプルでは各SourceとDistributionを使って取得したランダムな数値を元に、点を円状に並べています。

Randomization

今考えると、円の半径が違って微妙にわかりづらい…

Entities and Components

game - オブジェクト指向でゲームを作るのをやめよう - Qiita で言及されているような、コンポーネント指向でゲームを作る仕組みです。

サンプルでは、

表示
攻撃（回転するだけ）
ユーザー操作
AI（ランダムに移動するだけ）

の4つのコンポーネントを用意して、プレイヤー・敵・ボスにそれぞれ必要なものを割り当てています。

Entities and Components

State Machines

ステートマシーンです。状態遷移を簡単に管理できます。
サンプルでは、家のオブジェクトに対して

乾いている
燃えている
濡れている

の3つの状態を用意しています。
また、「濡れている時は燃えない」という条件をisValidNextStateで実装しています。

State Machines

The Minmax Strategist

ミニマックス法を実装しやすくしてくれる仕組みです。

サンプルはマルバツゲームで、相手のリーチの数が多くなるとスコアが低くなるようにしています。
（なのでAIはこちらのリーチがなるべく少なくなるように動きます）

The Minmax Strategist

Pathfinding

障害物を避けて通る、迷路を抜けて出口に向かうなどの経路探索が簡単に実装できます。
サンプルでは障害物を避けて、ターゲットに向けてボールを飛ばしています。
（Pathfindingによって見つけたPathに赤い線を引いてます。）

Pathfinding

Agents, Goals, and Behaviors

自律的に動くオブジェクトを実装しやすくする仕組みです。
サンプルではランダムな動きをするターゲットを、他のオブジェクトが追いかける動きをしています。

Agents, Goals, and Behaviors

Rule Systems

予めルールを設定しておき、現在のゲームの状態がそのルールにマッチするか判定する仕組みです。
サンプルは、お掃除ロボットにしました。
充電残量が30%以下になるか、充電器から離れすぎると充電しに行くルールで動いています。

Rule Systems

参考文献

感想

実際触ってみたら、ドキュメント読んでるだけの時よりだいぶわかった気がした。
ただ、ComponentsやState、Agents、Rule Systemあたりは役割分担やクラスの分け方など、使いこなすには経験が必要そう。

Apple Watch対応のミニゲームアプリ「反転一色（Flip One Color）」をリリースしました

2015-05-23T00:00:00+00:00

初めてWatchKitを使ったアプリでしたが、無事審査を通過しました。
所謂ライツアウトのクローンです。

iPhone

Apple Watch

無料です。暇潰しによろしければどうぞ。

ソースコードは以下で公開しています。（Swiftです）

tnantoka/FlipOneColor

名前の由来

最初は各パネルをクリックしたら反転するアニメーションをさせるつもりだったため、Flipと付けて、後は響きで決めました。日本語は英語名を元に適当に翻訳しました。
その後、WatchKitでのアニメーションはかなり面倒（連番の画像を用意しないといけない）ということがわかり断念しましたが、名前はそのままにしました。

SpriteKitの利用箇所

今回のアプリは全体をUIKitで構築し、ホーム画面の一部にSKViewを貼って、そこだけSpriteKitにしました。

該当のSceneのソースはこちらです。
LightsOutScene.swift

ゲームのロジック部分はWatchKitでも使う必要があるため、LightsOut.swift というモデルを作り、Sceneとは別に実装しています。（SpriteKitはiOSとOS Xに関しては「Universal」ですが、Watch OSでは動きません…。）

LightsOutSceneは、ライト数分のSKShapeNodeを持っています。処理としては、タップされる度にその情報をLightsOutモデルに渡し、その状態に合わせて各ノードを更新する、というシンプルなことしかやっていません。 WatchKit側を作った後だったのもあり、SpriteKitのお手軽さを改めて感じました。

Realm

以前から興味のあったRealmをスコアの保存部分に使っています。

該当のコードはこれだけで、CoreDataやFMDBを使うよりはるかに簡単（おまじないが少なくて済む）でした。ゲームも何かとデータベース必要なので、これからはRealmを使っていく予定です。

モデルはこの数行を書くだけです。
Score.swift

スコア保存処理はこんな感じで書けます。

func addScore() -> Bool {
    let moves = lightsOutScene.lightsOut.moves
    let level = lightsOutScene.lightsOut.level
    
    let score = Score()
    score.moves = moves
    score.level = level
    score.createdAt = NSDate()
    
    let newRecord = Score.isNewRecord(moves, level: level)
    
    let realm = RLMRealm.defaultRealm()
    realm.transactionWithBlock({ () -> Void in
        realm.addObject(score)
    })
    
    return newRecord
}

iPhoneでPopover

iOS 8からポップオーバーがiPhoneでも使えるようになったということで、今回レベル選択に使ってみました。
簡単でよかったです。

以下のページが参考になりました。

Apple Watch対応ゲーム、楽しいのでまた何か作ろうと思います。
WatchKit関連でハマったことなどはQiitaに書いています。

それではよろしくお願いします。

TetloopがMOONGIFTさんで紹介されていました

2015-05-09T00:00:00+00:00

Tetloop - 隙間を通し続けるシンプルなゲーム MOONGIFT

本サイトの更新が滞っておりますが、現在申請中のゲームがリリースされたらまたソースコードを公開する予定です。

「SwiftとSprite Kitでボイド」を書きました

2014-09-24T00:00:00+00:00

以前、iOS Advent Calendar 2013に投稿した、Sprite Kitでブロック崩しが結構集客してくれたので、当サイトの更新再開を記念（？）して再びQiitaで記事を公開しました。

SpriteKit - SwiftとSprite Kitでボイド - Qiita

Boids

やっぱり人工無脳とか人工生命とか面白いので、こういうのを活かしたゲームも作ってみたいです。

iOS 8で追加されたSprite Kitの新機能をつまみ食い

2014-09-23T00:00:00+00:00

iOS 8ではSpriteKitにかなり変更が加えられました。

概要はWhat’s New in iOS: iOS 8.0に、詳細はSpriteKit Changesにまとめられています。
日本語だと、iOS 8 for Developers - Apple Developerに少しだけ記述があります。

※ ちなみに、iOS 7.1での変更点はiOS 7.0 to iOS 7.1 API Differencesにあり、ほんの少しだけです。

今回は、3D関連や物理エンジン、アニメーション関連など多数のアップデートがあり、Nodeの種類も増えました。

また、XcodeのGUIでシーンのコンテンツも編集できるようになりました。
（Gameテンプレートを利用してプロジェクトを作成すると、sksファイルが用意されていてGUIでそのまま編集可能になっています。）

正直な所、変更点が多すぎて全て追えていないのですが、気になったものをいくつか触ってみました。

SKFieldNode

Fieldは「場」といったところでしょうか。バネや放射状の物理効果を与えることができるようです。

かなりいろいろなことができるようで、まだ把握しきれていません。ひとまず箱の周りを円がバネっぽく動くサンプルを作りました。

SKFieldNode

SKLightNode

光を追加するノードです。ドラクエの松明的な表現が簡単にできそうでありがたいです。サンプルでは画面右上に置いています。

箱は光を受けているのがわかると思います。円は光の影響を受けていません。（SKSpriteNodeはlightCategoryBitMaskが設定できため。どうやらSKSpriteNodeにしか適用できないようです。）

SKFieldNode

SKView#showsPhysics

Nodeに設定したSKPhysicsBodyを枠線で表示してくれる機能です。 iOS 7.1で追加されていたようです。知りませんでした。これでようやく他の物理エンジンと同じように、物理体を目で確認しながらデバッグできるようになります。
色がかなり見づらいのが気になりますが…。

showsPhysics

今回はここまで。ソースコードはこちらです。
sj-posts-apps/iOS8Features at master · tnantoka/sj-posts-apps

他の作業をする中で新機能を触ることがあれば、また追記します。

iOS向けミニゲームをリリース＆ソースコードを公開しました

2014-09-19T00:00:00+00:00

以前は初作品としてRPGを作ろうとしていたんですが、
いきなり規模が大きすぎたのもあり断念してしまいました。

今回はとにかくストアにリリースすることを目標に、小さなゲームを作ってみました。

おそらく最後のObjective-Cアプリになると思います。
次からはSwiftで書く予定。

Tetloop

某パズルゲームの棒を主人公（？）にしたゲームです。
ひたすらブロックを消していくだけの単純なものです。

トイレや電車での暇つぶしにでもどうぞ。

ソースコードは以下に公開しています。

tnantoka/teloop

特別なことは何もしていませんが、実際にストアに並んでいるアプリのソースなので、参考になる点があるかもしれません。
※ 音楽やフォントなどの素材は取り除いていますのでご了承ください。

楽をするために、ゲーム画面とオープニング画面以外はUIKitで実装しています。
（ボタンの処理や設定画面の作成をSprite Kitでやると手間のため）

需要があれば解説記事とかも書きたいと思いますので、
ここなんでこんなことしてんの？とかあればお気軽にどうぞ。

それでは、よろしくお願いします。

「Sprite Kit iPhone 2Dゲームプログラミング」を読みました

2014-09-17T00:00:00+00:00

現時点で日本語唯一のSprite Kit本を読んでみました。

Sprite Kit iPhone 2Dゲームプログラミング

以下の3つのサンプルゲームの作り方が入った実践的な内容になっており、この1冊を読めばカジュアルゲームをリリースできるところまでいけると思います。

シューティングゲーム（落ちてくる隕石をミサイルで迎撃）
レースゲーム（他の車にぶつからないように走る）
アクションゲーム（襲ってくるゾンビを忍者が手裏剣で倒す）

個人的に最もためになったのは、

第4章のパーティクルの実践的な使い方
第5章のゲーム全体のフローの設計

の2つの内容でした。

パーティクルは、本サイトも含め「Xcodeでsksファイルを作って、それをSKEmitterNodeに読み込めばほら簡単」という説明で終わっているものが多いんですが、この本ではロケットの噴射に見せかける例を使って、実践的なカスタマイズが紹介されています。

フロー設計については、UIKitと組み合わせるのか、全部Sprite Kitで作るのか、それぞれのメリット・デメリットなどがわかりやすく解説されています。

というわけで、オススメの1冊です。

更新再開

2014-09-16T00:00:00+00:00

長らく更新できていなかった本サイトですが、 iOS 8時代に突入するこのタイミングで心機一転して、またぼちぼち投稿していこうと思いますので、よろしくお願いします。

エンディング

2013-12-18T00:00:00+00:00

所謂スタッフロール。

設定ファイルで表示する内容を指定します。
（Xcodeのインデントがなんか変で見づらい…）

roll_ending.json

{
    "type" : "roll",
    "roll" : [
              {
              "text" : "Prototype Quest",
              "size" : 24.0
              },
              {
              "text" : "Staff",
              "size" : 20.0
              },
              {
              "text" : "tnantoka",
              "size" : 20.0
              },
              {
              "text" : "Special Thanks",
              "size" : 24.0
              },
              {
              "text" : "Browser Quest",
              "size" : 20.0
              },
              {
              "text" : "mosamosa font",
              "size" : 20.0
              },
              {
              "text" : "Fin",
              "size" : 28.0
              }
              ],
    "speed" : 4.0,
    "next" : "title"
}

これを下から上へスクロールさせながら表示して、終わったらnextで指定されているタイトル画面に遷移させます。

SJRollScene.m

- (void)createSceneContents {

    _labelNodes = @[].mutableCopy;
    
    for (NSDictionary *label in self.sceneData[@"roll"]) {
        SKLabelNode *labelNode = [SKLabelNode labelNodeWithFontNamed:FONT_NORMAL];
        labelNode.text = label[@"text"];
        labelNode.fontSize = [label[@"size"] floatValue];
        [_labelNodes addObject:labelNode];
    }
    
    [self performSelector:@selector(showNextLabelNode) withObject:nil afterDelay:DELAY];
    
}

- (void)showNextLabelNode {
    
    SKLabelNode *labelNode = _labelNodes.firstObject;
    labelNode.position = CGPointMake(CGRectGetMidX(self.frame), 0);
    [self addChild:labelNode];

    CGFloat y;
    CGFloat duration;
    if (_labelNodes.count > 1) {
        y = CGRectGetHeight(self.frame) + CGRectGetHeight(labelNode.frame);
        duration = [self.sceneData[@"speed"] floatValue];
    } else {
        y = CGRectGetMidY(self.frame) + CGRectGetMidY(labelNode.frame);
        duration = [self.sceneData[@"speed"] floatValue] / 2.0f;
    }

    SKAction *moveX = [SKAction moveByX:0 y:y duration:duration];
    SKAction *run = [SKAction runBlock:^{
        if (_labelNodes.count > 1) {
            [_currentLabelNode removeFromParent];
            [_labelNodes removeObjectAtIndex:0];
            [self showNextLabelNode];
        } else {
            self.nextScene = self.sceneData[@"next"];
            [self performSelector:@selector(loadNextScene) withObject:nil afterDelay:DELAY];
            return;
        }
    }];
    SKAction *sequence = [SKAction sequence:@[moveX, run]];
    [labelNode runAction:sequence];

    _currentLabelNode = labelNode;
}

ラベルの移動はSKActionで実施。
移動と次のラベルを表示するアクションをそれぞれ用意して、sequenceにまとめてラベルに適用しています。

できました。

やっぱり最後はFin

だいぶ必要そうな画面はそろってきました。
そろそろ戦闘などのメイン部分に手を出したいと思います。

ソースコード: sj-prototype-apps/SJRolePlaying at master · tnantoka/sj-prototype-apps

「Sprite Kitでブロック崩し」を書きました

2013-12-04T00:00:00+00:00

iOS Advent Calendar 2013 - Qiita [キータ]に出来心で投稿してみました。

iOS - Sprite Kitでブロック崩し - Qiita [キータ]

こんな感じのブロック崩しを作るhello, worldものです。

お時間のある方は目を通してくみてください。

「この記事を読めば、とりあえずSprite Kitをはじめられる」みたいな記事にしたくて、このサイトのチュートリアルに書いたことをコンパクトにまとめようと思ったんですが、結局かなり長文になってしまいました。なかなか難しいですね…。

あと、英訳もしようと思ったんですが全然間に合いませんでした。気が向いたらまた手を加えます。

ただ、

)

の画像はわりと自信作です。 Sprite Kitの登場人物が、なんとなく把握いただけるのではないでしょうか。

さて、次からはまたRPGの製作に戻ります。（年内リリースが絶望的になってきましたが…）

チャプター

2013-11-25T00:00:00+00:00

章とサブタイトルを表示して次のシーンへ進むだけの単純なもの。

設定ファイルでは表示内容とnextを指定。

chapter_1.json

{
    "type" : "chapter",
    "title" : {
        "en" : "CHAPTER 1",
        "ja" : "第一章"
    },
    "subtitle" : {
        "en" : "THE MANIPULATOR & THE SUBSERVIENT",
        "ja" : "利用する者されるもの者"
    },
    "next" : "story_opening"
}

これを画面に表示して、一定時間まった後次のシーンを読み込む。

SJChapterScene.m

- (void)createSceneContents {
    
    SKLabelNode *titleLabel1 = [SKLabelNode labelNodeWithFontNamed:FONT_NORMAL];
    titleLabel1.text = self.sceneData[@"title"][[SJUtilities lang]];
    titleLabel1.fontSize = 28.0f;
    titleLabel1.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame) + MARGIN);
    titleLabel1.verticalAlignmentMode =SKLabelVerticalAlignmentModeBottom;
    [self addChild:titleLabel1];
    
    SKLabelNode *titleLabel2 = [SKLabelNode labelNodeWithFontNamed:titleLabel1.fontName];
    titleLabel2.text = self.sceneData[@"subtitle"][[SJUtilities lang]];;
    titleLabel2.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame) - MARGIN);
    titleLabel2.fontSize = 20.0f;
    titleLabel2.verticalAlignmentMode =SKLabelVerticalAlignmentModeTop;
    [self addChild:titleLabel2];
    
    self.nextScene = self.sceneData[@"next"];
    [self performSelector:@selector(loadNextScene) withObject:nil afterDelay:DELAY];
}

できました。

秀逸なサブタイトル

以上。

ソースコード: sj-prototype-apps/SJRolePlaying at master · tnantoka/sj-prototype-apps

宝箱を開ける

2013-11-24T00:00:00+00:00

画面上のキャラクターを別のキャラクターに入れ替えます。
なくても何とかなりそうですが、宝箱を開ける演出とかしたいので一応用意しておきます。

まずは設定。

「これじゃ！」とメッセージを表示した後、replaceイベントでc2というキャラクターをc3に入れ替え。
その後またメッセージを表示。

という内容です。

story_prompt.json

{
    "type" : "story",
    "map" : "map_shop",
    "events" : {
        "c1" : {
            "type" : "message",
            "message" : {
                "en" : "Here you are!",
                "ja" : "これじゃ！"
            },
            "next" : "c1a"
        },
        "c1a" : {
            "type" : "replace",
            "from" : "c2",
            "to" : "c3",
            "next" : "c1b"
        },
        "c1b" : {
            "type" : "message",
            "message" : {
                "en" : "Take good care of it.",
                "ja" : "お主の分身じゃ。大切にするんじゃぞ。"
            },
            "next" : "story_replace"
        }
    }
}

キャラクターの入れ替えは、SJMapNodeにメソッドを追加して対応。

- (void)replaceCharacterNodeFrom:(NSString *)fromName to:(NSString *)toName {
    
    SKNode *fromNode = [self childNodeWithName:fromName];
    SKNode *toNode = [self newCharacterNode:toName];
    
    toNode.position = fromNode.position;
    
    [fromNode removeFromParent];
    [self addChild:toNode];
}

それをSJStorySceneから呼び出します。

- (void)processEvent:(NSString *)name {
    
    /* 省略 */

    } else if ([event[@"type"] isEqualToString:@"replace"]) {
        [[self mapNode] replaceCharacterNodeFrom:event[@"from"] to:event[@"to"]];
        [self processEvent:event[@"next"]];
    }
}

完成。

モシャス

いい感じです。

ソースコード: sj-prototype-apps/SJRolePlaying at master · tnantoka/sj-prototype-apps

主人公の名前を入力

2013-11-24T00:00:00+00:00

これも昔からお馴染み、「君の名前は？」イベント。
顔見知りなのに名前を知らない不思議。

Confirmと同じくUIAlertViewで済ませます。

まずは設定ファイル。

story_prompt.json

{
    "type" : "story",
    "map" : "map_shop",
    "events" : {
        "c1" : {
            "type" : "message",
            "message" : {
                "en" : "Hi,",
                "ja" : "やあ。"
            },
            "next" : "c1c"
        },
        "c1c" : {
            "type" : "prompt",
            "message" : {
                "en" : "What is your name?",
                "ja" : "君の名前は？"
            },
            "key" : "username",
            "next" : "c1a"
        },
        "c1a" : {
            "type" : "message",
            "message" : {
                "en" : "<username>...OK, Welcome <username>!",
                "ja" : "<username>か、いい名前だ。よろしく、<username>！"
            },
            "next" : "story_prompt"
        }
    }
}

まずは、「やぁ」とメッセージを表示。
その後テキスト入力用のアラートを表示して、入力内容をkeyに指定されているusernameをキーにNSUserDefaultに保存します。
そして、保存された内容を使ってメッセージを表示します。

アラート表示は以下のような実装。

SJStroyScene.m

- (void)processEvent:(NSString *)name {
    
    /* 省略 */

    } else if ([event[@"type"] isEqualToString:@"prompt"]) {
        
        NSString *message = event[@"message"][[SJUtilities lang]];
        
        __weak UIAlertView *alertView = [UIAlertView alertViewWithTitle:nil message:message];
        alertView.alertViewStyle = UIAlertViewStylePlainTextInput;
        [alertView addButtonWithTitle:NSLocalizedString(@"OK", nil) handler:^{
            NSString *text = [alertView textFieldAtIndex:0].text;
            NSString *key = event[@"key"];
            [[NSUserDefaults standardUserDefaults] setObject:text forKey:key];
            [self processEvent:event[@"next"]];
        }];
        [alertView show];
        
    }

}

メッセージ内にある<username>は以下の処理で置換されます。

- (NSString *)replaceKeys:(NSString *)message {
 
    NSMutableString *replaced = message.mutableCopy;
    NSError *error = nil;
    NSRegularExpression *regexp = [NSRegularExpression regularExpressionWithPattern:@"<([^>]+)>" options:0 error:&error];
    if (error) {
        NSLog(@"%@", error.localizedDescription);
    }
    
    NSMutableArray *keys = @[].mutableCopy;
    [regexp enumerateMatchesInString:message options:0 range:NSMakeRange(0, message.length) usingBlock:^(NSTextCheckingResult *result, NSMatchingFlags flags, BOOL *stop) {
        NSString *key = [message substringWithRange:[result rangeAtIndex:1]];
        [keys addObject:key];
    }];
    
    for (NSString *key in keys) {
        [replaced replaceOccurrencesOfString:[NSString stringWithFormat:@"<%@>", key] withString:[[NSUserDefaults standardUserDefaults] stringForKey:key] options:0 range:NSMakeRange(0, replaced.length)];
    }
    
    return replaced;
}

動作確認してみます。

入力。

黒歴史になりがち

表示。

馴れ馴れしい

できました。

ソースコード: sj-prototype-apps/SJRolePlaying at master · tnantoka/sj-prototype-apps

はい・いいえの確認

2013-11-23T00:00:00+00:00

昔ながらのお使いゲーでお馴染み、はい・いいえの確認。
はいと言うまで前に進ませてくれません。

専用のNodeを作ってもいいのですが、今回は手抜きでUIAlertViewで済ませます。

設定ファイルは以下のとおりです。

story_confirm.json

{
    "type" : "story",
    "map" : "map_shop",
    "events" : {
        "c1" : {
            "type" : "confirm",
            "message" : {
                "en" : "OK?",
                "ja" : "やってくれるな？"
            },
            "yes" : "c1y",
            "no" : "c1n"
        },
        "c1y" : {
            "type" : "message",
            "message" : {
                "en" : "Thank you!",
                "ja" : "おぉ、やってくれるか！では頼んだぞ。"
            },
            "next" : "story_confirm"
        },
        "c1n" : {
            "type" : "message",
            "message" : {
                "en" : "…",
                "ja" : "…。"
            },
        }
    }
}

Yesをタップされるとc1y、Noをタップされるとc1nに進むようにします。¹

SJStroyScene.m

- (void)processEvent:(NSString *)name {
    
    NSDictionary *event = self.sceneData[@"events"][name];

    if (event) {
        [[self playerNode] removeAllActions];
    }

    if ([event[@"type"] isEqualToString:@"message"]) {
        _state = SJStorySceneStateMessage;
        [self messageNode].message = event[@"message"][[SJUtilities lang]];
        [self messageNode].hidden = NO;
        self.nextScene = event[@"next"];
        
    } else if ([event[@"type"] isEqualToString:@"confirm"]) {
        
        NSString *message = event[@"message"][[SJUtilities lang]];
        
        UIAlertView *alertView = [UIAlertView alertViewWithTitle:nil message:message];
        [alertView addButtonWithTitle:NSLocalizedString(@"Yes", nil) handler:^{
            [self processEvent:event[@"yes"]];
        }];
        [alertView addButtonWithTitle:NSLocalizedString(@"No", nil) handler:^{
            [self processEvent:event[@"no"]];
        }];
        [alertView show];
        
    }
    
}

できました。

はいと言うまで許さない

次はテキスト入力を、これもUIAlertViewを使って実装予定。

ソースコード: sj-prototype-apps/SJRolePlaying at master · tnantoka/sj-prototype-apps

BlocksKitを使用しています。 ↩

設定シーン

2013-11-16T00:00:00+00:00

引き続き軽いお題で、設定画面です。
言語の日英切り替えと音のON/OFF、スペシャルサンクスなどを表示します。

コードは単純で、前回作ったSJTapNodeとSKLabelをただ並べているだけです。

1点、コンテンツの高さがシーンより大きくなるので、以下のようにスクロールを実装しています。

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    
    UITouch *touch = [touches anyObject];
    CGPoint positionInScene = [touch locationInNode:self];
    CGPoint previousPosition = [touch previousLocationInNode:self];
    
    CGFloat translationY = positionInScene.y - previousPosition.y;
    
    SKSpriteNode *scrollNode = [self scrollNode];
    CGPoint position = CGPointMake(scrollNode.position.x, scrollNode.position.y + translationY);
    
    CGFloat top = -(scrollNode.size.height - self.frame.size.height);
    CGFloat bottom = 0;
    if (position.y < top) {
        position.y = top;
    } else if (position.y > bottom) {
        position.y = bottom;
    }

    scrollNode.position = position;
}

完成画面はこちら。

TableView風

今回はあえて、Sprite Kitを使っていますが、UIKit(UITableView)を使った方が確実に楽なので、そちらをオススメします。

ソースコード: sj-prototype-apps/SJRolePlaying at master · tnantoka/sj-prototype-apps

タイトルシーン

2013-11-14T00:00:00+00:00

今回は軽いお題で、タイトル画面を作ります。
リリース時には凝った演出があった方がよいかもしれませんが、現状ではタイトルとボタンを並べるだけです。

ボタンはSJTapNodeというクラスで表現しています。
touchesEnded:withEvent:が発生した時にdisabledじゃなければ、targetのactionを呼び出す単純なNodeです。

なお、タップ中やdisabled時はcolorBlendFactorを操作してグレーになるようにしています。

SJTapNode

- (id)initWithFontNamed:(NSString *)fontName {
    if (self = [super initWithFontNamed:fontName]) {
        self.color = [SKColor grayColor];
        self.userInteractionEnabled = YES;
    }
    return self;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    if (_disabled) return;
    
    self.colorBlendFactor = BLEND_SELECTED;
}

- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event {
    if (_disabled) return;

    self.colorBlendFactor = BLEND_NORMAL;
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    if (_disabled) return;
    
    if (_target && [_target respondsToSelector:_action]) {
        [_target performSelector:_action withObject:nil afterDelay:0];
    }

    [self touchesCancelled:touches withEvent:event];
}

- (void)setDisabled:(BOOL)disabled {
    _disabled = disabled;
    self.colorBlendFactor = _disabled ? BLEND_DISABLED : BLEND_NORMAL;
}

これを以下のようにSJTitleSceneで利用しています。今は、ボタンをクリックしてもNSLogされるだけです。

- (void)createSceneContents {
    
    // Title
    SKLabelNode *titleLabel1 = [SKLabelNode labelNodeWithFontNamed:@"Mosamosa"];
    titleLabel1.text = @"Prototype";
    titleLabel1.fontSize = 28.0f;
    titleLabel1.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMaxY(self.frame) - 80.0f);
    [self addChild:titleLabel1];

    SKLabelNode *titleLabel2 = [SKLabelNode labelNodeWithFontNamed:titleLabel1.fontName];
    titleLabel2.text = @"Quest";
    titleLabel2.position = CGPointMake(CGRectGetMidX(self.frame), titleLabel1.position.y - titleLabel1.frame.size.height - MARGIN);
    titleLabel2.fontSize = titleLabel1.fontSize;
    [self addChild:titleLabel2];

    // New game
    SJTapNode *newNode = [SJTapNode labelNodeWithFontNamed:@""];
    newNode.text = NSLocalizedString(@"New Game", nil);
    newNode.fontSize = 20.0f;
    newNode.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame) - 0.0f);
    newNode.target = self;
    newNode.action = @selector(goNew);
    [self addChild:newNode];
    
    // Continue
    SJTapNode *continueNode = [SJTapNode labelNodeWithFontNamed:newNode.fontName];
    continueNode.text = NSLocalizedString(@"Continue", nil);
    continueNode.fontSize = newNode.fontSize;
    continueNode.position = CGPointMake(CGRectGetMidX(self.frame), newNode.position.y - newNode.frame.size.height - MARGIN);
    continueNode.target = self;
    continueNode.action = @selector(goContinue);
    continueNode.disabled = YES;
    [self addChild:continueNode];

    // Settings
    SJTapNode *settingsNode = [SJTapNode labelNodeWithFontNamed:newNode.fontName];
    settingsNode.text = NSLocalizedString(@"Settings", nil);
    settingsNode.fontSize = newNode.fontSize;
    settingsNode.position = CGPointMake(CGRectGetMidX(self.frame), continueNode.position.y - newNode.frame.size.height - MARGIN);
    settingsNode.target = self;
    settingsNode.action = @selector(goSettings);
    [self addChild:settingsNode];

    // Copyright
    SJTapNode *copyrightNode = [SJTapNode labelNodeWithFontNamed:newNode.fontName];
    copyrightNode.text = NSLocalizedString(@"© 2013 SpriteKit.jp", nil);
    copyrightNode.fontSize = 12.0f;
    copyrightNode.position = CGPointMake(CGRectGetMidX(self.frame), 40.0f);
    copyrightNode.target = self;
    copyrightNode.action = @selector(goCopyright);
    [self addChild:copyrightNode];

}

- (void)goNew {
    NSLog(@"New");
}

- (void)goContinue {
    NSLog(@"Continue");
}

- (void)goSettings {
    NSLog(@"Settings");
}

- (void)goCopyright {
    NSLog(@"Copyright");
}

ごく単純ですが、これでタイトル画面が表示されます。

質素な画面

次は設定画面を作ります。

ソースコード: sj-prototype-apps/SJRolePlaying at master · tnantoka/sj-prototype-apps

会話後に他のシーンに遷移する

2013-11-08T00:00:00+00:00

そろそろお店の中を歩くだけは飽きてきたので、他のシーンに移動したいと思います。
まだまだ足りない機能はあるのですが、今はあくまでプロトタイプなので、細かいのは実際にゲームに組み込む時に実装する予定。

今回からSceneの構成を変更しました。
ベースとしてSJBaseSceneを作成。シーンの情報を定義したjsonファイルの内容を元に、各シーンを読み込みます。

SJBaseScene

- (id)initWithSize:(CGSize)size name:(NSString *)name {
    if (self = [super initWithSize:size]) {
        NSString *path = [[NSBundle mainBundle] pathForResource:name ofType:@"json"];
        NSData *data = [NSData dataWithContentsOfFile:path];
        NSError *error = nil;
        self.sceneData = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingAllowFragments error:&error];
        if (error) {
            NSLog(@"%@", [error localizedDescription]);
        }
    }
    return self;
}

- (void)loadScene:(NSString *)name {
    SKScene *scene;
    if ([name hasPrefix:@"story"]) {
        scene = [[SJStoryScene alloc] initWithSize:self.size name:name];
    }
    [self.view presentScene:scene];
}

- (void)loadNextScene {
    if (self.nextScene) {
        [self loadScene:self.nextScene];
    }
}

以下が今回利用したstory_opening.jsonです。
typeがstroyとなっているため、SJStorySceneを読み込みます。

{
    "type" : "story",
    "map" : "map_shop",
    "events" : {
        "c1" : {
            "type" : "message",
            "message" : {
                "en" : "hello, world.",
                "ja" : "よくきた、○○よ。待っておったぞ。ここは××研究所。これから旅に出るお主に、託したいものがあって呼んだのじゃ。その宝箱の中身を持って行くがよい。世界の平和を頼んだぞ。"
            },
            "next" : "story_001"
        }
    }
}

また、nextで設定されているのが遷移先のシーンです。
今回はまだ他のシーンがないため、自分自身を指定しています。
これを以下のように、会話が始まる時にnextSceneプロパティに保持します。

SJStroyScene

# pragma mark - SKPhysicsContactDelegate

- (void)didBeginContact:(SKPhysicsContact *)contact {
    SKPhysicsBody *firstBody, *secondBody;
    
    if (contact.bodyA.categoryBitMask < contact.bodyB.categoryBitMask) {
        firstBody = contact.bodyA;
        secondBody = contact.bodyB;
    } else {
        firstBody = contact.bodyB;
        secondBody = contact.bodyA;
    }
    
    if ((firstBody.categoryBitMask & playerCategory) != 0) {
        if ((secondBody.categoryBitMask & characterCategory) != 0) {
            SJCharacterNode *node = (SJCharacterNode *)secondBody.node;
            NSString *name = node.name;
            NSDictionary *event = self.sceneData[@"events"][name];
            if ([event[@"type"] isEqualToString:@"message"]) {
                _state = SJStorySceneStateMessage;
                [self messageNode].message = event[@"message"][[SJUtilities lang]];
                [self messageNode].hidden = NO;
                self.nextScene = event[@"next"];

                [[self playerNode] removeAllActions];
            }
            
        }
    }
}

そして、メッセージの表示が終わった時に、loadNextSceneを呼び出します。
loadNextSceneは冒頭のSJBaseSceneで定義されているメソッドで、nextSceneが設定されていればそのシーンに遷移します。

SJStroyScene

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    
    UITouch *touch = [touches anyObject];
    CGPoint locaiton = [touch locationInNode:[self mapNode]];
    
    switch (_state) {
        case SJStorySceneStateWalk:
            [[self playerNode] moveTo:locaiton];
            break;
        case SJStorySceneStateMessage:
            if ([[self messageNode] hasNext]) {
                [[self messageNode] next];
            } else {
                [self messageNode].hidden = YES;
                _state = SJStorySceneStateWalk;
                [self loadNextScene];
            }
            break;
    }
}

これで、博士との会話が終わると他のシーンに移動するようになりました。

無限ループ

ソースコード: sj-prototype-apps/SJRolePlaying at master · tnantoka/sj-prototype-apps

TODO

2013-11-08T00:00:00+00:00

目標のゲームを作るために必要そうなものをメモ。

イベント

✔ prompt: 名前の入力など
✔ confirm: はい・いいえ
✔ replace: キャラクターを入れ替える

シーン

✔ title: ゲームタイトル
✔ settings: 言語・音声設定やライセンス表示
✔ chapter: 章切り替え
✔ ending: クリア後の画面
battle: 戦闘
menu: 装備など
continue: ゲームの再開

その他

utility: セーブ・ロード
utility: 音

年内を目指していたけど、厳しそうなので年度内を目標に。

触れた人と会話する

2013-11-04T00:00:00+00:00

前回から少し時間が開いてしまいましたが、今回はキャラクターに話をさせてみます。

event.jsonファイルでデータを定義しています。

{
    "c1" : {
        "type" : "message",
        "message" : {
            "en" : "hello, world.",
            "ja" : "よくきた、○○よ。待って追ったぞ。ここは××研究所。これから旅に出るお主に、託したいものがあって呼んだのじゃ。その宝箱の中身を持って行くがよい。世界の平和を頼んだぞ。"
        }
    }
}

接触時のdelegateメソッドで、playerNodeがc1という名前のNodeに触れた時に、メッセージの内容を表示するようにしています。

- (void)didBeginContact:(SKPhysicsContact *)contact {
    SKPhysicsBody *firstBody, *secondBody;
    
    if (contact.bodyA.categoryBitMask < contact.bodyB.categoryBitMask) {
        firstBody = contact.bodyA;
        secondBody = contact.bodyB;
    } else {
        firstBody = contact.bodyB;
        secondBody = contact.bodyA;
    }
    
    if ((firstBody.categoryBitMask & playerCategory) != 0) {
        if ((secondBody.categoryBitMask & characterCategory) != 0) {
            SJCharacterNode *node = (SJCharacterNode *)secondBody.node;
            NSString *name = node.name;
            NSDictionary *e = [self event][name];
            if ([e[@"type"] isEqualToString:@"message"]) {
                _state = SJShopSceneStateMessage;
                [self messageNode].message = e[@"message"][[SJUtilities lang]];
                [self messageNode].hidden = NO;
            }
        }
    }
}

メッセージの表示は、新たに追加したSJMessageNodeに担当させています。

SKLabelNodeが複数行表示に対応していないため、行数分並べて表示するという泥臭い実装になっています。特別なことをしていない上に無駄に長いため、引用はやめておきます。

無事、キャラクターに話しかけることができるようになりました。

唐突な会話

次は他のシーンへの遷移を実装します。

ソースコード: sj-prototype-apps/SJRolePlaying at master · tnantoka/sj-prototype-apps

Spkite Kitの物理エンジン向けデバッグドロー用ライブラリ「PhysicsDebugger」

2013-10-26T00:00:00+00:00

Sprite Kitには物理エンジンが組み込まれており、簡単に物理シミュレーションが利用できて便利です。
ただ、デバッグ表示用の機能がないため、どこにPhysicsBodyを追加したか、見た目では知ることができません。

そんな不満を解決してくれるのが、PhysicsDebuggerです。

早速使ってみます。

インストール

CocoaPodsに対応してるので簡単です。

# ターミナルを起動してプロジェクトのフォルダまで移動

# CocoaPodsをインストールしてない人
$ gem install cocoapods
$ pod install 

# Podfile
platform :ios, '7.0'

pod 'PhysicsDebugger'

# インストール
$ pod
Analyzing dependencies
Downloading dependencies
Installing PhysicsDebugger (1.0.0)
Generating Pods project
Integrating client project

[!] From now on use `SJRolePlaying.xcworkspace`.

CocoaPodsを初めて使う場合、これ以降.xcodeprojではなく、.xcworkspaceを開く必要があることに注意してください。

利用方法

ヘッダをインポートして、描画対象のノードが作成される前に、initを呼び、 drawPhysicsBodiesを呼びます。

今回は、SJMapNodeに追加してみました。

#import "YMCPhysicsDebugger.h"
#import "YMCSKNode+PhysicsDebug.h"

- (void)createNodeContents {
    
    [YMCPhysicsDebugger init];

    /* ノードの作成・追加 */
    
    [self drawPhysicsBodies];
}

これで実行すると、以下のようにPhysicsBodyに赤枠がついて可視化されます。

赤枠が表示される

感想

手軽に使えて便利でした。

ただ、ちょっとコードに手を加える量が多いかなぁ、という印象。まぁそれでも、毎回PhysicsBodyと同じ大きさのShapeNodeを作成して追加する、とかに比べればはるかに綺麗ですが。

あと、このライブラリに限った話ではないですが、デバッグドローのぶんNodeの数が増えて動作がもっさりになるので、常に使用しながらの開発は厳しいかもしれません。

しばらく使って様子を見てみようと思います。

お店の中に他のキャラクターを登場させる

2013-10-26T00:00:00+00:00

今日はマップ内に他のキャラクターを表示してみます。

前回はSJCharacgterNodeの中に定数でいろいろと持たせていましたが、 characters.jsonというファイルで定義するようにしました。¹

{
    "default" : {
        "stop_time" : 0.6,
        "walk_time" : 0.3,
        "speed": 0.2
    },
    "c0" : {
        "name" : "clotharmor",
        "stop_row" : 0,
        "stop_cols" : 2,
        "walk_row" : 1,
        "walk_cols" : 4,
        "up_row" : 3,
        "right_row" : 6,
        "left_row" : 6,
        "size": 64
    },
    "c1" : {
        "name" : "scientist",
        "stop_row" : 0,
        "stop_cols" : 2,
        "walk_row" : 0,
        "walk_cols" : 2,
        "up_row" : 0,
        "right_row" : 0,
        "left_row" : 0,
        "size": 48
    },
    "c2" : {
        "name" : "chest",
        "stop_row" : 0,
        "stop_cols" : 1,
        "walk_row" : 0,
        "walk_cols" : 1,
        "up_row" : 0,
        "right_row" : 0,
        "left_row" : 0,
        "size": 32
    }
}

マップデータでどこに配置するか指定します。

-,-,-,-,-,-,-,-,-,-
-,-,-,-,-,-,-,-,-,-
-,-,-,-,-,-,-,-,-,-
-,-,-,-,-,-,-,-,-,-
-,-,-,-,-,-,-,-,-,-
-,-,-,-,-,-,-,-,-,-
-,-,-,-,c2,c1,-,-,-,-
-,-,-,-,-,-,-,-,-,-
-,-,-,-,-,-,-,-,-,-
-,-,-,-,-,-,-,-,-,-
-,-,-,-,-,-,-,-,-,-
-,-,-,-,-,-,-,-,-,-
-,-,-,-,c0,-,-,-,-,-

SJMapNode内で、cから始まるデータの場合はキャラクターを生成するようにします。

} else if ([col hasPrefix:@"c"]) {
    tileSprite = [[SJCharacterNode alloc] initWithCharacterNamed:col];

    tileSprite.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:CGSizeMake(TILE_SIZE, TILE_SIZE)];
    tileSprite.physicsBody.affectedByGravity = NO;
    tileSprite.physicsBody.allowsRotation = NO;

    tileSprite.name = col;

}

SJCharacterNodeではjsonから設定を読み取ります。この値を定数の代わりに使います。

- (id)initWithCharacterNamed:(NSString *)name {
    
    NSString *path = [[NSBundle mainBundle] pathForResource:CHARACTERS_NAME ofType:@"json"];
    NSData *data = [NSData dataWithContentsOfFile:path];
    NSError *error = nil;
    NSDictionary *characters = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingAllowFragments error:&error];
    if (error) {
        NSLog(@"%@", [error localizedDescription]);
    }
    NSMutableDictionary *character = [characters[@"default"] mutableCopy];

    [character addEntriesFromDictionary:characters[name]];

    CGFloat size = [character[@"size"] floatValue];
    
    if (self = [super initWithColor:nil size:CGSizeMake(size, size)]) {
        _character = character;
        [self createNodeContents];
    }
    return self;
}

完成です。

ひとりじゃない

相変わらず全然お店ではないですが、見た目はゲームっぽくなってきました。

次は会話を実装する予定です。

ソースコード: sj-prototype-apps/SJRolePlaying at master · tnantoka/sj-prototype-apps

Objective-C的にはplistを使うのが定石だと思いますが、個人的にplistが苦手なのでここではJSONにしています。 ↩

Mac OS X 10.9 Mavericksがリリースされました

2013-10-26T00:00:00+00:00

ついにリリースされましたね。

正直なところ、そこまで魅力は感じていなかったんですが、まさかの無料ということで早速アップグレードしました。今まで作ったサンプルが、最新版のXcodeでも問題なく動いていて一安心です。

残念ながら、このタイミングでも、日本語ドキュメント - Apple DeveloperにSprite Kit Programming Guideは追加されませんでした。こうなると、しばらくは翻訳されなさそうです…。

NDA期間も終わったことだし、今後は機会があればMac向けの情報も扱っていきたいと思います。

物理エンジンを使ってお店の中を歩く

2013-10-22T00:00:00+00:00

今回は、キャラクターをマップ内で歩かせてみます。

以下が完成イメージです。ややぎこちないですが、リアルタイムバトルをやるわけでもないので、よしとします。

お店の中を歩く

通行状態とプレイヤーの位置を設定するために、マップデータにレイヤーを追加しています。

x,x,x,x,x,x,x,x,x,x
x,x,x,x,x,x,x,x,x,x
x,x,x,x,o,o,o,o,x,x
x,x,o,o,o,o,o,o,x,x
x,x,o,o,o,o,o,o,x,x
x,x,o,o,o,o,o,o,x,x
x,x,o,o,o,o,o,o,x,x
x,x,o,o,o,o,o,o,x,x
x,x,o,o,o,o,o,o,x,x
x,x,o,o,o,o,o,o,x,x
x,x,o,o,o,o,o,o,x,x
x,x,x,x,o,o,x,x,x,x
x,x,x,x,o,o,x,x,x,x

-,-,-,-,-,-,-,-,-,-
-,-,-,-,-,-,-,-,-,-
-,-,-,-,-,-,-,-,-,-
-,-,-,-,-,-,-,-,-,-
-,-,-,-,-,-,-,-,-,-
-,-,-,-,-,-,-,-,-,-
-,-,-,-,-,-,-,-,-,-
-,-,-,-,-,-,-,-,-,-
-,-,-,-,-,-,-,-,-,-
-,-,-,-,-,-,-,-,-,-
-,-,-,-,-,-,-,-,-,-
-,-,-,-,-,-,-,-,-,-
-,-,-,-,p,-,-,-,-,-

oは通行可で何もしません。xは通行不可なので、phsyicsBodyを設定したSKNodeを配置します。
pがプレイヤーの場所でphysicsBodyを指定したNodeを配置します。-は何もなしです。

以下がその部分のコード抜粋です。

if ([col isEqualToString:@"o"]) continue;
if ([col isEqualToString:@"-"]) continue;

SKNode *tileSprite;

if ([col isEqualToString:@"x"]) {
    tileSprite = SKNode.new;
    
    tileSprite.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:CGSizeMake(TILE_SIZE, TILE_SIZE)];
    tileSprite.physicsBody.dynamic = NO;
    
} else if ([col isEqualToString:@"p"]) {
    tileSprite = [SJCharacterNode characterNode];
    tileSprite.name = kPlayerName;

    tileSprite.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:CGSizeMake(TILE_SIZE, TILE_SIZE)];
    tileSprite.physicsBody.affectedByGravity = NO;
    tileSprite.physicsBody.allowsRotation = NO;
    
}

なお、今回から、マップの処理をSJMapNodeという専用クラスに任せるように変更しています。上のコードもSJMapNode内のものです。

プレイヤーは新たに追加したSJCharacterNodeを使っています。アニメーションはチュートリアルのサンプルゲームとほぼ同じロジックなので、ここでは移動の処理を抜粋します。

といっても、特に特別なことはやっておらす、画面がタップされたら、x軸・y軸の順でその方向を向いて歩いていくだけです。移動はタイルサイズ（32px）の単位で行なうにしています。

アニメーションはもちろんSKActionを利用。
また、物理エンジンの衝突を利用することで、通行状態を考慮する必要がく、コードがシンプルになっています。¹

- (void)moveTo:(CGPoint)location {
    
    NSMutableArray *actions = @[].mutableCopy;
    CGPoint diff = CGPointMake(floor((location.x - self.position.x) / TILE_SIZE), floor((location.y - self.position.y) / TILE_SIZE));
    
    CGFloat x = diff.x * TILE_SIZE;
    CGFloat y = diff.y * TILE_SIZE;
    
    SKAction *moveX = [SKAction moveByX:x y:0 duration:abs(diff.x) * SPEED];
    SKAction *moveY = [SKAction moveByX:0 y:y duration:abs(diff.y) * SPEED];
    
    SKAction *walk = [SKAction runBlock:^{
        [self walk];
    }];
    SKAction *stop = [SKAction runBlock:^{
        [self stop];
    }];
    
    SKAction *turnX = [SKAction runBlock:^{
        if (diff.x > 0) {
            _direction = SJCharacterDirectionRight;
        } else if (diff.x < 0){
            _direction = SJCharacterDirectionLeft;
        }
    }];
    SKAction *turnY = [SKAction runBlock:^{
        if (diff.y > 0) {
            _direction = SJCharacterDirectionUp;
        } else if (diff.y < 0){
            _direction = SJCharacterDirectionDown;
        }
    }];
    
    [actions addObject:turnX];
    [actions addObject:walk];
    [actions addObject:moveX];

    [actions addObject:turnY];
    [actions addObject:walk];
    [actions addObject:moveY];
    
    [actions addObject:stop];
    
    SKAction *sequence = [SKAction sequence:actions];
    
    [self runAction:sequence withKey:MOVE_KEY];
}

これでキャラクターが歩けるようになりました。

ソースコードは、sj-prototype-apps/SJRolePlaying at master · tnantoka/sj-prototype-appsです。

まだまだ続きます。

physicsBodyを設定した物体同士はデフォルトで衝突するため、プレイヤーはxのマスに移動できない。 ↩

簡易タイルマップでお店風の背景を表示

2013-10-18T00:00:00+00:00

自作RPGのリリースに向けて開発を進めていきたいと思います。まずは店風の背景を表示してみます。

使う素材は、BrowserQuestのtilesheet.pngです。

この画像は、32x32のタイルが縦に20個、横に98個並んだものです。扱いやすくするためにそれぞれ番号を振ります。

せっかくなのでこれもSprite Kitでやります。

static const CGFloat TILE_SIZE = 32.0f;
static const CGFloat SCALE = 0.75f;

static NSString * const BG_NAME = @"bg";

- (void)createSceneContents {
    self.backgroundColor = [SKColor darkGrayColor];
    
    SKTexture *tilesheet = [SKTexture textureWithImageNamed:@"tilesheet"];
    
    SKSpriteNode *bgSprite = [SKSpriteNode spriteNodeWithTexture:tilesheet];
    bgSprite.xScale = bgSprite.yScale = SCALE;
    bgSprite.anchorPoint = CGPointMake(0, 0);
    bgSprite.name = BG_NAME;
    [self addChild:bgSprite];
    
    NSInteger cols = tilesheet.size.width / TILE_SIZE;
    NSInteger rows = tilesheet.size.height / TILE_SIZE;
    
    for (int i = 0; i < cols; i++) {
        for (int j = 0; j < rows; j++) {
            CGPoint position = CGPointMake(i * TILE_SIZE, j * TILE_SIZE);
            
            SKLabelNode *pointLabel = [SKLabelNode labelNodeWithFontNamed:@""];
            pointLabel.text = [NSString stringWithFormat:@"%d", i + j * cols];
            pointLabel.position = CGPointMake(position.x + TILE_SIZE / 2.0f, position.y + TILE_SIZE / 2.0f);
            pointLabel.fontSize = 14.0f;
            pointLabel.verticalAlignmentMode = SKLabelVerticalAlignmentModeCenter;
            [bgSprite addChild:pointLabel];
        }
    }
}

透過されている部分がわかりやすいようにSceneに背景色をつけています。

そして、tilesheet.pngからSKSpriteNodeを作成し、anchorPointを左下に設定してSceneに追加します。そのままだと大きくて見づらいので、xScale・yScaleで調整しています。

その後、32px毎にSKLabelNodeで番号を表示していきます。これで以下のような画面になります。

各タイルに番号を

それでは、この番号を使ってマップを作成します。

まずは、マップデータです。今回はCSVファイルで表現します。

504,505,506,506,506,507,507,507,508,509
484,485,486,486,486,487,487,487,488,489
464,465,466,466,466,467,467,467,468,469
464,465,466,466,466,467,467,467,468,469
464,465,466,466,466,467,467,467,468,469
464,465,466,466,466,467,467,467,468,469
444,445,446,446,446,447,447,447,448,449
444,445,446,446,446,447,447,447,448,449
444,445,446,446,446,447,447,447,448,449
444,445,446,446,446,447,447,447,448,449
444,445,446,446,446,447,447,447,448,449
424,425,426,-1,446,447,-1,427,428,429
404,405,406,-1,-1,-1,-1,407,408,409

-1,-1,-1,-1,-1,-1,-1,-1,-1,-1
-1,-1,285,286,-1,-1,-1,-1,-1,-1
-1,-1,265,266,-1,-1,-1,-1,-1,-1
-1,-1,-1,-1,-1,-1,-1,-1,-1,-1
-1,-1,1124,1125,1125,1125,1125,1126,-1,-1
-1,-1,1104,1105,1105,1105,1105,1106,-1,-1
-1,-1,1104,1105,1105,1105,1105,1106,-1,-1
-1,-1,1104,1105,1105,1105,1105,1106,-1,-1
-1,-1,1084,1085,1085,1085,1085,1086,-1,-1
-1,-1,-1,-1,-1,-1,-1,-1,-1,-1
-1,-1,-1,345,346,346,347,-1,-1,-1
-1,-1,-1,325,326,326,327,-1,-1,-1
-1,-1,-1,305,306,306,307,-1,-1,-1

あとはこれを読み込んで表示するだけです。

- (void)createSceneContents {
    
    NSString *shop = [NSString stringWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"shop" ofType:@"csv"]  encoding:NSUTF8StringEncoding error:nil];
    
    SKTexture *tilesheet = [SKTexture textureWithImageNamed:@"tilesheet"];
    
    NSArray *layers = [shop componentsSeparatedByString:@"\n\n"];
    
    for (NSString *layer in layers) {

        NSArray *rows = [[[layer componentsSeparatedByString:@"\n"] reverseObjectEnumerator] allObjects];
        for (int i = 0; i < rows.count; i++) {
            NSString *row = rows[i];
            NSArray *cols = [row componentsSeparatedByString:@","];
            for (int j = 0; j < cols.count; j++) {
                
                NSInteger col = [cols[j] integerValue];
                
                if (col > -1) {
                    CGFloat x = col % (NSInteger)MAP_COLS * TILE_SIZE / tilesheet.size.width;
                    CGFloat y = col / (NSInteger)MAP_COLS * TILE_SIZE / tilesheet.size.height;
                    CGFloat w = TILE_SIZE / tilesheet.size.width;
                    CGFloat h = TILE_SIZE / tilesheet.size.height;
                    
                    CGRect rect = CGRectMake(x, y, w, h);
                    SKTexture *tile = [SKTexture textureWithRect:rect inTexture:tilesheet];

                    SKSpriteNode *tileSprite = [SKSpriteNode spriteNodeWithTexture:tile];

                    CGPoint position = CGPointMake(j * TILE_SIZE, i * TILE_SIZE);
                    tileSprite.anchorPoint = CGPointMake(0, 0);
                    tileSprite.position = position;

                    [self addChild:tileSprite];
                    
                }
            }
        }

    }
}

やっていることは単純でCSVを空行区切りでレイヤーにわけて、あとは順番に、番号に合うタイルをtextureWithRect:inTexture:使って表示しているだけです。

なお、-1は何も表示しないという意味にしています。

これで以下のように表示できます。

お店？

ゲームに使うには、各タイルの通行可否フラグなど保持したりしないといけないので、 TileクラスやMapクラスが必要になってくると思います。

今日のところは表示するところまで。

ソースコードは、sj-prototype-apps/SJRolePlaying at master · tnantoka/sj-prototype-appsにあります。

rectの計算で割り切れないことなどが原因で、ノイズが出てしまうのが気になるところ。
解消できたらまた書きます。

大きなサイズのテクスチャが真っ黒になる

2013-10-16T00:00:00+00:00

Xcode 5.0で遭遇した問題。

BrowserQuestのtilesheetを使って、マップを表示しようとしてたんですが、何度やってもうまくいかなくて困りました。

いろいろ試していて判明したのは、大きなサイズ（容量ではなくピクセル数）を指定したSKTextureが真っ黒になるということでした。

試したサイズ

4096は表示される

4097は真っ黒になる

幅を広げても4096は問題なし

幅を小さくしても4097はやっぱりダメ

こんな感じで、4097ピクセル以上になると表示されなくなってしまうようです。幅を変えても関係なさそうだったので、1辺の長さが問題になる模様。

SKTexture Class Referenceには特に何も書いていない気がしますし、エラーログなども出ていません。

サイズを小さくするしかない？
そもそも全ての環境で発生する問題なのかも不明ですが…。

ソースコードは、
sj-posts-apps/SJLargeTexture at master · tnantoka/sj-posts-apps
に置いてありますので、ご自由にどうぞ。

何かわかったらまた書きます。

Hirohito Katoさんから、コメント欄で原因を教えていただきました。
GPUの制限により4096x4096までのサイズしか扱えないためのようです。

参考

情報提供ありがとうございました！

チュートリアルのEPUB版を公開しました

2013-10-13T00:00:00+00:00

Gumroadからダウンロードできます。

iBooksで読むとこのようになります。
アニメーションGIFもちゃんと動くので、インタラクティブな感じで楽しめるかもしれません。

0円以上に設定しているため、無料でもダウンロード可能ですのでお気軽にご利用ください。

Apple公式のSprite Kit関連情報まとめ

2013-10-11T00:00:00+00:00

WWDC

Introduction to Sprite Kit
Designing Games with Sprite Kit
WWDC 2013の資料。PDFもありますが動画がおすすめ。僕はこれを見て、Sprite Kitを勉強してみようと決めました。

ガイド

Sprite Kit Programming Guide: About Sprite Kit 原典的存在、目を通すべし。Sprite Kitのひと通りの機能が、100ページ強とコンパクトにまとまとめられており、読みやすいです。残念ながら、日本語訳はまだないようです。

サンプルコード

code:Explained Adventure: Introduction
Adventureのソースコードとその解説です。

リファレンス

Sprite Kit Framework Reference
iOS Developer LibraryにあるSprite Kit関連のリファレンスがまとめられています。

今のところ、公式の情報はこれで全てだと思います。
プログラミングガイドの日本語訳が待ち遠しいですね。

iOS 7 Tech Talksの資料も公開されるといいんですが。

Sprite Kit関連の日本語サイトまとめ

2013-10-11T00:00:00+00:00

その他

SpriteKit - Sprite Kitの概要 - Qiita [キータ]
Sprite Kitの機能をざっと。
XCode5から追加されたSprite Kit、サンプルコードを解説してみた - NAVER まとめ
Xcode 5のSpriteKit Gameテンプレートの解説。行ごとに説明があります。
API / Sprite Kit ｜ Developers.IO
クラスメソッドさんのiOS 7 解説記事70本一挙公開より。SKLabelNode、SKTransition、Texture Atlas、パーティクル、物理エンジンの入門記事があります。
Sprite Kit チュートリアル: アニメーションとテクスチャアトラス | Ray Wenderlich
テクスチャアトラスを使う方はどうぞ。
iOS 7 の新機能のサンプルコード集『iOS7 Sampler』を公開しました。 - Over&Out その後
iOS 7の新機能の動くサンプル集アプリ。Sprite Kitでキャラクターをアニメーションする例が含まれています。
SpriteKit | nApps FPSに関する考察が参考になりました。
SpriteKitを使って一攫千金を狙うチュートリアル | なんてこったいブログハエたたきゲームを作るチュートリアル。
SpriteKit | 日曜研究室 SpriteKit Gameテンプレートの説明や、物理エンジン・パーティクルについての説明があります。
hkomo746 - Qiita [キータ]
Sprite Kit Programming Guideの解説記事をいくつか公開されています。このまま後半部分まで続いていけば、とてもためになりそうです。
iOS 7で簡単コーディング／50分で作るミニゲーム
 関西オープンフォーラム2013で発表されたもの。「関西オープンフォーラム 2013サンプルコード」の項目から資料とシューティングゲームのプロジェクトがダウンロードできます。

今後も参考になるサイトを見つけたら紹介していきたいと思います。¹

2013-9-19 以前に公開されているものは除外しています。 ↩

SpriteKit.jp オープン！

2013-10-10T00:00:00+00:00

チュートリアルを公開しました。是非ご利用ください。