ドット絵ツール作成開始
＝前置き＝
GAEでアクションゲームの共有システムを作るにあたり、「ドット絵を自作できると色々と楽だよね」というあたりから、「仕事や家で"作る"作業が多くなるから、しばらくはドット絵で息抜きしよう」という流れになり、「ドット絵に3Dの技術（シェーダとか）を持ってこれないだろうか」という疑問が合わさり、「じゃあ、ドット絵ツールを自作して検証してみよう」という風になったので、ドット絵ツールを作ることになった。
途中で「"作る"作業が多くなるからドット絵を描こう」という流れになったにも関わらず、何故かツールを作っている不思議。
＝方針＝
「テクスチャ（基本の色）とシェード（陰）は分けられる」というシェーダの発想をドット絵でも使えるかどうかを検証するため、「色の指定と陰の指定を別のウィンドウで行うドット絵ツール」を作る。
まぁ、普通のエディタでレイヤーを駆使すれば似たような事はできるんだけど。
ただ、自作すればGAEのアクションゲーム共有システムに組み込めるかもしれないし、自作する。
＝セットアップ＝
Flashのノウハウを流用できるので、今回はツールをAIRで作ることにする。
ということで、まずはAIR用のセットアップをした。
基本的にはhttp://www.saturn.dti.ne.jp/~npaka/flash/apollo10/の「チュートリアル」の項目に従えばOK。
ただ、Flex3SDKに関してはURLが変わったようで、現在はAdobe: Creative, marketing and document management solutionsからダウンロード可能。
セットアップの詳細は「Adobe AIR Flex」とかでググるのに任せるとして、一点だけ「adlが実行できない」というのにはまったのでそこだけ解説。
実行できない原因はhttp://blog.seyself.com/2008/10/post_2008100916.htmlで解説されているように、バージョンの指定が違うため。解説されているようにバージョンを書き換えればOK。
＝サンプル＝
まずは基本的な「お絵かき」の機能を仮で作ってみた。AIRで作ると、ついでにFlashもできるので公開しやすい。画像の保存とかはAIRじゃなきゃできないけど。
とりあえず、マウスで灰色のドットが打てるようになったところまで。
＝コード＝
一応コードも載せておく。ゲームから流用してるので変数名にCAMERAが使われていたり、クラスを使わずにクラスっぽい挙動をさせてみたりしてるので、あまり良いサンプルではないかもしれないけど、普通のサンプルなら前述のサイトにもあるし。
以下のファイルを指定ファイル名で保存して、「amxmlc DotEditor.mxml」でswfが作成できて、「adl.exe DotEditor-app.xml」でAIRとしての動作確認ができる。
Game.as
package {
import flash.display.*;
import flash.events.*;
import flash.filesystem.*;
import flash.utils.*;
import flash.filters.*;
import flash.geom.*;
//mxml
import mx.core.*;
import mx.controls.*;
import mx.containers.*;
//Class
public class Game extends Box {
//==Const==
static public const CAMERA_W:int = 320;
static public const CAMERA_H:int = 320;
//==Var==
public var m_Canvas_Color:Image;
public var m_Color_Graphic:uint = 0x888888;
//==Function==
public function Game() {
}
public function Init():void{
{
var createCanvas:Function = function(i_GetColor:Function):Image{
var bmp_data:BitmapData = new BitmapData(32, 32, true, 0xFFFFFFFF);
var img:Image = new Image();
{
img.addChild(new Bitmap(bmp_data));
}
{
//#メンバ変数相当
//マウスが押されてるかどうかを知るためにフラグを持っておく
var is_mouse_down:Boolean = false;
//線を引くために前回の位置を覚えておく
var mouseX_Old:int = 0;
var mouseY_Old:int = 0;
//#マウスに応じた処理
//Move
img.addEventListener(
MouseEvent.MOUSE_MOVE,
function(e:MouseEvent):void{
if(e.buttonDown){
//!!ここで代わりに線を引く
bmp_data.setPixel(img.mouseX, img.mouseY, i_GetColor());
}
mouseX_Old = img.mouseX;
mouseY_Old = img.mouseY;
}
);
}
return img;
}
m_Canvas_Color = createCanvas(function():uint{return m_Color_Graphic;});
addChild(m_Canvas_Color);
m_Canvas_Color.scaleX = 10;
m_Canvas_Color.scaleY = 10;
}
}
}
}
DotEditor.xml
<?xml version="1.0" encoding="UTF-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:comp="*"
paddingTop="0" paddingLeft="0"
paddingRight="0" paddingBottom="0"
applicationComplete="init()"
>
<!--Script-->
<mx:Script>
<![CDATA[
//最初のロード完了時の初期化
private function init():void{
//幅を、実際のゲーム画面に合わせる
MyViewStack.width = Game.CAMERA_W;
MyViewStack.height = Game.CAMERA_H;
button_to_start.width = Game.CAMERA_W;
button_to_start.height = Game.CAMERA_H;
}
//ボタンが押されて開始する時の処理
private function start():void{
MyViewStack.selectedChild = main_game;
main_game.Init();
}
]]>
</mx:Script>
<!--View-->
<mx:ViewStack id="MyViewStack" width="10" height="10">
<mx:HBox borderStyle="none">
<mx:Button id="button_to_start" label="Click to Start" buttonDown="start()" width="10" height="10"/>
</mx:HBox>
<comp:Game id="main_game" borderStyle="solid"/>
</mx:ViewStack>
</mx:Application>
DotEditor-app.xml
<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
<id>show.o.healer.DotEditor</id>
<version>1.0</version>
<filename>DotEditor</filename>
<description>"graphic" and "shade" painter</description>
<copyright>Show_O_Healer</copyright>
<initialWindow>
<title>DotEditor</title>
<content>DotEditor.swf</content>
<systemChrome>standard</systemChrome>
<transparent>false</transparent>
<visible>true</visible>
</initialWindow>
</application>
