投稿者 tel | 2014年1月2日

ブラウザで動くドット絵エディタを作った

ブラウザで動くドット絵エディタを細々と作っていてやっと公開できそうなところまでできたので公開。

http://dot-a.herokuapp.com

今のところ描いたらTwitterに投稿するだけ。

実装してある機能は

  • ペン
  • 256色パレット
  • スポイト
  • 拡大、縮小
  • グリッド
  • 図形描画(直線、矩形、円)
  • 塗りつぶし
  • 左右、上下反転
  • 選択範囲の移動、コピー

dot-a_ss

ぜひ使ってみてください。

実装のメモとか

一応最小限のサーバサイドのコードをNode.jsを使って書いている。使ったモジュールは

  • Express
  • passport
  • passport-twitter
  • pngjs(フォークしてパレット対応、Readable Stream対応)
  • request

あたりをつかっている。ホスティングはherokuを使った。

クライアントサイドは使っているのはjQueryくらいで、あとはCanvas使った描画処理を色々書いた。

PNGに変換するのはサーバサイドでTwitterに投稿する際にコンバートしている。
描いた絵をサーバに送る際にはパレットとインデックス情報をJSONにしている。


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。