iOS7から使えるようになったSpriteKitは非常に便利である。
何しろ、外部のツールを使わずにテクスチャアトラスやパーティクルを簡単に使用することが出来る。
しかし、そこにはほんの少しだけ罠が存在する。
今回はそういったテクスチャアトラスの罠の一つについて言及してみる。
何しろ、外部のツールを使わずにテクスチャアトラスやパーティクルを簡単に使用することが出来る。
しかし、そこにはほんの少しだけ罠が存在する。
今回はそういったテクスチャアトラスの罠の一つについて言及してみる。
テクスチャアトラスの基本
まずはテクスチャアトラスを使うときの基本から見ていこう。
テクスチャアトラスを作るには、フォルダ名に".atlas"という拡張子を付けてXcodeに登録するだけだ。
例えば
このように、Finder上で画像が入った"test.atlas"というフォルダを用意する。
(本来、テクスチャアトラスは複数の画像をまとめるためのものなのだが、今回はテストということで画像は一つだけにしてある。)
これをXcodeにドラッグする。
登録すると以下のようにグループのフォルダアイコンが青になるのがわかる。
それでは早速image0.pngを表示させてみよう。
SpriteKitのテンプレートのMyScene.mのinitWithSizeメソッドを以下のように書き換えよう。
これでimage0.pngが画面上に表示されるはずだ。
早速実行してみよう。
おかしい。
想定していた画像ではなく、白地に赤いXの文字が表示される。
これは、テクスチャが正常に読み込まれていないということだ。
原因を探るために、先ほどのコードのif文の一番下に、以下のコードを追加してatlasインスタンスを見てみよう。
結果はこのようになる。
この罠の原因を探っていく。
テクスチャアトラスを手動で作成してみる
テクスチャアトラスの作成は実はターミナルから手動で行うことが出来る。
例えば以下のようにすると
Finder上ではこのようになる。
plistには画像がどのようにまとめられているかが記載されている。
どうやら手動で作成した場合には上手くいっているようだ。
ではXcodeが自動で作成するのが失敗しているのだろうか。
iOSシミュレータにインストールされているアプリの中を覗いてみよう。
見たいappファイルを右クリックして「パッケージの内容を表示」を選択すると中を見ることが出来る。
中はこのようになっていた。
atlascは出来ているが、中身に画像が入っていない。
plistも出力はされているが、中身は正常ではないようだ。
つまり、テクスチャアトラスがうまく作成されていないということはほぼ確実だ。
ではいったい何が原因でテクスチャアトラスが作成されないのだろうか。
結論から言うと、Projectファイル一式があるフォルダのパスに日本語があるとうまくいかないということだ。
例えば、今回テスト用に作っているProjectは"~/Desktop/テスト"に置いてある。
これがいけなかった。
なので、"~/Desktop/test/"に配置しなおして実行してみよう。
念の為にProduct→Cleanしておくことも忘れないようにしたい。
どうやら正常に表示されたようだ。
気づいてしまえばなんということもない話だが、これはなかなか気づきにくく、罠と言ってもいいだろう。
何しろ、テクスチャアトラス以外の部分は何も問題なく動作しているのだ。
一昔前は開発に関連したフォルダのパスに日本語を含めるなどとんでもないのが常識であったし、自分でもそれを守っていたのだが、今回はついうっかり失敗してしまった。
驕れる者がスーパーマリオブラザーズの開始直後のクリボーで死んでしまうように、どんなに慣れていても些細なミスはある。
だからこそ、基本的なところでは慎重さを忘れないようにしたい。
まずはテクスチャアトラスを使うときの基本から見ていこう。
テクスチャアトラスを作るには、フォルダ名に".atlas"という拡張子を付けてXcodeに登録するだけだ。
例えば
このように、Finder上で画像が入った"test.atlas"というフォルダを用意する。
(本来、テクスチャアトラスは複数の画像をまとめるためのものなのだが、今回はテストということで画像は一つだけにしてある。)
これをXcodeにドラッグする。
登録すると以下のようにグループのフォルダアイコンが青になるのがわかる。
それでは早速image0.pngを表示させてみよう。
SpriteKitのテンプレートのMyScene.mのinitWithSizeメソッドを以下のように書き換えよう。
これでimage0.pngが画面上に表示されるはずだ。
早速実行してみよう。
おかしい。
想定していた画像ではなく、白地に赤いXの文字が表示される。
これは、テクスチャが正常に読み込まれていないということだ。
原因を探るために、先ほどのコードのif文の一番下に、以下のコードを追加してatlasインスタンスを見てみよう。
結果はこのようになる。
<SKTextureAtlas> 'test' 0 textures
どうもテクスチャアトラスに画像が入っていないようだ。
これが今回言及していなかった罠である。この罠の原因を探っていく。
テクスチャアトラスを手動で作成してみる
テクスチャアトラスの作成は実はターミナルから手動で行うことが出来る。
例えば以下のようにすると
/Applications/Xcode.app/Contents/Developer/usr/bin/TextureAtlas -v test.atlas .
このような実行結果が得られる。Loading texture file: 'file:///Users/chiketen/Desktop/images/test.atlas/image0.png'. Generated texture atlas size [122, 122]. Extrude texture: image0.png Writing texture atlas './test.atlasc/test.1.png' file. Writing texture atlas plist './test.atlasc/test.plist' file.拡張子が".atlasc"というフォルダに出力される。
Finder上ではこのようになる。
plistには画像がどのようにまとめられているかが記載されている。
どうやら手動で作成した場合には上手くいっているようだ。
ではXcodeが自動で作成するのが失敗しているのだろうか。
iOSシミュレータにインストールされているアプリの中を覗いてみよう。
見たいappファイルを右クリックして「パッケージの内容を表示」を選択すると中を見ることが出来る。
中はこのようになっていた。
atlascは出来ているが、中身に画像が入っていない。
plistも出力はされているが、中身は正常ではないようだ。
つまり、テクスチャアトラスがうまく作成されていないということはほぼ確実だ。
ではいったい何が原因でテクスチャアトラスが作成されないのだろうか。
結論から言うと、Projectファイル一式があるフォルダのパスに日本語があるとうまくいかないということだ。
例えば、今回テスト用に作っているProjectは"~/Desktop/テスト"に置いてある。
これがいけなかった。
なので、"~/Desktop/test/"に配置しなおして実行してみよう。
念の為にProduct→Cleanしておくことも忘れないようにしたい。
どうやら正常に表示されたようだ。
気づいてしまえばなんということもない話だが、これはなかなか気づきにくく、罠と言ってもいいだろう。
何しろ、テクスチャアトラス以外の部分は何も問題なく動作しているのだ。
一昔前は開発に関連したフォルダのパスに日本語を含めるなどとんでもないのが常識であったし、自分でもそれを守っていたのだが、今回はついうっかり失敗してしまった。
驕れる者がスーパーマリオブラザーズの開始直後のクリボーで死んでしまうように、どんなに慣れていても些細なミスはある。
だからこそ、基本的なところでは慎重さを忘れないようにしたい。
コメント
コメント一覧 (2)
言語環境英語にしないとuser/ダウンロード とかになるのでそういったのもダメということですね。
OSが最初から用意している"ダウンロード"や"デスクトップ"といったディレクトリは
Finder上では日本語で表示されますが
内部的には"Downloads"や"Desktop"のように
英字で管理されているので、それらは気にしなくても大丈夫です。