読者です 読者をやめる 読者になる 読者になる

モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

無料のスプライトシート作成ソフト!(『Cocos Studio2』)

 紹介するのは『Cocos Studio2』です。
 これはスプライトシートを作成する専用のソフトではありません。
 
 本職はあくまで開発環境なので、容量はかなり大きいです。
 インストーラが732.3MB、インストール後のアプリのサイズは1.6GBあります。

 でも無料で、ユーザー登録もなく、スプライトシートが作成出来るソフトはあまりないと思います。
 特にMacでは。

『Cocos Studio2』はMac版、Windows版があります。
 私はMacなので、Mac版での操作方法を説明します。

使用環境

 私が使用している環境です。

  • Mac OS X El Capitan Version 10.11.4
  • Cocos Creator Version 1.0.1
  • ブラウザ:Google Chrome Version 50.0.2661.86 (64-bit)

ダウンロード

 ダウンロードは、下記のサイトからです。
Download Cocos2d-x, Cocos Creator and Cocos | Cocos2d-x
f:id:mmorley:20160430202420p:plain:w400
 Windows版は、下のやつです。

インストール

 ダウンロードした『CocosForMac-v3.10.dmg』を開いて『Install Cocos』をダブルクリックします。
f:id:mmorley:20160430203004p:plain:w350
 
 『“Install Cocos”はインターネットからダウンロードされたアプリケーションです。開いてもよろしいですか?』と聞かれたら『開く』をクリックします。
 
『Install』をクリックします。
f:id:mmorley:20160430203558p:plain:w350
 
 Macの管理者のユーザ名とパスワードが聞かれるので入力します。
 
 下記の画面が表示されたらインストール完了です。
 左上の閉じるボタンで閉じます。
f:id:mmorley:20160430211224p:plain:w350

スプライトシートの作成

 さっそくスプライトシートを作成します。
 
 アプリケーションフォルダの『Cocos』フォルダ内の『Cocos Studio 2』(『/Application/Cocos/Cocos Studio 2』)を開きます。
  
 スプライトシートを作るには、アプリ開発用のプロジェクトファイルを作る必要があります。
 『File』-『New Project...』をクリックします。
f:id:mmorley:20160430211838p:plain:w400
 
 保存先だけ変更して、『Create』をクリックします。
 プロジェクトファイルは、作業後は不要なので、わかり易い場所に保存います。
f:id:mmorley:20160430213425p:plain:w400

 『File』-『New File...』をクリックします。
f:id:mmorley:20160430213346p:plain:w400

 『Type』で『SpriteSheet』を選択し、『File Name』を入力して『New』をクリックします。
f:id:mmorley:20160430213829p:plain:w400
 
 『Finder』から、スプライトシートにしたい画像ファイルをドラッグ&ドロップします。
f:id:mmorley:20160430215339p:plain:w500
 
 ファイルを削除する場合は、左下の『Resources』パネルでファイルを右クリックして、『Delete』をクリックし、『Move To Trash』をクリックします。
f:id:mmorley:20160430215958p:plain:w500
 
f:id:mmorley:20160430220056p:plain:w300
 削除されるのは『プロジェクトフォルダ』に自動的にコピーされた画像ファイルです。

スプライトシートの設定と出力

 右上の『Properties』で設定します。
f:id:mmorley:20160430220801p:plain:w500

Size 現在のスプライトシートの画像のサイズ
Allow Any Size 2の乗数以外のサイズで良いか
Allow Clipping 画像の透明部分を切り取って良いか
Maximum Size スプライトシートの画像の最大サイズ
はみ出た部分は出力されません。
Type スプライトシートの画像のファイル形式
pngまたはjpeg
Spacing 登録した画像の間のスペース>
アンチエイリアシング画像等の場合に設定
Allow Rotation スプライトシートのサイズを小さくするために
画像の回転を許可するか

 
 出力するには、『Export Sprite Sheet』ボタンをクリックします。
 保存先を選択して『Open』をクリックします。

以上です。

 作成したプロジェクトファイルは不要なので、フォルダごと削除して下さい。

あとがき

 『Cocos Creator』には、スプライトシートを作成する機能がありません。
 『Cocos Studio2』にはあったのに!
 なので、スプライトシートを作成する時は『Cocos Studio2』を使っています。