Tag Archives: iDraw

enchant.jsのステージサイズについての基礎知識

0
Filed under JavaScript
Tagged as , , ,

enchant.jsを使い始めているのですが、その基礎部分についてちょっと調べてみたメモです。

enchant.jsとは

本家サイトより引用。

enchant.js は HTML5 + JavaScript ベースのゲームエンジンです。わずか30KBのソースコードで、PC, Mac, iPhone, iPad, Android すべてで動作する クロスプラットフォームなアプリケーションを開発可能なスタンドアロンライブラリです。

ゲームに限らずあれこれ使えるので、既に色々調査を進めているところですが、ちょっと今日はその基礎部分が気になったので調べました。
enchant.jsのページ内の表示サイズについて、任意のサイズに収めたいと思って調べたのですが、あまりその辺りのドキュメントが見当たらなかったので、大したことではないのですが書いておきます。

HTMLとenchant.js

enchant.jsを使うとき、描画領域を指定するところは、実は2ヶ所あります。
enchant.jsのサンプルのように、HTML上に最大表示するものは、特に何も指定することはなく、それでもenchant.jsが内部的に適切なDOM要素を追加してくれますが、自分でここに使いたい!というときは、divタグを使う必要があります。

  <div id="enchant-stage"></div>

まずは、上記のように書くと、div#enchant-stage に、enchant.js内のGameインスタンス生成時に渡したサイズで描画されます。

  // @game.js
  game = new Game(320,320);

では、160×160の領域に、Game(320,320)で作ったenchant.jsの領域を埋め込みたい(1/2に縮小表示したい)ときは、どうしたらいいでしょうか?
enchant.jsのソースを調べた結果、次のコードで大丈夫と分かりました。

  <div id="enchant-stage" style="width:160px;height:160px;"></div>

まとめ

■概念図


(↑この図は先日のブログで紹介したiDrawで作りました!)

■等倍表示

<div id="enchant-stage" style="width:320px;height:320px;"></div>
// @XXX.js
game = new Game(320,320);

■1/2(縮小)表示

<div id="enchant-stage" style="width:160px;height:160px;"></div>
// @XXX.js
game = new Game(320,320);

Gameの方のサイズを変更すると、素材や各種座標も変更する必要があり、調整が大変なケースが多々あります。そういうときにも使えるテクニックですね。
まぁ、仕事で使おうとしたらそれぞれの案件でいろいろやりたい事があるわけで、そういうときに自由に解析して簡単に修正して商用にも使えるenchant.jsって超便利!と再認識した次第。
(enchant.js のライセンスは、MITライセンス / GPL2 のデュアルライセンスです)

オフィシャル本

最近、オフィシャル本が発売されたようですが、大人気のようですが、私はまだ必要に迫られていないのもあって入手していません。
こういうところも書かれていたりするのかな?

HTML5とJavaScriptでスマートフォンゲーム作成! ゼロからはじめるenchant.js入門【公式ガイド】

著者/訳者:布留川英一 伏見遼平 田中諒

出版社:KADOKAWA/アスキー・メディアワークス( 2012-02-18 )

定価:

Amazon価格:¥ 3,240

大型本 ( 272 ページ )

ISBN-10 : 4048862588

ISBN-13 : 9784048862585



まぁ、今回の内容も、enchant.jsの中を追っかけていけば分かることだったりしましたし、書店で見かけたら中を確認して買おうかと思っています。


[AD]

↓beautifulなもの作りたいですね!

ビューティフルビジュアライゼーション (THEORY/IN/PRACTICE)

著者/訳者:Julie Steele Noah Iliinsky

出版社:オライリージャパン( 2011-10-26 )

定価:

Amazon価格:¥ 4,104

大型本 ( 400 ページ )

ISBN-10 : 4873115043

ISBN-13 : 9784873115047


iDraw: Hello VECTOR (again)

1
Filed under iPadアプリ, Mac, 仕事ツール
Tagged as , , , , ,

ベクターファイルフォーマットのSVGを編集しようと探し、見つけたアプリ iDrawについてのエントリです。

iDraw:SVGを編集

Macでベクターイラスト系アプリといえば、Adobe IllustratorかInkscape、という認識だったのですが、illustratorは高価なので、とりあえず却下。
で、Inkscapeは、Xウィンドウプログラムをポートした形そのままで、Gimp同様いまいちダサく感じてしまい、使い続けられる気がしない。去年、ちょっと試していたりするんですけどね(ブログ参照)
そこで、今回 Mac App Storeで探してみて発見したのがiDraw。結論言っちゃうと、これ最高ッス!!!
iDraw - Indeeo, Inc.(←Mac App Storeへのリンク)

基本機能は網羅!

私はある程度Adobe Illustratorは使えるのですが、その感覚でスッと使い始められたのが感動!
2,200円と安くはない値段ですが、これならOKです!!
ベジェ曲線のポインタも自由にいじれるし、レイヤーあるし、パスの合成もあるし、ショートカットキーもillustratorに似せられているし。まぁ、ここまでができていたら合格かな、と思っていたので十分満足。
エフェクトは揃っていませんが、レイヤーの色合成はいろいろ揃っているのと、ドロップシャドーだけはあり、もちろん、パスを変更するとそれに柔軟に追随してくれるので、あまり問題にならないかな。
それ以上にいろいろ驚いたのは、ブラシモード。残念ながらペンタブレットの筆圧には対応してなかったけど、描いたラインはパスになっているからあとで微調整も可能。
Shape Libraryとかあるのは超便利で、しかもiPhoneとかのテンプレートもある!

そして、極めつけは今回やりたかった、SVG取り込みと、SVG書き出し。
本当に満足できて、超オススメのアプリです!
ちなみに、iPad版のiDrawもあるようで、それも試してみたいー。
iDraw - Indeeo, Inc.(←App Storeへのリンク)

無い機能=欲しい機能

  • パス(コントロールポイント)の最適化
  • 他のオブジェクトの位置にスナップ
  • コントロールポイント表示の大きさカスタマイズ(ちょっと大きく感じることがある)
  • ツールパネル、レイヤーパネルも他のコントロールパネルみたいにフロート式にして欲しい

[AD]

↓iPad用で評判がいいスタイラス、Jot。欲しいなぁ。

↓ベクターデータ的イラストーレション集。カッコイイ。

ベクターイラストレーションToday

出版社:グラフィック社( 2011-11-07 )

定価:

Amazon価格:¥ 4,104

単行本(ソフトカバー) ( 296 ページ )

ISBN-10 : 4766122879

ISBN-13 : 9784766122879


↓Adobeのセットを購入、というのが最高の選択肢なんだけど、お金的に難しいことも多い。

Adobe Creative Suite 5.5 Design Standard Macintosh版 (旧製品)

Adobe Creative Suite 5.5 Design Standard Macintosh版 (旧製品)

定価:¥ 204,120

カテゴリ:DVD-ROM

発売日:2011-05-20