この文書の現在のバージョンと選択したバージョンの差分を表示します。
次のリビジョン | 前のリビジョン | ||
wiki:defold:tips:005 [2016/04/09 14:27] step 作成 |
wiki:defold:tips:005 [2016/04/11 23:28] (現在) step |
||
---|---|---|---|
ライン 1: | ライン 1: | ||
====== 005 テクスチャAtlasの作成 ====== | ====== 005 テクスチャAtlasの作成 ====== | ||
- | 近日執筆予定 | + | imagesディレクトリに配置したテクスチャをAtlas化してみます。 |
+ | |||
+ | Project Explorer のimagesを右クリック→Show in Explorer でエクスプローラを開きます。 | ||
+ | {{:wiki:defold:tips:2016061001.png|}} | ||
+ | \\ | ||
+ | \\ | ||
+ | Atlasに含めたい画像を配置します。 | ||
+ | ここでは、公式のサンプル素材を使用します。[[http://www.defold.com/static/games/gettng-started-assets.zip|Download asset package]] | ||
+ | \\ | ||
+ | サンプル素材を解凍し、level-imagesディレクトリのground01.pngとground02.pngをimagesディレクトリにコピーします。 | ||
+ | {{:wiki:defold:tips:2016061002.png|}} | ||
+ | \\ | ||
+ | \\ | ||
+ | Defold Editorに戻ってProject Explorer のAtlasを作成したいディレクトリを右クリック→New→Atlas Fileを選択して新規Atlasの作成します。 | ||
+ | {{:wiki:defold:tips:2016061003.png|}} | ||
+ | \\ | ||
+ | \\ | ||
+ | ===== Atlasに含める画像を選択する ===== | ||
+ | 新規作成したAtlas開き、OutLineのAtlasを選択した状態でiキーを入力すると画像選択ダイアログが開きます。 | ||
+ | Ctrl押しながらクリックで複数選択できます。選択できたらOKで決定します。 | ||
+ | {{:wiki:defold:tips:2016061004.png|}} | ||
+ | \\ | ||
+ | \\ | ||
+ | {{:wiki:defold:tips:2016061005.png|}} | ||
+ | |||
+ | これで画像がAtlasに追加され使用できる様になりました。 | ||
+ | |||
+ | |||
+ | ===== 使ってみる ===== | ||
+ | main.collection を開いてOutLineのSpriteを選択し、imageとDefault Animationを変更します。 | ||
+ | {{:wiki:defold:tips:2016061006.png|}} | ||
+ | \\ | ||
+ | \\ | ||
+ | 変更できたらgoゲームオブジェクトをCtrl+Cでコピーし、Ctrl+Vで複製します。 | ||
+ | そのあと、go ゲームオブジェクトの名前を分かりやすいものに変更しておきます。 | ||
+ | {{:wiki:defold:tips:2016061007.png|}} | ||
+ | |||
+ | 名前の変更はPropertiesのIdから変更できます。 | ||
+ | \\ | ||
+ | \\ | ||
+ | |||
+ | 複製できたらSpriteコンポーネントのProPertiesからDefault Animationを変更します。 | ||
+ | {{:wiki:defold:tips:2016061008.png|}} | ||
+ | |||
+ | ground0のPositionは(0, 0, 0)、ground1は横に並べたいので(380, 0, 0)に変更します。 | ||
+ | Default Animationもそれぞれground01, ground02 を設定します。 | ||
+ | |||
+ | \\ | ||
+ | \\ | ||
+ | OutLineの どれでも良いのでゲームオブジェクトを選択しFキーでフォーカスを移動してmain.collectionを確認します。 | ||
+ | {{:wiki:defold:tips:2016061009.png|}} | ||
+ | |||
+ | Spriteが配置されていればOKです。 | ||
+ | \\ | ||
+ | \\ |