[ CATEGORY ] update…http://www.dango-itimi.com/blog/archives/flash/
Adobe Animate CC 拡張機能 Linkage 1.0.4: WebGL Document 対応
Adobe Animate CC ライブラリ内の、選択したアイテムのリンケージ設定を一括で行う 拡張機能、Linkage 1.0.4 を公開しました。
WebGL(Preview) Document に対応しています。
https://github.com/siratama/Linkage
[ FLASH ] [ update ] 2016年09月18日 19:02 | コメント (0) | トラックバック
Haxe: Photoshop タイムラインフレームアニメーション情報を出力する FrameAnimationExport と、その出力データを Flash Pro CC に読み込み MovieClip 化する FrameAnimationImport を公開
Photoshop CC 用拡張パネル FrameAnimationExport と、Flash Pro CC 用拡張パネル FrameAnimationImport 二点を公開しました。Haxe で作成しています。
https://github.com/siratama/FrameAnimationExport
https://github.com/siratama/FrameAnimationImport
FrameAnimationExport を利用する事で、今まで不可能だったタイムラインフレームアニメーションの各フレーム内画像データの位置情報・不透明度を出力する事が可能です。原点座標オフセット機能等を用意しており、Photoshop で作ったデータをそのまま他のアプリケーションで利用しやすい形に再現できます。
FrameAnimationExport から出力したデータを別アプリケーションで利用する一例が、FrameAnimationImport for Flash Pro CC となります。
今までは、Photoshop で作成したフレームアニメーションを Flash Pro CC 上で再現するために、データ読み込み後、毎回どのフレームでどの画像が表示されるか、あるいは配置位置はどこなのかを手動で調整しなくてはなりませんでした。しかし当拡張機能を利用する事で、その手間は無くなります。
[ FLASH ] [ update ] 2015年09月21日 13:43 | コメント (0) | トラックバック
Haxe: 全選択レイヤー内 各キーフレームのフレームを増減させる Flash Pro CC 拡張パネル FrameInsertEveryEachKeyFrame を公開
選択したレイヤー内 各キーフレームのフレームを増減させる Flash Pro CC 拡張パネル FrameInsertEveryEachKeyFrame を公開しました。Haxe で作成しています。
https://github.com/siratama/FrameInsertEveryEachKeyFrame
[ FLASH ] [ FLASH ] [ update ] 2015年09月12日 09:12 | コメント (0) | トラックバック
Haxe: 選択したライブラリ内アイテムを一括で複製する Flash Pro CC 拡張パネル LibraryItemDuplication 公開
選択したライブラリ内アイテムを一括で複製する Flash Pro CC 拡張パネル LibraryItemDuplication を公開しました。Haxe で作成しています。
https://github.com/siratama/LibraryItemDuplication
なるべく利用しやすい形で複製するようにしています。例えば左図の選択状態で LibraryItemDuplication を実行すると 右図のような状態で複製されます。
[ FLASH ] [ FLASH ] [ update ] 2015年08月22日 22:11 | コメント (0) | トラックバック
GAFmedia 対応 Flash Pro CC 拡張パネル FlashToHaxeConverter 5.0.0 公開
GAFmedia に対応した Flash Pro CC 拡張パネル FlashToHaxeConverter 5.0.0 を公開しました。
https://github.com/siratama/Flash-To-Haxe-Converter
README やサンプルソースコード等、以前よりも見やすくなるようシンプルに作りなおしています。
GAFmedia に関しましては最近個人製作者向けに良い動きがあった事と、Haxe で利用するには少々手間がかかる箇所があるため、別途記事で紹介したいと思います。
[ FLASH ] [ FLASH ] [ update ] 2015年08月06日 18:46 | コメント (0) | トラックバック
Haxe: シンボル名をプロパティ名にする Flash Pro CC 拡張パネル AutoPropertyName 公開
シンボル名をプロパティ名にする Flash Pro CC 拡張パネル AutoPropertyName を公開しました。Haxe で作成しています。
https://github.com/siratama/AutoPropertyName
時たま発生する「シンボル名とプロパティ名を同値に設定する作業」を簡単に行えるよう、今回の拡張パネルと jsfl を作成した次第です。
[ FLASH ] [ FLASH ] [ update ] 2015年07月25日 21:26 | コメント (0) | トラックバック
Haxe: 角のない 1px の外枠線を描く Photoshop CC 拡張パネル PixelOutline を公開
角のない 1px の外枠線を描く Photoshop CC 拡張パネル PixelOutline を公開しました。Haxe で制作を行っています。
https://github.com/siratama/PixelOutline
ドット絵制作を行っていると、図に対し 1px の角のない外枠線を引く場面がちょくちょく出てきます。範囲選択ツールなどを用いる事で 1px 外枠線を引く事は可能ですが、微妙に手順が面倒なため、今回の拡張機能を制作しました。
先日公開した PaletteChange よりも内容はとてもシンプルなので、ソースコードも見やすくなっていると思います。Haxe での拡張パネル制作に興味のある方は github の方をご確認ください。
Adobe による Extension Manager の開発/メンテナンスが終了したことにより、Adobe Extension Manager による拡張機能のインストールが行えなくなりました。かわりに、Extension Manager Command Line tool というものを利用して、拡張機能をインストールする必要があります。
ユーザは少々面倒な作業を行わなくてはインストールができず、あまりよろしくない状況です。 Adobe Add-ons のサイトに拡張機能を登録すれば、このやや面倒なインストール作業は避ける事ができるので、不具合がなくなり安定した頃に登録したいと思います。
Extension Manager Command Line tool (ExManCmd) :英語
https://www.adobeexchange.com/resources/28
Windows の場合、ExManCmd.exe と同ディレクトリに zxp ファイルを配置し、コマンドプロンプトで ExManCmd.exe 配置ディレクトリに移動後、「ExManCmd.exe /install PixelOutline.zxp」と入力する事でインストールが可能。
Extension Manager サポート終了のお知らせ :日本語情報
https://helpx.adobe.com/jp/creative-cloud/kb/cq06221550.html
Adobe Labs のページからダウンロード可能な、Windows用 Adobe Extension Builder 3 並びに CC Extension Signing Toolkit(ZXPSignCmd.exe) はタイムスタンプ認証エラーが発生し zxp ファイルを制作する事はできない。修正が行われた ZXPSignCmd.exe は github 上からダウンロード可能。修正が行われた Adobe Extension Builder 3 は当記事執筆時はおそらく存在せず。
https://github.com/Adobe-CEP/CEP-Resources
[ FLASH ] [ tips ] [ update ] 2015年07月20日 20:06 | コメント (0) | トラックバック
Haxe: ドット絵製作者・ドット絵アニメーター向けの Photoshop CC 拡張パネル PaletteChange を公開
Photoshop ドット絵製作者・ドット絵アニメーター向けの、Photoshop CC 拡張パネル PaletteChange を公開しました。Haxe で制作を行っています。
https://github.com/siratama/PaletteChange/
PaletteChange を利用する事で、全てのレイヤーに対し、キャンバス内で使用されているパレットAの色を パレットBの色に塗り替える事ができます。
使用例紹介動画
Photoshop のフレームアニメーション機能を用い、制作したアニメーションキャラクターに対して色違いのキャラクターを作りたい、という場合に利用できます。
例えば以下、左が元のアニメーションキャラクターで、右が PaletteChange を利用して着色を変更したアニメーションキャラクターです。
Adobe 製品は jsx または jsfl という JavaScript を記述する事で、任意の処理の自動化を行うことができます。更に拡張パネルを利用すると「jsx の実行結果を元に他の jsx を実行する」といった、jsx 単体では難しかった複雑な処理も可能になります。
Photoshop CC 以降の拡張パネルは html で作成するため、拡張パネルの制御も JavaScript で行います。拡張パネルと jsx(or jsfl) の関係は、例えば Web サイトの、クライアントとサーバの関係と同じようなイメージとなります。２つのプラットフォームをまたがって処理が実行されます。
拡張パネル制御、Photoshop 制御(jsx)、どちらも JavaScript で制御を行い、なおかつクロスプラットフォームプログラミングとなると、altJS として利用可能な Haxe が有用できます。
拡張パネルは、jsx の実行結果を文字列で受け取ります。jsx でどのような処理結果になったのかの判定と、処理結果に伴うデータの取得、いずれも Haxe の enum と Serializer/Unserializer が活躍してくれます。
Haxe enum イベント監視例
http://www.dango-itimi.com/blog/archives/2015/001227.html
PaletteChange のソースコードは github に公開しているので、Adobe 製品の拡張パネル制作での Haxe 利用に対し、興味を持たれたら御覧ください。
andy hall: CEPスーパー メガ ガイド： HTML5＋NODE.JSでADOBEのツールを拡張する
Google+, twitter 等に書いたメモの箇条書きまとめです。
Adobe CC 拡張パネルを開発するには、Extension Builder 3.0 ではなく Creative Cloud Extension Builder for Brackets を利用する方法もあり。ただし Brackets には zxp 形式の出力機能はなく、日本語ユーザ名だとエラーで機能せず。
---
Adobe Extension Builder にて Adobe CC 2014のデバッグを可能にする設定説明ページ内、Step2 にWindows用の設定の説明が抜けている点が注意。
Adobe Extension Builder and Creative Cloud 2014
私の場合は以下の設定を行いました。
Service Manager Root Folder C:\Program Files (x86)\Common Files\Adobe\CEP User-specific Service Manager Root Folder C:\Users\UserName\AppData\Roaming\Adobe\CEP
---
拡張パネル上では、ネット上からダウンロードした jQuery v1.11.2 min版を使用しても機能してくれず。Adobe Extension Builder 3のプロジェクト生成時に付与される jquery.js(v1.9.1)ならば問題なく動作する。
---
http://aphall.com/2014/08/cep-5-tool-integration/
上記参考 URL には ScriptPath にフォルダを指定できるとありますが、それを行ってしまうと CSInterface.evalScript が呼び出せなくなってしまう模様。フォルダではなく単体の jsx 指定なら問題なし。
---
Haxe/JS Map.exists メソッドは、単体の jsx からの利用は問題無いが、拡張パネル経由で呼び出した jsx ではエラーが発生する。exists ではなく配列演算子でのアクセス map[n] ならば問題無し。ものすごく限定的なエラー。
---
拡張パネル evalScript 経由で jsx 内 Bool 値を取得すると "true" or "false" の文字列が返却される。
Layers クラスは index メソッドを利用するとエラーに。layers[n]記述で子にアクセスする必要あり。Haxe extern 定義は ArrayAccess を利用する事。jQueryExtern の jQuery クラス参照。
Layers クラスと同じような、配列演算子によるアクセスが必要なクラスは他にも多い。
---
Selection.similar メソッドを呼び出すことで、指定座標のピクセルと同等の色を持つ全てのピクセルの選択が可能になる。自動選択ツールの[隣接]指定を解除した状態と同等の動作。
---
Adobe jsx では 数値+単位 を扱う UnitValue クラスオブジェクトでデータのやり取りが行われるようですが、adobe サイトからは詳細情報が見つからず。今のところ見つかったのが以下の URL。
http://jongware.mit.edu/Js/pc_UnitValue.html
---
Photoshop jsx, $.evalFile での複数ファイル同時読み込みは行わないほうが良い模様？Haxe 出力のやや大きめのファイルを同時に読み込もうとしても、初めのファイルしか読み込んでくれないといった症状が発生。順次読み込みが無難。
---
Haxe の @:expose 指定による JavaScript 出力は jsx ではエラーとなるため、-D js-classic 指定と @:native 指定を活用する。
---
Haxe で -D js-classic 指定を行った jsx ファイルを複数読み込むと、グローバルで干渉しあうクラスが発生するためか、jsx ファイルが正常に動作しなくなる。@:keep 指定を利用し jsx ファイルは一つにまとめることで解決する。
---
Photoshop jsx, Layer.typename で対象レイヤーがレイヤーセットかどうかの判定が可能になりますが、公式(と思われる)ドキュメントには載っていない。
---
ピクセルの色を取得する ColorSampler.color プロパティは、ピクセルが透明の座標にアクセスするとエラーに。try catchでエラーを取得する事でしか透明判定ができない。
---
Haxe/JS try catch にて、catch(error:String) を行うと、出力 JavaScript 内に throw が記述されるが、jsx では throw 記述を行うとエラーになる。catch(error:Dynamic) にする事で catch 内で throw が記述される事がなくなる。
---
ドキュメント内ピクセルの色を一つ一つ取得する処理は、結構時間を要する。100x100ピクセルのドキュメントサイズでも数分以上かかる。jsx の実行途中で終了させる機能はなさそうなため、拡張パネル側から順次 jsx の処理を呼び出し、いつでも中断できるような機能を自前で用意する必要あり。
---
ColorSampler には不具合がある。解決方法は、抽出対象のピクセル座標に0.1を加える、という謎の方法。
Don't Trust PhotoShop's JavaScript ColorSampler
---
ColorSampler にて一度に抽出可能な色数には制限があり？一定値を超えると処理が止まる。随時 ColorSampler.remove を実行する事。
---
Document.activeLayer 周りの不具合と対処法：長くなったため別記事にしました。
Photoshop CC 2014: JSX Document.activeLayer の妙な挙動と対策
Photoshop CS6 用の拡張パネルを swf で作成するも CSXSInterface.instance が null を返す問題が解決できず。世のサンプルはどれも mxml ファイル(Flex)で作られており、素で生成した swf では作成できない？
---
Photoshop の タイムラインウインドウ フレームアニメーション の情報取得・操作を行う機能は標準APIにはない模様。ScriptListener から裏APIを調査する必要がありそう。
参考になりそうなjsx: Animation Exporter v1.5.jsx
---
C:\Users 配下に文字化けしたユーザ名が消しても消しても勝手に作られてしまい困っていましたが、Photoshop CC の Welcome 画面で「Hello 文字化けユーザ名!」と表示された事を確認。日本語ユーザ名のAdobeユーザは同じ症状の人が多いのだろうか。
---
Photoshop CC フレームタイムラインアニメーションでは、レイヤー結合後、結合したレイヤーが全てのフレームに表示されてしまう不具合がある。
Photoshop CC: Layer Merging Behavior with Timeline Animations (Bug?)
このエラーを回避するため、PaletteChange ではややスマートではない方法を採っている。
[ FLASH ] [ tips ] [ update ] 2015年05月31日 12:24 | コメント (0) | トラックバック
みんなの星探2 公開
星を探すミニゲーム集「みんなの星探2」に参加しました。
■ みんなの星探2 TOPページ
http://hoshisaga.s3-website-ap-northeast-1.amazonaws.com/hoshi10/index.html
私のミニゲームは「ちょんまげゲーム」のキャラクターを用い、Haxe で作成しています。
まったりと遊んでいただけたら幸いです。
星探 総合TOP
http://hoshisaga.jp/
[ FLASH ] [ FLASH ] [ GRAPHIC ] [ update ] 2014年07月07日 07:55 | コメント (0) | トラックバック
Haxe で作成した Flash & HTML5 ミニゲームサイト「ちょんまげゲーム」公開中
Haxe で作成した Flash & HTML5 ミニゲームサイト「ちょんまげゲーム」公開中です。HTML5 版はスマートフォンでも遊べます。
ちょんまげゲームでは主に以下の二通りのゲームがあります。
・神経衰弱やブロック崩しといった 簡単なミニゲーム
・脱出系ゲーム
ミニゲームは、試しに作ってみたゲームに最低限のグラフィクスや演出を加えた内容となっています。Google Play Game Services により ゲーム結果ランキング登録が可能なため、多少遊べるものにはなっているかと思います。
脱出系ゲームはストーリー仕立てで そこそこ凝った内容となっています。専用の BGM もいくつか作成しており、後にミュージックボックス的にどこかページを設けたいところです。
最新ミニゲームです。物理演算ライブラリ Nape を初めて利用してみました。
物理演算ライブラリ Box2D + 脱出系要素を取り入れたゲームです。ちょんまげさむらいを操ってカラクリ城からの脱出を目指します。
オーソドックスな脱出系ゲームです。カラクリ祭の裏で起こった とある仕事人の脱出劇となります。
ちょんまげゲームは、昨年調査した内容を実践したサイトとなります。
・Haxe によるクロスプラットフォームプログラミング(Flash & HTML5 canvas)
・Flash コンテンツ開発工程に沿った CreateJS コンテンツ開発
・Toolkit for CreateJS(現 HTML5 canvas ドキュメント出力) と Haxe との連携
・Flash CC JSFL拡張機能 関連
・Google Play Game Servieces
上記全てに Haxe が関わっています。その他サイト構築としましては以下を利用しています。
・静的 HTMLサイト制作用 自作 Adobe AIR 製アプリケーション
・一部に Google App Engine/Python
静的 HTML サイト制作用 AIR アプリは ActionScript3.0 で作成していますが、今後 Haxe に移植したいところです。
脱出系ゲームは、特に国内で人気のあるジャンルで、公開後すぐに 1～2万人くらいの人が遊びにきてくれます。Flash と HTML5 Canvas ゲーム両方を公開して、どれくらい HTML5 Canavs 版がプレイされるのか調べてみたところ、一番アクセスの高いゲームでは以下のようになっています。(数値はページビュー)
Flash : HTML5 = 60500 : 4500
だいたい 100人中 7人が HTML5 Canvas 版をプレイした事になります。iPhone 以外はデフォルトで Flash ゲームを表示するようにしているため、この数値が高いのか低いのかの参考にはならないかもしれません。
より多くの人に取りこぼし無く遊んでもらうために HTML5 Canvas ゲームも同時に制作するのはありだと思います。ただし、Flash 制作と同じ工程で同じものを作れるようになるまでには準備や学習に対するコストがかかります。また、HTML5 Canvas では表現が難しい or 制作が大変なものが多いです。
例えば、脱出ゲームの文字表示として利用している ビットマップフォント「美咲ゴシック」を表示するのは Flash では容易いですが、HTML5 Canvas では結構な労力を使います。他のビットマップフォントを表示してほしい、と言われたら別途表示する方法をゼロから考える必要がでてきたりします。
現在までのちょんまげゲームでの Google アカウントログイン ユニークユーザ数は、だいたい 1000人ほどです。
初めての脱出ゲーム制作後、何万人とアクセスされたものの、Google Play Game Services にログインしてまでプレイしてくれる人はほとんど無い状況でした。ログインする事によりゲームヒントがもらえるようにしてみたところ、少しずつログインしてくれる人が増えた形となります。
Google アカウントは多くの人が所持しているであろう事から、アカウントをゼロから作成してもらう手間は省けますが、それでもログインしてもらうには多くの工夫が必要となりそうです。
各脱出系ゲームは iPhone アプリ化も行っています。HTML5 Canvas で遊べるのだから、アプリ化する必要性はあまりないかもしれませんが、多少の流入を目的として制作しました。
Haxe で制作しているという事から、モバイルアプリ化には以下の選択肢があります。
(a)Flash 版を Adobe AIR を介してアプリ化
(b)Flash 版を OpenFL を介してアプリ化
(c)HTML5 Canvas 版を WebView を利用してアプリ化(ガワネイティブ)
ちょんまげゲームの作業工程上 一番手間がかからない、という事から(c)を選択し Adobe AIR の StageWebView を利用してアプリ化しました。
Android に関しましては、Adobe AIR の StageWebView では以下の問題があるためアプリ化は見合わせています。
CreateJS 製コンテンツを Android WebView で表示するも問題発生
http://www.dango-itimi.com/blog/archives/2013/001197.html
[ FLASH ] [ GRAPHIC ] [ tips ] [ update ] 2014年04月14日 19:00 | コメント (0) | トラックバック
SAIcoron RPG DEMO版公開
一年ほど前に作成していましたがボツにしたゲームをデモ版として公開しました。
http://www.dango-itimi.com/dice_rpg/
どうもパズル内容が面白くないという事と、Haxe への移行期だったため制作の意欲が薄れてしまい ボツに至りました。
ドット絵キャラクターのアニメーションは結構凝った作りとなっているため、ちょっとでも遊んで見ていただけたら幸いです。ゲーム開始時、一番下の段の 三の目を右に回すと一番派手な SPECIAL 技の演出を最後まで見ることができるようにしています。
[ FLASH ] [ GRAPHIC ] [ update ] 2014年04月05日 18:54 | コメント (0) | トラックバック
Flash CC 拡張機能 Linkage 1.0.1 不具合修正
不具合修正を行った Flash CC 拡張機能の Linkage 1.0.1 を公開しました。
https://github.com/siratama/Linkage
リンケージIDの無いシンボルに対し remove ボタンを押すとエラーが発生していた不具合の修正を行いました。なぜ今までこの不具合に気づかなかったのか不明であります。
[ FLASH ] [ update ] 2014年04月02日 19:39 | コメント (0) | トラックバック
FlashToHaxeConverter 4.0.2 OpenFL 用出力不具合修正
FlashToHaxeConverter の OpenFL 用出力の不具合修正を行った ver 4.0.2 を公開しました。
https://github.com/siratama/Flash-To-Haxe-Converter
Flash CC のパブリッシュ設定にて、swf 出力先を fla ファイルと同一ディレクトリ以外に設定した場合、FlashToHaxeConverter から swf ファイル名を正常に取得できていなかったため修正しました。
swf ファイル名は OpenFL 用出力 hx ファイル内のコンストラクタの箇所で使われます。例えば、パブリッシュされる swf が assets.swf という名前の場合、以下の様なファイルが出力されます。
package sample;
import flash.display.MovieClip;
import flash.text.TextField;
import openfl.Assets;
abstract CircleView(MovieClip){
public function new()
this = Assets.getMovieClip('assets:sample.CircleView');
@:to public function getInstance():MovieClip
return this;
}
assets.swf ファイルが swf ディレクトリに配置されている場合、OpenFL の project.xml ファイルには以下の記述を行うことで、上記 CircleView クラスを利用する事が可能となります。
<library id="assets" path="swf/assets.swf" type="swf"/>
Assets.loadLibrary("assets", function(_){
var circleView = new CircleView();
});
FlashToHaxeConverter の OpenFL 用出力は 半年以上前に制作し それ以降 利用していませんでしたが、swf 出力パスの問題以外はそのまま動作してくれて一安心です。
最新の OpenFL 環境を構築したところ、Android NDK 64bit 版の場合 実行コマンドでエラーが発生する問題は解決していたようなので、以下の記事に追記を行いました。
http://www.dango-itimi.com/blog/archives/2013/001189.html
OpenFL 制作にて懸念点であった Admob 表示をどうするか、に関しまして、拡張機能が以下で公開されているようなので、試してみたいと思います。
https://github.com/mkorman9/admob-openfl
[ FLASH ] [ FLASH ] [ tips ] [ update ] 2014年04月01日 12:43 | コメント (0) | トラックバック
Flash CC のシンボル内データを 物理演算ライブラリ用に抽出する Haxe ライブラリ FlashToPhysicsObjectParser を公開
Flash CC のシンボル内データ(x, y, width, height, rotation, vertices)を 物理演算ライブラリ用に抽出する Haxe ライブラリ FlashToPhysicsObjectParser を公開しました。
https://github.com/siratama/FlashToPhysicsObjectParser
ドキュメントは日本語と英語を別々に用意しています。
以下ドキュメントより抜粋
■ 匿名シンボルの解析
プロパティ名を設定したシンボルの他、プロパティ名を設定していない匿名シンボルの解析も行えます。ゲームの障害物といった、スクリプト操作を行う必要のない ただ配置するだけの静的なオブジェクト等に利用できます。
■ HTML5 Canvas ドキュメントから出力されたデータの解析
swf の他、やや独特なフォーマットの HTML5 Canvas 用出力データ(CreateJS用データ)の解析を行えます。
以前作成した「Flash CC 内シンボルを Box2D オブジェクトに変換するライブラリ」は独自ルールが多く、また Box2D と強く結びついてしまっており他の物理演算エンジン(Nape等)で扱えないという難点もありました。
よって今回作成したライブラリは、コンパクトに、尚且つ独自ルールはほぼ皆無の、2D物理演算ライブラリで汎用的に利用できる内容にしました。気軽に扱えるよう、ドキュメントは みっちり記述しています。
[ FLASH ] [ tips ] [ update ] 2014年03月09日 19:03 | コメント (0) | トラックバック
FlashToHaxeConverter 4.0.1 不具合修正
FlashToHaxeConverter の各不具合を修正した ver4.0.1 を公開しました。
https://github.com/siratama/Flash-To-Haxe-Converter
■ 拡張パネル(zxp)版・ダイアログ版 両方
・HTML5 Canvas ドキュメントで FlashToHaxeConverter を実行すると無限ループエラーになってしまう不具合を修正
Flash のドキュメント形式が、AS3 と HTML5 Canvas とで別れてしまったことにより発生してしまった不具合でした。 今回の修正により、HTML5 Canvas ドキュメントでは OpenFL 用 hx ファイル出力は不可となりました。
■ 拡張パネル(zxp)版
・ドキュメントファイルを切り替えると fla ファイルに変更がかかったものとして扱われてしまう不具合を修正
・複数のドキュメントを素早く切り替えると テキストフィールドに 他のドキュメントの値が設定されてしまう不具合を修正
fla ファイルを開いた際、あるいは複数 fla ファイルを開いてドキュメントを切り替えた際、FlashToHaxeConverter テキストフィールド欄が空になってしまう不具合を確認しています。どうも fla ファイルに記録している FlashToHaxeConverter 用データが読み込めない場合があるようです。発生条件がわからず修正ができない状況です。
こちらの PC では 拡張機能書き出し後 Flash CC 自体が不安定になる事があり(フリーズ寸前になる)、それが何らかの原因となっているのか、あるいは Haxe から出力された Javascript ファイル内の何か記述が悪さをしているのか、もしくは単純にプログラミングのミスなのか。原因が判明次第修正したいと思います。
[ FLASH ] [ tips ] [ update ] 2014年03月07日 19:35 | コメント (0) | トラックバック
Flash CC 13.1以降対応 リンケージ設定 GUI版公開
Flash CC 13.1 より利用可能な html によるカスタムパネル機能を用いて、リンケージ設定 GUI 版を作成しました。
https://github.com/siratama/Linkage
Flash CC メニュー「ウインドウ」->「エクステンション」内にある「Linkage」の項目を選択すると以下のパネルが表示されます。
パネルはライブラリウインドウの上部あたりに配置しておくと便利です。
カスタムパネルは html を利用して作成可能という事で、画面内ボタン操作時の処理 は Haxe(javascript) を利用して記述しています。ボタンや背景色は Flash CC のデフォルトカラーを元に設定しているので、カラーテーマを変更していると、とても浮いた色になってしまうかもしれません。
現在 Adobe Extension Builder 3 では、プロジェクトルートディレクトリ直下に、html ファイル等を配置する ExtensionContent ディレクトリが作成されます。この ExtensionContent ディレクトリの名前を変更する、あるいは他のディレクトリへ移動する等行うと、zxp ファイルの出力や Run テストが行えなくなってしまいます。(.setteing/.jsdtscope ファイル内の ExtensionContent への path を変更すると、eclipse 上では認識されますが zxp ファイル出力はエラーとなってしまいます。)
任意のディレクトリに ExtensionContent ディレクトリの内容を配置したい場合、シンボリックリンクを設定する事で解決できます。
上図では、trunk/extension_content 内に html や js ファイルなど配置し、プロジェクトディレクトリ直下に ExtensionContent というシンボリックリンク設定を行っています。trunk ディレクトリ内には github へアップロードを行うファイル群を配置しています。
[ FLASH ] [ tips ] [ update ] 2014年02月09日 22:14 | コメント (0) | トラックバック
FlashToHaxeConverter 3.2.2 バグ修正・他 jsfl Instance オブジェクトに関して
Flash ライブラリ内の構造をそのまま Haxe extern ファイルに出力を行う、FlashToHaxeConverter のバグ修正を行いました。
https://github.com/siratama/Flash-To-Haxe-Converter
主な修正内容は以下となります。
・ガイドレイヤーを無視するよう修正
・レイヤーがロックされている、あるいは非表示の場合エラーが発生していた不具合を修正
・ライブラリフォルダ構造ではなくリンケージ設定を元にファイル出力を行うよう変更
・ステージ上に配置されているリンケージ設定を行なった MovieClip への出力対応
今まではライブラリフォルダ構造を元にファイル出力を行なっていたため、ライブラリフォルダ構造とリンケージ設定構造が異なる場合、意図しないファイル出力が行われてしまう問題がありました。
今回の修正では、リンケージ設定を元にファイル出力が行われるようになったため、自由なライブラリフィルダ構造設計が可能になります。
今までステージ上に配置されていた MovieClip は、リンケージ設定がされていようと MovieClip として出力していました。しかしそれが原因で、動的に swf を読み込むと強制型変換エラーが発生したため、対処を行いました。
ステージ上に配置されている MovieClip からはリンケージ名は取得できないものかと思っていましたが、そんな事はなく、Layer オブジェクトから取得可能な Element オブジェクトの elementType が "instance" の場合、Element オブジェクトは Instance オブジェクトとして扱うことが可能な事がわかりました。
Instance オブジェクトの概要
http://help.adobe.com/ja_JP/flash/cs/extend/WSd6d4f896b3a8801b68f3c0d913cb56242ea-8000.html
この Instance オブジェクトは libraryItem というプロパティを持ち、そこからリンケージ名の取得が可能となります。
以下は Layer オブジェクトインスタンスから ステージ上に配置されている MovieClip のリンケージ名を取得するまでの流れとなります。Haxe で記述しています。
var layers:Array<Layer> = Flash.getDocumentDOM().getTimeline().layers;
for(layer in layers){
for(element in layer.frames[0].elements){
if(element.elementType == "instance"){
var linkageClassName = untyped element.libraryItem.linkageClassName;
}
}
}
untyped を利用しているのは、element を Instance オブジェクトに cast しようとしてもコンパイルエラーが発生してしまったためとなり、暫定的にエラーを回避させています。きちんと変換する方法はありそうです。
[ FLASH ] [ tips ] [ update ] 2013年07月18日 11:22 | コメント (0) | トラックバック
FlashToHaxeConverter アップデート: OpenFL・swf動的読み込み・IDE補完用出力
Flash ライブラリ内の構造をそのまま Haxe extern ファイルに出力を行う、FlashToHaxeConverter のアップデートを行いました。
https://github.com/siratama/Flash-To-Haxe-Converter
新規機能は以下となります。
・OpenFL 用 hx ファイル出力
・swf 動的ロード用 hx ファイル出力
・リンケージ設定の無い MovieClip 内プロパティへの IDE 補完用処理出力
出力用ダイアログは以下のようになりました。今までの flash 用出力は「flash(extern)」欄となり、swf 動的ロード用 hx ファイル出力は「flash」欄が対応しています。
OpenFL に対応した新しい制作の流れの図は以下となります。
OpenFL に対応したとはいえ OpenFL 自体に制限事項が多く、出力された hx ファイルを利用しても null がかえってくるものもあります。ビットマップ関連 hx ファイルがそれにあたります。OpenFL 出力機能はまだ α版だとお考えください。詳しくは FlashToHaxeConverter のページをご参考ください。
こちらに書かれている内容を参考に、IDE 補完用出力を行うようにしています。
http://qiita.com/tail_y/items/9d7f8cf903613c1037e6
これにより MovieClip がどれだけ入れ子構造になろうとも、補完機能を持つ IDE ならば、深い階層へのプロパティへのアクセスが容易となります。
例えば以下は、リンケージ設定を行なっているのは View クラスのみとなりますが、内部に配置している MovieClip や TextField への補完が行われます。
var view = new View(); view.circleMC.cardA.numberData.x = 50; view.circleMC.cardB.blackMC.numberText.text = "testText";
今までの Flash 開発では無かった機能かと思われるため、今後 Flash オーサリングに関して新たな手法を編み出す事が可能になるかもしれません。
OpenFL 用出力に関しましては、abstract を数珠つなぎにするようにして補完機能を実現させています。例えば以下の様な構造を持つ game.View クラスがあったとします。
View.circleMC.memoText View.circleMC.cardSetMC.cardA View.circleMC.cardSetMC.cardB
circleMC ムービークリップ内には memoText という TextField と cardSetMC というムービークリップを配置しており、cardSetMC 内には cardA と cardB というムービークリップを配置しています。
これを OpenFL 向けに出力を行うと以下の様なファイルが展開されます。
package game;
import flash.display.MovieClip;
import openfl.Assets;
abstract View(MovieClip){
public function new()
this = Assets.getMovieClip('test:game.View');
@:to public function getInstance():MovieClip
return this;
public var circleMC(get, never):View_circleMC;
function get_circleMC(){
return new View_circleMC(cast this.getChildByName('circleMC'));
}
}
abstract View_circleMC(MovieClip){
public function new(mc:MovieClip)
this = mc;
@:to public function getInstance():MovieClip
return this;
public var memoText(get, never):flash.text.TextField;
function get_memoText(){
return cast(this.getChildByName('memoText'), flash.text.TextField);
}
public var cardSetMC(get, never):View_circleMC_cardSetMC;
function get_cardSetMC(){
return new View_circleMC_cardSetMC(cast this.getChildByName('cardSetMC'));
}
}
abstract View_circleMC_cardSetMC(MovieClip){
public function new(mc:MovieClip)
this = mc;
@:to public function getInstance():MovieClip
return this;
public var cardA(get, never):flash.display.MovieClip;
function get_cardA(){
return cast(this.getChildByName('cardA'), flash.display.MovieClip);
}
public var cardB(get, never):flash.display.MovieClip;
function get_cardB(){
return cast(this.getChildByName('cardB'), flash.display.MovieClip);
}
}
JSFL にて、ステージ上に配置されたシンボルが リンケージ設定をされている MovieClip であるかどうかを判別する方法は見つかりませんでした。よって、ステージ上に配置されている MovieClip にリンケージ設定が行われていようと、ただの MovieClip として出力されます。しかし今回の IDE 補完機能により、その欠点は克服されたかと思います。
[ FLASH ] [ tips ] [ update ] 2013年07月10日 13:22 | コメント (0) | トラックバック
FlashToHaxeConverter ver 3.0 リリース
Flash ライブラリ内の構造をそのまま Haxe extern ファイルに出力を行う、FlashToHaxeConverter のアップグレードを行いました。今まで扱いにくかった箇所をなるべく取っ払い、使いやすさ向上を図っています。
https://github.com/siratama/Flash-To-Haxe-Converter
今までは FlashToHaxeConverter を利用するために、別途設定ファイル用 jsfl を用意する必要がありましたが、ver 3.0 からは必要ありません。Flash コマンドメニュー内 FlashToHaxeConverter を選択すると、設定用ダイアログウインドウが表示されます。
設定した値は fla ファイル内に記録されるため、ノートPC等 別作業環境に移してもそのまま利用できます。
ファイル出力先は fla ファイルを基準とした相対パスで指定します。
今までは 出力対象となる ライブラリ内フォルダを事前にクリックする必要がありました。ver 3.0 からは自動でリンケージ設定が行われているムービークリップを判定するため、煩わしいクリックの手間がなくなりました。
Toolkit for CreateJS 用として出力される Haxe extern クラスファイル内には、以下のプロパティが付与されます。
・Sound.manifestId
・Bitmap.manifestId
・Bitmap.nominalBounds
・Container.nominalBounds
・MovieClip.nominalBounds
・MovieClip.frameBounds
manifestId は Toolkit for CreateJS から出力される html ファイル内 manifest 配列に記述されているものとなります。
nominalBounds, frameBounds は Toolkit for CreateJS から出力される js ファイル内 各クラスに付与される Rectangle 型の情報です。
意図しないファイル削除が行われてしまう事を避けるため、Haxe ファイル出力ディレクトリの自動クリア機能は削除されました。
よって、fla ファイル内ライブラリの構造に変更を行った場合、Haxe 出力ディレクトリ内には以前の無駄なファイルが残ってしまう事があります。
無駄なファイルの削除を行いたい場合、手動で Haxe 出力ディレクトリの削除をお願いします。出力ディレクトリは自動的に生成されますので、出力ディレクトリを丸ごと削除してしまっても問題ありません。
toolkit-supporter さんのように 格好良い パネル形式のものにしたかったのですが作り方がわからなかったため、ダイアログ表示となりました。
動作検証は Windows 7 で行なっているため、Mac 上で動作しない等ありましたらお気軽にご連絡ください。
[ FLASH ] [ tips ] [ update ] 2013年06月19日 20:30 | コメント (0) | トラックバック
Haxe & CreateJS: html5 canvas に美咲フォント PNG 版を表示 + CeVIO を利用してみた
前回に引き続き Haxe & CreateJS を用いて、美咲フォント PNG 版 を html5 canvas(or Flash)に表示するテキストビューア的なものを作成しました。加えて今回は CeVIO を利用して台詞に音声を付けてみました。
http://www.dango-itimi.com/des2/sample/1/
以前報告したとおり、html5 ではブラウザ毎の音声再生具合はまちまちです。Flash 版が本来再生したい音声処理となります。
今回は iPhone でも音が鳴るような設定にしていますが、iPhone 3GS では Bitmap 表示＆キャッシュ処理で不具合が発生し、正常に描画再生されません。
Android では音が鳴ったり鳴らなかったりします。Android はなんだかんだで Flash Player の配布は継続されているので、Flash 版で見たいただくのが一番かもしれません。
CeVIO から出力された音声は サウンド編集ソフトで色々と加工しており、わざとノイズが入る感じにしています。
■ CeVIO
http://cevio.jp/
[ FLASH ] [ GRAPHIC ] [ tips ] [ update ] 2013年05月15日 10:18 | コメント (0) | トラックバック
Flash CS から Haxe用 extern クラスを出力する JSFL 公開
Flash CS から Haxe用 extern クラスを出力する JSFL を公開しました。
github
https://github.com/siratama/Flash-To-Haxe-Converter
ファイル一式ダウンロードページ
https://github.com/siratama/Flash-To-Haxe-Converter/tags
なんだか似たようなことばかり行なっていますが、少しずつ機能改善を行なっています。先日公開した「swf から CreateJS-Haxe用 extern クラスを生成するアプリ」は少々問題があったため開発を中止しました。以後は、同等の機能を持つ 当JSFL をご利用ください。
以下は前回から少々変わった遷移図です。
JSFL により、Flash CS から直接 Haxe 用 extern クラスの出力を行うようになりました。AIR アプリケーションのインストール作業等無くなったため、準備にかかる工程も減り、よりとっつきやすくなったかと思います。
代わりに Flash CS から生成されるクラス群の内容は独自のものであり、機能的に足りない箇所があるかもしれません。最低必要限の実装は行ったつもりです。何か抜けがありましたらお知らせください。
また、JSFL は javascript である、という事から JSFL 自体も Haxe で作成してしまいました。Template 機能を利用して かなり見やすいソースコードでクラス生成部分の処理作成が行えました。
Haxeのテンプレートシステムが便利。
http://qiita.com/items/887e506baf60bd6713f8
Haxe はヒアドキュメント的な記述も可能との事で試してみましたが、こちらは IntelliJ IDEA のエディタ側がサポートしていないのか、エラー表示がなされてしまうため Template クラスの利用のみを行なっています。
http://qiita.com/items/d18f441abb5467357a19
jsfl 用 extern クラスは以下のものを利用しました。
ただし、結構内容が古いのかそのまま利用できず、3,4 つほどクラスを修正を行う必要があります。
[ FLASH ] [ tips ] [ update ] 2013年03月19日 19:33 | コメント (0) | トラックバック
swf から CreateJS-Haxe用 extern クラスを生成するアプリ公開停止予定
前回の記事で公開したアプリケーションですが、すみません なんだかセキュリティの問題なのかアプリケーションから bat ファイルが実行できない不具合があるようです。
http://www.dango-itimi.com/blog/archives/2013/001170.html
原因を調査するのが面倒なので後に公開を停止したいと思います。代わりに、更に使い勝手を向上した JSFL バージョンを後日公開します。
[ FLASH ] [ update ] 2013年03月19日 02:44 | コメント (0) | トラックバック
swf から CreateJS-Haxe用 extern クラスを生成するアプリ公開
swf から CreateJS-Haxe用 extern クラスを生成するアプリケーションを公開しました。
github
https://github.com/siratama/Swf-To-CreateJS-Haxe-Converter
ファイル一式ダウンロードページ
https://github.com/siratama/Swf-To-CreateJS-Haxe-Converter/tags
以下ドキュメントから概要を引用します。
Swf-To-CreateJS-Haxe-Converter は、swf から CreateJS-Haxe 用 extern クラスを生成するアプリケーションです。
Haxe と当アプリケーションの機能を用いる事で、Flash CS のライブラリ内で設定したファイル構造をそのまま Haxe クラス群に出力できます。これらクラス群は、Haxe での Flash コンテンツや html5 コンテンツ開発に有用できます。
Flash CS と Haxe を利用することで、Flash コンテンツ, html5 canvas コンテンツ, Desktop アプリケーション, Android アプリ, iOS アプリ といった様々なプラットフォーム向けのコンテンツ並行制作が可能となります。制作の流れは以下の図のようになります。
図内 左半分が全体の制作の流れ、右半分側が当アプリケーション(SwfToCreateJSHaxeConverter)役割箇所を抽出したものとなります。別途制作しているライブラリ TFCLib に関しましては後述します。
まず、Photoshop や Illustrator を用いて画像素材を作成し、また、サウンド編集ソフトで音声ファイルを作成後、Flash CS に取り込みます。
Flash CS では、各素材を利用してアニメーションを作成したり、各素材データをスクリプトから操作できるよう 素材に命名(リンケージ設定)を行います。編集作業完了後、Flash コンテンツを制作する場合は swf をパブリッシュ、html5 コンテンツを制作する場合は Toolkit for CreateJS でのパブリッシュを行います。
パブリッシュされた swf からは、Haxe の生成機能を利用して、Flash 内構造そのままの hx クラス群(図内 Flash-Haxe)の出力を行います。そして当アプリケーションを利用することで Flash-Haxe から CreateJS-Haxe 用 hx クラス群に変換を行います。
出力された Flash & html5 用のデータは共通の構造を持つため、クロスプラットフォーム用言語 Haxe にて処理することにより、より少ない手間で Flash コンテンツや html5 canvas コンテンツの同時制作が可能となります。
更に、Flash コンテンツ用 swf に多少の処理を付け加えることで、そのまま Adobe AIR に変換する事もできます。(Adobe AIR 専用の機能を利用する場合は図内「Flash(swf)」の他 Adobe AIR 用の swf 出力が必要となります。)
TFCLib は Toolkit for CreateJS のパブリッシュデータをスクリプト(javascript or Haxe)から利用しやすくするためのもので、別途制作しているライブラリです。当アプリケーションで出力される 図内 CreateJS-Haxe クラス群は無くても利用できますが、利用すると更に効率よく開発を進めることが可能となります。
TFCLib その他ライブラリを配置しているディレクトリ
https://github.com/siratama/haxelib
--- 引用ここまで ---
図の説明は少々端折っている箇所がいくつかあります。例えば、Haxe から出力した swf のデバッグ方法であったり、iOS 向けアプリを制作するのであれば Haxe からは swf ではなく AS3 を出力したほうがよいのかもしれない、等など。
ともあれ、fla ファイル一つとプログラミング言語 Haxe があれば、様々なプラットフォーム向けのコンテンツ制作が行える、という事が何となくわかっていただけるのではないかと思います。
前回 前々回の記事もよろしければご参考ください。以下の点について書かれています。
・当アプリケーションを制作する事になった経緯
・アプリケーション仕様
・当アプリケーションを利用しマルチプラットフォーム向けの実装を行なって気付いた点
http://www.dango-itimi.com/blog/archives/2013/001168.html
http://www.dango-itimi.com/blog/archives/2013/001169.html
[ FLASH ] [ tips ] [ update ] 2013年03月16日 12:55 | コメント (0) | トラックバック
Toolkit for CreateJS の出力ファイルを Haxe クラスに変換するアプリ公開
Toolkit for CreateJS から出力される js, html ファイルの内容を解析し、Haxe クラスに変換するアプリケーションを Adobe AIR にて作成し、github で公開しました。
TFC-JS-To-Haxe-Converter
https://github.com/siratama/TFC-JS-To-Haxe-Converter
ファイル一式 ダウンロードページ
https://github.com/siratama/TFC-JS-To-Haxe-Converter/tags
使い方等、詳しくは上記 TFC-JS-To-Haxe-Converter ページ内に記述しています。
出力されるクラスの形式に少々変更がかかっていますが、先日の記事もご参考ください。
Toolkit for CreateJS の出力ファイルを Haxe クラスに変換するアプリ作成中
http://www.dango-itimi.com/blog/archives/2013/001166.html
当アプリケーションから出力された Haxe クラスを用いての簡単なサンプルが問題なく動作したので公開しましたが、不具合がある可能性は高いです。これから何か簡単なゲームでも作って問題箇所はないか調査したいと思います。
[ FLASH ] [ tips ] [ update ] 2013年03月07日 20:25 | コメント (0) | トラックバック
Toolkit for CreateJS の出力ファイルを Haxe クラスに変換するアプリ作成中
試作品ができたので中途報告を。
Toolkit for CreateJS から出力される js, html ファイルの内容を解析し、Haxe クラスに変換するアプリを Adobe AIR にて作成しています。
例えば Toolkit for CreateJS から出力された js ファイル内に以下のクラスがあったとします。
(lib.view = function() {
this.initialize();
// scene
this.instance = new lib.shootingsceneGameOverView();
// guide
this.instance_1 = new lib.shootingeffectExplosionView();
this.instance_1.setTransform(67,106);
this.playerPosition = new lib.shootingplayerView();
this.playerPosition.setTransform(52,195);
// game area
this.gameAreaView = new lib.shootingareaGameAreaView();
this.gameAreaView.setTransform(0,20);
// click area
this.instance_2 = new lib.shootingareaClickAreaView();
this.instance_2.setTransform(275,200,1,1,0,0,0,275,200);
this.addChild(this.instance_2,this.gameAreaView,this.playerPosition,this.instance_1,this.instance);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(0,0,550,400);
作成中のアプリケーションで変換を行うと、以下の様な Haxe 用クラスに変換されます。
class View extends Container {
public var instance:ShootingsceneGameOverView;
public var instance_1:ShootingeffectExplosionView;
public var playerPosition:ShootingplayerView;
public var gameAreaView:ShootingareaGameAreaView;
public var instance_2:ShootingareaClickAreaView;
public var nominalBounds:Rectangle;
public function new(){
super();
nominalBounds = new Rectangle(0,0,550,400);
js.Lib.eval('this.instance = new lib.ShootingsceneGameOverView();');
js.Lib.eval('this.instance_1 = new lib.ShootingeffectExplosionView();');
js.Lib.eval('this.instance_1.setTransform(67,106);');
js.Lib.eval('this.playerPosition = new lib.ShootingplayerView();');
js.Lib.eval('this.playerPosition.setTransform(52,195);');
js.Lib.eval('this.gameAreaView = new lib.ShootingareaGameAreaView();');
js.Lib.eval('this.gameAreaView.setTransform(0,20);');
js.Lib.eval('this.instance_2 = new lib.ShootingareaClickAreaView();');
js.Lib.eval('this.instance_2.setTransform(275,200,1,1,0,0,0,275,200);');
js.Lib.eval('this.addChild(this.instance_2,this.gameAreaView,this.playerPosition,this.instance_1,this.instance);');
}
}
Toolkit for CreateJS パブリッシュデータの html ファイル内にある、素材ファイル読み込み用パス manifest もクラス化されます。
また、上記サンプルコードでは確認できませんが、プロパティ名に連番が付与されてしまう問題への対処も行なっています。
あまり見た目が良くない箇所の理由です。
Haxe の言語仕様よりクラス名の先頭は大文字にする必要があります。
Flash 内で「shooting.scene.GameOverView」とリンケージ設定後、Toolkit for CreateJS にて出力を行うと「shootingsceneGameOverView」というピリオドが取れたクラス名に変換されます。そこから更に当アプリケーションで「ShootingsceneGameOverView」という先頭大文字変換を行うため、とてもカオスなクラス名になってしまっています。
理想は、アプリケーションで変換する際 「shooting.scene.GameOverView」と Flash で設定したパッケージ構造のクラス名に復元できればよいのですが、Toolkit for CreateJS 1.1 の出力情報のみでは難しい所です。
javascript からダイナミックに CreateJS の protected や private メソッドにアクセスしているため、CreateJS-Haxe extern では構文エラーを起こしてしまいます。よって、eval で各所をくくることで対応しました。
くくった箇所は javascript となるため、クラス名呼び出しには 名前空間が必要になったりと変換処理作成の手間が増す事に。
今回のアプリケーションを用いると、Haxe エディタから Flash 上に配置したムービークリップのインスタンス名へのアクセスが可能になり、存在しないインスタンス名にアクセスするとコンパイル時エラーが発生するようになります。
TFCLib のみでの開発に対し、よりいっそう Flash にて swc を利用した開発イメージに近くなります。
デメリットは、Toolkit for CreateJS でのパブリッシュ後、当アプリケーションでの変換処理を行う一手間が増える、という点です。アプリケーション上のボタンひとつで変換を行うことを可能にする予定ではありますが、少々面倒さが増えるかもしれません。
その他、変換されたクラス名がとってもカオスなので、エディタのスペルチェックに引っかかってしまいます。
クラス先頭大文字変換によってバッティングが発生し不具合が生じる可能性もあるため、fla ファイル素材の命名には注意も必要です。
参考)
比較用としまして TFCLib のドキュメントは以下となります。Web 上から閲覧できるようにしました。
https://github.com/siratama/haxelib/tree/master/docs/toolkit_for_createjs
メンテナンスが厳しいです。
js ファイルをテキストファイルとして読み込んだ後、split で文字列内 変数やクラス名を抽出し、必要に応じて変換処理を…といった具合に、処理の言語簡潔化が難しい箇所があるため、3日経てば何を書いているのかわからなくなる記述が多いです。
不具合が見つかった場合や、Toolkit for CreateJS のアップグレードが行われた場合、1から作りなおしたほうが早い、なんて事になる可能性も。
Toolkit for CreateJS の jsfl を改造できれば もろもろの問題は解決しそうですが、今の私には無理っぽいです。今後 Flash CS の jsfl の api に CreateJS 用出力機能がついてくれる事を期待します。
[ FLASH ] [ tips ] [ update ] 2013年03月04日 19:32 | コメント (0) | トラックバック
Toolkit for CreateJS 1.1 から出力される html から最新版 CreateJS を利用するための修正箇所
現在の Toolkit for CreateJS 1.1 から出力される html ファイルを元に 最新版 CreateJS(EaselJS 0.6.0, TweenJS 0.4.0, SoundJS 0.4.0, PreloadJS 0.3.0)を利用したい場合、以下の各箇所の修正を行います。
最新版 CreateJS は、音周りやその他もろもろ改善されている箇所があるとの事なので、次バージョンの Toolkit for CreateJS が登場する前に試してみたい、という方向けの内容となります。
まず、音と画像を配置しただけの fla ファイルを Toolkit for CreateJS でパブリッシュすると以下の様な html ファイルが出力されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from test</title>
<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.5.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.2.0.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.3.0.min.js"></script>
<script src="test.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var manifest = [
{src:"images/_1.png", id:"_1"},
{src:"sounds/Explosion.mp3", id:"Explosion"}
];
var loader = new createjs.PreloadJS(false);
loader.installPlugin(createjs.SoundJS);
loader.onFileLoad = handleFileLoad;
loader.onComplete = handleComplete;
loader.loadManifest(manifest);
}
function handleFileLoad(o) {
if (o.type == "image") { images[o.id] = o.result; }
}
function handleComplete() {
exportRoot = new lib.test();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(24);
createjs.Ticker.addListener(stage);
}
function playSound(name, loop) {
createjs.SoundJS.play(name, createjs.SoundJS.INTERRUPT_EARLY, 0, 0, loop);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="550" height="400" style="background-color:#ffffff"></canvas>
</body>
</html>
これを以下のように修正します。修正前のものはコメントアウトしています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from test</title>
<!--
<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.5.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.2.0.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.3.0.min.js"></script>
-->
<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.4.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.6.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.4.0.min.js"></script>
<script src="test.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var manifest = [
{src:"images/_1.png", id:"_1"},
{src:"sounds/Explosion.mp3", id:"Explosion"}
];
//var loader = new createjs.PreloadJS(false);
//loader.installPlugin(createjs.SoundJS);
//loader.onFileLoad = handleFileLoad;
//loader.onComplete = handleComplete;
var loader = new createjs.LoadQueue(false);
loader.installPlugin(createjs.Sound);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(manifest);
}
function handleFileLoad(o) {
var item = o.item;
var type = item.type;
if (type == "image") { images[item.id] = o.result; }
//if (o.type == "image") { images[o.id] = o.result; }
}
function handleComplete() {
exportRoot = new lib.test();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(24);
createjs.Ticker.addListener(stage);
}
function playSound(name, loop) {
//createjs.SoundJS.play(name, createjs.SoundJS.INTERRUPT_EARLY, 0, 0, loop);
createjs.Sound.play(name, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="550" height="400" style="background-color:#ffffff"></canvas>
</body>
</html>
主な変更内容は以下の通りです。
・head タグ内 各js ファイルのバージョン番号の変更
・PreloadJS クラスを LoadQueue クラスに変更
・LoadQueue で読み込まれたファイルの解析処理変更(handleFileLoadメソッド)
・SoundJS クラスを Sound クラスに変更
[ FLASH ] [ tips ] [ update ] 2013年02月20日 00:01 | コメント (0) | トラックバック
CreateJS-Haxe: EaselJS 0.6.0, TweenJS 0.4.0, SoundJS 0.4.0, PreloadJS 0.3.0 に対応
先日公開された最新版 CreateJS に合わせて、Haxe 用 CreateJS extern の修正を行いました。github にて元制作者の方の元にマージ済みです。
https://github.com/nickalie/CreateJS-Haxe
修正したすべてのファイルの動作検証は行なっておらず、誤っている箇所はあるかと思われますので、随時 github 経由で修正していただけたらと思います。CreateJS 公式の API リファレンスがそこそこ誤っている箇所もあるため、修正の際はご注意ください。
以下は、先日公開した html5 canvas ゲームを最新の CreateJS-Haxe を利用して修正したものとなります。
http://www.dango-itimi.com/html5/1/
見た目の動作的にはほとんど変化はありません。サウンド周りは Web Audio API が利用されるようになっているはずなので、iOS6 でも音が聞こえるようになっているのではないかと思います。鳴らなかったらごめんなさい。
Web Audio API に対応している PC版 Google Chrome で検証してみたところ、BGM のループは音が途切れることはなくなったような感じはあります。しかし音のにじみ方がややひどくなってしまいました。
今回の修正に沿った Toolkit for CreateJS 用 Haxe ライブラリは後日 github にて公開予定です。現在の Toolkit for CreateJS にある問題点をなるべく緩和するためのライブラリとなります。Haxe を変換して js ファイル用ライブラリとしても公開できたらと思います。
追記)
iOS6 でも音が鳴らない、と教えていただきました。
どこかこちらの設定ミスがありそうです。
[ FLASH ] [ tips ] [ update ] 2013年02月19日 23:26 | コメント (0) | トラックバック
Toolkit for CreateJS & Haxe : html5 シューティングゲームサンプル
Toolkit for CreateJS 1.1 と Haxe を用いて、html5 canvas で動作するシンプルなシューティングゲームの制作を行いました。リンク先には QR コードを配置しています。スマートフォンでの動作確認にご利用ください。
http://www.dango-itimi.com/html5/1/
ローディング画面は制作していないため、初めは少々真っ暗な画面が表示されたままとなります。
Windows7 上では、html5 audio タグによるサウンド再生周りは以下の様な結果になりました。左に行くほど良い結果となります。
IE9 > Opera > Google Chrome > Firefox
なんと音周りでは IE9 が一番良く、ほぼ問題なく再生されました。(ただし、スクリプトによる音量調節は不可能)
Opera はサウンドループ時 微妙な間が空きます。
Google Chrome は BGM のループサウンドがにじんで聞こえます。
Firefox は BGM のループサウンドはにじみ、弾の発射音等 連続再生されると音が聞こえなくなります。
Android や iOS 上では、以前の報告通り音はほぼ鳴りません。
私の Flash ゲーム制作にかかる手間を 1 とすると Toolkit for CreateJS & Haxe による html5 ゲーム制作にかかる手間は 1.5 倍くらいでしょうか。今までの調査と、先日記事にした IntelliJ IDEA のおかげで、かなり Flash 制作と同等の制作工程に近づけたと思います。IntelliJ IDEA の Refactor 機能が無いと、制作物の規模が大きくなればなるほど比例して制作の手間は増加していきそうです。
(一点ほど新たに Toolkit for CreateJS 1.1 での出力データに関して やや面倒な仕様があることに気付いたため、別途記事にするかもしれません。)
制作の手間は 1.5倍ほどとはいいましたが、あくまでその制作物が 再生側で正常に動作してくれれば、の話となります。
今回のゲームはマウスドラッグ処理を用いている箇所があり、端末によっては こちらの意図通り動作してくれない恐れがあります。よって、端末によって異なる動作に対応するための調査時間など、通常制作以外で別途時間が必要になってきます。
マウスドラッグを必要とはせず、マウスダウン処理のみで済むゲームであるならば、あらゆる端末で同じ動作となってくれそうではあります。
今回は html5 canvas ゲーム制作を行いましたが、html のレイヤー機能を用い canvas の上に DOM を表示する等行えば、ウネウネ動作する html5 サイトや html5 アプリケーションの制作が可能になります。
参考) canvas と HTML のハイブリッド実装をする
http://www.ibm.com/developerworks/jp/web/library/wa-htmlmark/index.html#N10282
ただしネット上で見る感じ、レイヤー機能はレイヤー機能でまた色々な問題がありそうです。
その他、バグが多いらしく採用されるかどうかはわかりませんが、次期バージョンの CreateJS では 直接 DOM を操作する事が可能になるクラスが実験的に用意されているようです。端末間の動作の違いを吸収してくれるのであれば、こちらにも期待したい所です。
そろそろ次期バージョンの CreateJS が出るらしい、という点と、最近 Haxe の新バージョンが公開されたので、それらに対応した Toolkit for CreateJS & Haxe 用ライブラリ制作を行う予定です。
追記)すみません、まだ Haxe 新バージョンは公開されておらず仕様が公開されただけかもしれません。
個人的に Toolkit for CreateJS & Haxe で何か html5 関連の制作を行うかどうかは未定です。AIR によって、Flash ゲームとモバイル端末(Android, iOS)向けのアプリケーション制作が同時に行えるため、制作するなら Flash or AIR 優先となりそうです。
Haxe は Javascript 以外にも、Action Script(AS3) に変換したり、swf を出力する機能も持ち合わせているので、初めからすべて Haxe で作ってしまう、という手もありますが、これは場合によりけりとなりそうです。Flash 制作には AS3 用エディタ FDT があり、このツールの存在は大きいです。
Android, iOS でもブラウザ上で遊べる Web ゲームや Web アプリ制作を行いたい、という事になったらば、Toolkit for CreateJS & Haxe は活躍してくれそうです。
[ FLASH ] [ tips ] [ update ] 2013年02月11日 20:38 | コメント (2) | トラックバック
パズルゲーム SAIcoron 公開
サイコロの目を揃えて消すパズルゲーム SAIcoron を公開しました。
http://www.dango-itimi.com/dice_puzzle/
Google Play にて Android アプリとしても公開しています。box2D は用いてないため、Android 2.2 以降の端末ならば問題なくサクサク動作すると思います。無料なのでお暇がありましたらどうぞお試しください。
当ゲームは どすこいCITY, SQUARE RUNNER で制作した「升目状のボードの上を駒が動作するタイプのゲーム」用ライブラリを利用しています。
[ FLASH ] [ GRAPHIC ] [ update ] 2012年10月31日 22:35 | コメント (0) | トラックバック
ピンボールゲーム DANG BALL 公開
長らく作っていたピンボールゲーム「DANG BALL」の制作に終わりが見えなくなっていたため、一区切りとして正式公開しました。
http://www.dango-itimi.com/dangball/
2006年に物理演算処理の勉強がてら作り始めるものの、Flash Lite 2.0 のモバイル端末ではさっぱり fps がでず制作を一時断念。
その後 2011年10月 に今度は box2d を用いて再作成し始めるも、早一年過ぎ去ってしまいました。
次回新たにピンボールを作るのであれば、ここ半年ほどで次々と制作しているようなミニゲーム風ピンボールゲームの制作を行いたいと思います。
[ FLASH ] [ update ] 2012年10月15日 19:56 | コメント (0) | トラックバック
パズルゲーム「キャンドル博士とシガレッタ 2」を公開
パズルゲーム「キャンドル博士とシガレッタ 2」を公開しました。
http://www.dango-itimi.com/dcac2/
今回は、Android アプリとして Google Play(Android market) にも登録しています。
対応端末は Android 2.2 以降ではありますが、Box2D の処理が激重のせいでおそらく最新の機種(Android 4.0 搭載機種)でないとまともに動作しません。無料なのでお暇があればお試しいただけたらと思います。
---
今後の動作速度を上げるための方法として、ASC2.0 のインライン化機能というものに期待しております。
ASC2.0 のインライン化機能 （新しい ActionScript コンパイラの変更点つづき）
http://cuaoar.jp/2012/08/asc20-actionscript.html
Box2dFlash のソースコードを、インライン化に対応できるように修正すれば動作改善に繋がるのではないか、と考えています。
[ FLASH ] [ GRAPHIC ] [ update ] 2012年09月23日 13:25 | コメント (2) | トラックバック
ミニゲーム「キャンドル博士とシガレッタ」を公開
ミニゲーム「キャンドル博士とシガレッタ」を公開しました。
http://www.dango-itimi.com/dcac/
今回のゲームは AIR for Android を利用して、Android アプリとしても公開しています。Google Play(Android market) からの配布ではなく、当サイトで勝手に配布しているため、ダウンロードしていただくには Android 側で多少設定が必要となります。
次回作以降で、Android アプリとして十分な内容のゲームが制作できたらば、Google Play に登録して配布してみたいと思います。
Android アプリを公開した、とはいえ Flash 版と内容はまったく一緒であり、Android は現状 Flash の閲覧が可能でもあるため、アプリとして公開する意味合いはあまり高くないかもしれません。
どうせなら Flash Player が搭載されていない iPhone アプリとして公開したいところですが、Apple に登録して審査に通らなくてはなりません。作ったら気軽に公開というわけにはいかず、個人での iPhone アプリの公開は少々敷居が高いところです。
なんにせよ、Flash ゲームをそのままスマホアプリ等に変換可能になった今は、技術者にとって とてもよい時代になったと感じます。
---
以下制作工程の画像等
タイトル画面
キャラクター制作落書き
落書きからベクターデータへの書き起こし
[ FLASH ] [ GRAPHIC ] [ tips ] [ update ] 2012年09月05日 19:57 | コメント (4) | トラックバック
ミニゲーム「Square Runner」公開
ミニゲーム「Square Runner」を公開しました。
http://www.dango-itimi.com/square_runner/
内容はシンプルでやたら難しいです。
敵をためるにためて一気に消すと気持ちいいかもしれません。
当ゲームは 前作どすこいシティで制作した「升目状のボードの上を駒が動作するタイプのゲーム」用ライブラリを改良しつつ、組み込んでいます。以降のゲームで再度このライブラリを使用する場合、更に短い時間でゲーム制作が可能になりそうです。
[ FLASH ] [ GRAPHIC ] [ update ] 2012年08月20日 20:26 | コメント (0) | トラックバック
ゲーム「DOSKOI CITY - どすこいシティ」公開
ゲーム「DOSKOI CITY - どすこいシティ」を公開しました。
http://www.dango-itimi.com/doskoi_city/
昔のファミコン等でよくあった「升目状のボードの上を駒が動作するタイプのゲーム」を何か作りたいな と考え、今回の DOSKOI CITY の制作を行っています。
「升目状のボードの上を駒が動作するタイプのゲーム」用ライブラリ制作にも挑戦しており、次回作ではこのライブラリを使用しての似た感じの画面のゲームを制作することとなりそうです。
ちなみに今回のゲームは初めは、box2d を用いて制作することはできないだろうかと考え以下のサンプルを作成してみていました。
http://www.dango-itimi.com/sumocity/sample/2/preloader.swf
上記操作してみるとわかりますが 各オブジェクトが周りにひっついた感じになってしまい、升目状のゲームを制作するには box2d は少々向いていないかもしれない、という結論となりました。
[ FLASH ] [ GRAPHIC ] [ update ] 2012年08月10日 19:29 | コメント (0) | トラックバック
ミニゲーム「犬 vs 猫」公開
ミニゲーム「犬 vs 猫」を公開しました。
http://www.dango-itimi.com/dog_vs_cat/
前作「HERO vs DRAGON」のシステムをそのまま流用し、グラフィックスやサウンド周りの変更を行なっただけの作品となります。
システムの流用とグラフィクスの簡略化により、もう少し早く完成できるかとも考えていましたが、アニメーションをある程度凝ったりしてしまい、なんだかんだで時間がかかってしまいました。
更なる制作時間短縮化のための工夫を考慮することを今後の課題としたいと思います。
[ FLASH ] [ GRAPHIC ] [ update ] 2012年07月11日 22:25 | コメント (4) | トラックバック
ミニゲーム「HERO vs DRAGON」公開
ミニゲーム「HERO vs DRAGON」を公開しました。
http://www.dango-itimi.com/hero_vs_dragon/
ドラゴンには以前から表現してみたかったハイパーアーマー処理を施してみました。格闘ゲームで言うところのメカザンギとなります。ダメージを受けても動作はゆっくりと継続するような処理です。
ヒットストップ処理と組み合わせて、敵をズバズバ斬る感が結構出たのではないかと思います。
今回はキャラクターアニメーション制作に結構時間が取られてしまったため、次回はもっとグラフィクス制作箇所に対する時間の割合を減らしていけるような工夫を考えていきたいと思います。
[ FLASH ] [ GRAPHIC ] [ update ] 2012年06月24日 16:29 | コメント (2) | トラックバック
ミニゲーム POOTAN 公開
ミニゲーム POOTAN を公開しました。
http://www.dango-itimi.com/pootan/
初心に帰り、ややネタよりのゲームを目指しました。
どうぞよろしければ遊んでやってください。
---
以下作成した画像等
重なりあうカバの見やすさ向上のため GlowFilter を使用
http://www.dango-itimi.com/pootan/sample/3/depth_kaba.swf
[ FLASH ] [ GRAPHIC ] [ update ] 2012年05月31日 00:38 | コメント (0) | トラックバック
ミニゲーム JUNGLE MASTER 公開
ミニゲーム JUNGLE MASTER を公開しました。
http://www.dango-itimi.com/jungle_master/
光る玉を避けるだけのとても簡単なゲームなので、BGM作成に少々時間をかけています。
BGM は、昔 VOCALOID(MEIKO) で作成したものを編曲して使用しました。
VOCALOID の原曲 URL はこちらです。やや甲高い声がうるさいかもしれません。
http://www.youtube.com/watch?v=p69c7r7vaj0
[ FLASH ] [ GRAPHIC ] [ update ] 2012年05月12日 19:49 | コメント (0) | トラックバック
Flash Player 11.2 右クリック実装記念 第二弾 探偵脱出物語 公開
右クリック対応ミニゲーム第二弾「探偵脱出物語」を公開しました。
http://www.dango-itimi.com/des/
色々なところをクリックしてアイテムを発見しながら、館からの脱出を目指すゲームとなっています。
タンスを調べたらドッキリお化けが出てくる、といった、もう少しホラー的な演出面を強めたいところですが、「早く作って公開する」を第一目標とし、一旦制作を切り上げています。
次回同じようなゲームを作る際に、今回の経験を活かしたいと思います。
画面下に表示されるフォントは美咲ゴシックを
物理エンジンライブラリには Box2dFlash v2.1a を使用
犬を踏んだ時ジャンプすることが出来ない不具合あり
[ FLASH ] [ GRAPHIC ] [ update ] 2012年04月28日 17:27 | コメント (3) | トラックバック
漢字が使用可能なフリーのビットマップフォント三選
漢字が使用可能なフリーのビットマップフォントはないものかと調べてみたところ、以下の三点が見つかりました。それぞれフォントを埋め込んでみた swf ファイル容量と特徴など合わせて記述します。
http://www.geocities.jp/littlimi/misaki.htm
JIS第一・第二水準をサポートしているとのことで、このフォントを用いれば表示できない文字はほとんどなさそうです。
Flash のフォント埋め込み設定で「日本語 漢字 - JIS第一水準(3174文字)」を設定して swf を出力してみたところ、swf ファイル容量は 131KB という結果に。対比として ＭＳ ゴシックを同設定で埋め込むと swf 容量 630KB という結果となります。現代において 131KB ならば充分に実用範囲内となります。
http://nonty.net/item/font/jackey.php
現在までにサポートされている漢字は 1300 文字ほど。かわいい平仮名カタカナが特徴です。
「日本語 漢字 - JIS第一水準(3174文字)」設定でのフォント埋め込みを行った swf 容量は 92KB という結果に。サポートされていない文字を指定すると swf 上では空白として表示されます。足りない漢字はカタカナで表記する等して利用できそうです。
http://akashicdesign.net/ja/88-zen/
漢字1000文字ほどサポート。「日本語 漢字 - JIS第一水準(3174文字)」設定でのフォント埋め込みを行った swf 容量は 47KB という結果に。
サポートされていない文字を指定すると swf 上ではＭＳゴシックとして表示されました(Windows)。小さいフォントサイズ指定の場合、パッとみどのフォントがＭＳゴシックに置き換わっているのか判別が難しいため注意が必要となりそうです。
スクリプトで処理制御を行ったフォント表示サンプルです。美咲フォントを用いています。
OK ボタンを押すと、テキストフィールドに入力された文字列が次々と表示されます。
[ FLASH ] [ tips ] [ update ] 2012年04月21日 13:43 | コメント (0) | トラックバック
Box2DFlash v2.1a : X軸ピクセル移動 Y軸自由落下 接地時のみジャンプ可能 サンプル
次回ミニゲーム用に Box2DFlash v2.1a を用いたサンプル作成中。
X軸はピクセル移動、Y軸は自由落下を行い、接地時のみジャンプ可能という作りにしました。サンプル swf はページ最下部に表示します。
以前調査した Box2D によるピクセル移動方法は以下の通りです。
http://www.dango-itimi.com/blog/archives/2011/001084.html
body.SetLinearVelocity メソッドは、物質に働いている力(速度)を指定した値に強制変更するため、上記 URL 内処理例をそのまま使用すると、Y軸方向の移動速度が 0 になってしまうという問題が発生します。この問題を解決するためには、上記 URL 内処理例を以下のように変更します。
body.SetLinearVelocity(new b2Vec2(5 * FRAME_RATE / BOX2D_SCALE, body.GetLinearVelocity().y));
接地時のみジャンプ処理は以前調査した 以下の URL の内容を元に作成しています。
http://www.dango-itimi.com/blog/archives/2011/001082.html
「m_localPlaneNomal.y の値が 1 の時、プレイヤーが背景オブジェクトに接地している」と判定しています。
以下はサンプル swf です。
[ FLASH ] [ tips ] [ update ] 2012年04月19日 21:12 | コメント (0) | トラックバック
Box2DFlash v2.1a : ピンボール 其の八 敵キャラクター登場 他
Flash Player 11.2 右クリック実装記念 ZOMBIE ISLAND 公開
先日 Flash Player 11.2 が正式公開され、ついに swf 領域内での右クリックイベント処理が可能となりました。
いやはや長かった。私が Flash と出会ってから 10年以上経ちます。
早速の記念として右クリックを利用する簡易ゲーム「ZOMBIE ISLAND」を制作しました。
よろしければ一度お遊びください。
http://www.dango-itimi.com/zombie_island/
マウスだけではなく、キーボードを利用してもプレイできるようにしています。
[ FLASH ] [ tips ] [ update ] 2012年04月06日 01:31 | コメント (1) | トラックバック
Google+ 投稿まとめ
Google+ に投稿した内容の今日までのまとめです。
ゴブリンA
ゴブリンB
ドラゴン
兵士
ゾンビ
しゃべって風守
FLA.PRINTER にサンプルゲームを一点追加
http://flaprinter.appspot.com/sample/view/?kind=rpg_battle2&id=0&
Flash Player 右クリック実装記念 簡易ゲーム製作中 ZOMBIE ISLAND
[ ETC ] [ FLASH ] [ GRAPHIC ] [ update ] 2012年04月02日 12:06 | コメント (2) | トラックバック
TYPENG 英文音声読み上げ全ブラウザ対応に
一部ブラウザでしか利用できなかった、英文音声読み上げ機能を全ブラウザ対応にしました。
php を利用してクロスドメインの問題を回避するようにしています。
http://www.dango-itimi.com/typeng/
しかし英文読み上げ途中で、結構音声が途切れることがあります。原因は不明。
[ FLASH ] [ update ] [ web service ] 2012年03月24日 13:54 | コメント (0) | トラックバック
TYPENG 公開
Google+のほうで少しずつ書き込んでいた、「TYPENG」という英語学習タイピングが行える Web アプリケーションが完成しました。
http://www.dango-itimi.com/typeng/
「英文字入力を行いながら英語の学習が可能なタイピングゲームはないだろうか」と探してみるも、なかなか条件にあったものが見つからなかったため、自分で作成してしまいました。
内容はとてもシンプルながら、いい感じに仕上がったと思います。英語勉強中の方など、気軽に使用していただけたらと思います。
以下 TYPENG の説明です。ABOUT ページからの一部引用となります。
■ TYPENG とは シンプルなキー操作で英文入力を行うことが可能な、英語学習用ツールです。 ■ 特徴 英数字キーのみで英文入力が可能です。 以下のキー入力操作は自動的に補完されます。 ・単語間のスペース ・文頭や文中の大文字(Shiftキー + 英字キー) ・記号「'」「.」「?」等 例えば以下の英文章があったとします。 How are you? メモ帳などで上記文章を入力する際、以下のキー操作を行います。 「Shift + h」「o」「w」「Space」「a」「r」「e」「Space」「y」「o」「u」「?」 TYPENG では以下のキー操作のみで上記文章の入力が可能です。 「h」「o」「w」「a」「r」「e」「y」「o」「u」 ■機能 ・SPACEキー or 矢印左キー 英文音声読み上げを行います。Google Chrome or Safari 限定機能です。 ・SHIFTキー or 矢印右キー 日本語訳 表示/非表示 の切替えを行います。 英文入力完了後に日本語訳を見たい、という場合にご利用ください。 ・ENTERキー or 矢印下キー 次の文章へ切替を行います。 タイピングが苦手な方でも英字を読むだけの目的として利用できます。 矢印キーでの操作は、タイピングを行わず英文を次々と読みたい時にご利用ください。
クロスドメインの関係上、英文音声読み上げ機能は Google Chrome でしか動作しません。と思いきや Windows Safariでも動作しました。Webkit系ブラウザならば動作するのかもしれません。Mac では動作確認していないためどうなるかわかりません。
追記)
英文音声読み上げ機能を全ブラウザ対応にしました。
[ FLASH ] [ update ] [ web service ] 2012年03月23日 19:18 | コメント (0) | トラックバック
Box2DFlash v2.1a : ピンボール 其の七 ボール増殖と表示倍率設定
ボール増殖処理を組み込み。
[MOVE]と表示されている箇所の穴にボールが入ると画面内にボールが一つ追加されます。
実験として ボール増殖量には制限をかけておらず、一度ボールが増えると とてもにぎやかな画面になります。もはや何のゲームかわからないほどです。
また、今回より swf 表示倍率(100% or 200%)の設定をプレイヤーが任意に行えるようにしました。200% の表示倍率のものを ノート PC で確認してみたところ、表示がたいへんゆっくりしたものになってしまっていたからです。
■ 操作説明
swf 画面クリック後 以下のキーで操作を行います。
フリッパー操作 : 左右キー
画面振動 : 上キー
100%表示(画面動作が遅い方向け) : 1キー
200%表示 : 2キー
[ FLASH ] [ update ] 2012年01月30日 12:43 | コメント (6) | トラックバック
Box2DFlash v2.1a : ピンボール 其の六 ゲームテンポ上昇と動作対象オブジェクトのすり抜け対策(CCD)
「ピンボールゲームの楽しさとは何たるか」を調査するために、無料で遊べるピンボールゲームを片っ端からプレイしてみました。結果 一番楽しめたのは、長いフリッパーで勢いよく次々とボールを弾きまくるピンボールゲームでした。ふんわり浮くボールが画面内で弾かれる様を長く眺めているよりも、自分で頻繁に弾いて操作するほうが遊んでいる感が強いのかもしれません。
というわけで今回のサンプルでは、ボール落下速度を上げフリッパーの長さを増加し、ゲームテンポの向上を行なってみました。
ボール落下速度を上げてみると、ボールがフリッパーをすり抜けてしまうという問題が発生。
何か設定が足りないところはないか ネット上で「Box2D すり抜け」といった単語で調べてみたところ、以下の情報が見つかりました。
動作対象オブジェクト(b2Body)の b2BodyDef.bullet プロパティを true に設定すれば解決との事です。
bodyDef.bullet = true;
すり抜け対処のための衝突判定を continuous collision detection(CCD) と呼ぶ模様。Box2DFlash v2.1a 用のマニュアルではありませんが、以下の Box2D manual の Bullets の項目に説明がありました。
Box2D v2.2.0 User Manual
http://www.box2d.org/manual.html
ただし、この機能を利用すると負荷が増えるため、フレームレートが下がる原因となります。低スペックなPCほど影響がでてきます。
[ FLASH ] [ tips ] [ update ] 2012年01月16日 16:14 | コメント (0) | トラックバック
Box2DFlash v2.1a : ピンボール 其の五 演出微強化
Box2DFlash v2.1a : ピンボール 其の四 カジノ風BGM・他
Box2DFlash v2.1a : ピンボール 其の三 BGM
少しずつ合間合間に手を加えています。
今回は「クリスマス風」になっているかどうかわかりませんが、それっぽい BGM (約 500KB)を作成し組み込んでみました。
http://www.dango-itimi.com/blog/swf/147/preloader.swf
■ 操作説明
swf 画面クリック後 以下のキーで操作を行います。
フリッパー操作 : 左右キー
PAUSE : スペースキー
画面振動 : 上キー
[ FLASH ] [ update ] 2011年12月24日 17:32 | コメント (0) | トラックバック
GAE : Google アカウントによる Flash(swf) 内データ保存から ユーザ独自の URL 発行
Google App Engine(GAE)にて、以下の処理動作を行うサンプルアプリケーションを作成しました。
・swf 内データを Google アカウントを用いて GAE のデータストアに記録
・記録されたデータを元に Google アカウントユーザ毎の独自 URL の発行
サンプルアプリケーション URL
http://dango-itimi.appspot.com/crypto_test/
SCORE 欄 に最大 5桁の数値を入力し登録ボタンを押すと処理が開始します。使用しているブラウザで Google アカウントにログイン中の場合、GAE サーバ上に入力した数値が記録され、ログインしていない場合 ログインを促す画面が表示されます。
数値を登録した Google アカウントには アプリケーション上で ユニークID が割り振られ、http://dango-itimi.appspot.com/crypto_test/home/ユニークID/ という URL で、記録された数値を誰からも閲覧することができるようになります。
Google アカウント情報から取得可能な情報(ユーザID)はハッシュ化(暗号化)して利用しており、どの Google アカウントがこのサンプルアプリケーションを利用したのか等の情報は 管理人の私でもわからないようにしています。数値を登録するだけの大した内容ではありませんが、お気軽にご利用ください。
GAE には Google アカウントと紐付けたアプリケーションの作成を比較的簡単に行うことができる仕組みがあります。何かユーザサービスを作成したい場合、GAE と Google アカウントを利用する事で、アプリケーション作成者はユーザのアカウント管理システムを作成する必要はなくなります。私のようなサーバ側の知識はほとんどない Flash 開発者にとっては、この仕組は非常に大きいです。アカウント管理は Google にまかせ、コンテンツ制作に力をそそぐことができます。
現在 Google アカウントを取得するには電話番号確認が必須となっています。(IP によっては電話番号は必須にならないケースもあるとの情報も見かけます)
Web サービスに Google アカウントを利用するメリットとして、ユーザの唯一性が保ちやすいという点が挙げられます。例えば何かの投票サービスを作成する場合、一人が多数のアカウントを利用してたくさんの投票を行う、という事態を避ける事ができます。
デメリットとしては、電話番号が必須のため アカウント作成にやや手間がかかるという点が挙げられます。サービスにログインしようとしたら、Google アカウントが必須な事がわかり、アカウントを取得するには電話番号が必須、となると「これはめんどうだ」という事で、ユーザを逃してしまう可能性がでてきます。簡単なゲーム等では、ログインはしなくても遊ぶことは可能で、スコア登録を行う場合のみログインが必要である、といった工夫が必要となりそうです。
Flash(swf) とサーバ(GAE)とで通信を行う箇所では、調査した以下の記事の内容を元に暗号化通信を行なっています。
・暗号化調査
・暗号化調査2 : as3crypto ←→ PyCrypto : DES, AES, RSA
・暗号化調査3 : Crypto.getCipher メソッドの利用 : DES, AES 修正版
また、secureSWF を導入し、swf の難読化を行なっています。(現在円高なので secureSWF は割とリーズナブルなお値段になっているかもしれません。)
python 側(PyCrypto)で RSA 暗号化したデータを as3 側(as3Crypto)で復号可能であれば もう少し安全な暗号化通信を行えそうなのですが、ここは残念なところです。
今回行なった通信内容のデータ改ざん対策の他、ゲーム等ではメモリ操作によるチート対策も必須となりそうです。
参考 : Flashゲームのチート対策 | NJF
http://njf.jp/?p=999
複数の swf からでもデータ登録を可能にするシステムへ修正予定。汎用性をもたせたライブラリ化を図ります。
サーバ・ユーザアカウント管理問題や swf 解析問題により、今までは諦めてしまっていた事が多々ありました。「それを行うにはサーバ側を専門としている会社が必要」であったり「swf は解析されてしまうから、それを Flash で行うには避けたほうがよい」等々。
GAE の利用や、暗号・難読化により、これら問題は解決してきているのではないかと思います。
[ FLASH ] [ tips ] [ update ] 2011年12月02日 17:26 | コメント (0) | トラックバック
暗号化調査
暗号化通信 並びに swf の暗号化についての調査を少しずつ開始。
いくら暗号化通信を行おうとも swf 自体を解析されてしまえば意味が無い、といった認識がありました。ざっと調査した結果 その認識は変わらず。とはいえ暗号化しないと、誰でも簡単に不正なリクエストを行うことが可能となってしまうため、重要なデータを扱う swf では暗号化は必須となります。
swf は Google App Engine 上で動作させることを予定しており、AS3 ←→ Python 双方向に暗号化通信を可能にすることを第一の目標とします。
暗号化の方法を調べてみると、共通鍵暗号方式と公開鍵暗号方式、そして両者を組み合わせたハイブリッド暗号方式等が見つかります。以下はハイブリッド暗号方式に関しての参考 URL です。
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1065429575
http://itpro.nikkeibp.co.jp/article/COLUMN/20060620/241303/
共通鍵暗号化通信、公開鍵暗号化通信それぞれサンプルを制作した後、ハイブリッド暗号方式に挑戦してみようと思います。ハイブリッド式にするのは、上記 URL 内にあるような両者の利点をとるため、というのではなく、スクリプト難読化のため(不正なリクエストを送り難くするため)の対処といえます。
AS3, python 共に暗号化に関する情報は検索すると結構見つかります。MD5, RSA あたりがキーワードになるでしょうか。
Adobe のサイトでも少々解説がありました。
より安全なSWF Webアプリケーションの作成
http://www.adobe.com/jp/devnet/flashplayer/articles/secure_swf_apps_12.html
ただし、上記 URL の以下の文章は誤りではないでしょうか。
非対称暗号化方式を使用する場合は、SWFファイル内に公開鍵を格納しても、 脅威にさらされることはありません。
第三者がSWFファイルを逆コンパイルして鍵を盗んだとしても問題はありません。 攻撃者が不正な暗号化済みデータをサーバに送りつける可能性もありますが、 サーバ側で、暗号化が行われているかどうかにかかわらずデータの検証を行うよう対策を施していれば、 問題はありません。
サーバ側でデータの検証を行えばよい、とありますが、データを作る側のロジックは swf 内に存在するため、ロジックが解析されてしまえば不正なデータは作れてしまうような気がします。
まず、どれくらいの精度で解析可能なんだろうかと、世にある swf の解析ソフトを試用してみました。
swf バイナリ解析を勉強していた時、相当これはややこしいな、と感じていたため、解析ソフトも大した解析はできないのではないか？などと思っていましたが、いやはや実際に試用してみてびっくり。クラスパッケージ構造そのまま、ソースファイルの内容ほぼそのままに解析されました。あまりのそのままさに、ブーッと吹いてしまいました。暗号化通信対処を行なっても、その処理箇所がどうなっているのか知識のある人ならばすぐに見ることができてしまいます。
これは手詰まりか、と思いましたが、次に「swf 難読化ソフト」の試用を行って見ました。ソフト名は secureSWF です。試用してみた結果、解析ソフトで解析したとしてもソースファイルの内容は何が書かれているのか分からないような難読化が行われました。ディレクトリ構造やらクラス名やら何から何まで解析結果はめちゃめちゃな状態になり、これを解読するのは無理と言ってもいいような状況ではないでしょうか。
ただし、secureSWF によってクラス名等変更されているのが原因かどうか、外部 swf を読み込む箇所で動作が停止してしまう現象が発生しました。secureSWF の Identifiers Renaming タブに、クラス名や変数名等 rename 設定を任意に行うことができるような箇所があるので、その設定によってこの問題は解決するかもしれません。
secureSWF のデモダウンロードページを見てみると、FDT Plugin バージョンというものも用意されている模様。これはなんとか上記問題を解決し、導入を検討してみたいところです。
暗号化通信並びに swf 暗号化、双方が問題なく可能になれば、サーバと swf とのデータのやりとりを行う処理にて、最低限の対策はとった と言うことができそうです。
[ FLASH ] [ tips ] [ update ] 2011年10月31日 16:23 | コメント (0) | トラックバック
Box2DFlash v2.1a : ピンボール 其の二
過去制作していた素材データの組み込みが完了。
自力での物理演算処理組み込みにおいて難題だった「フリッパーがボールを跳ね返す動作」は、Box2DFlash によって見事なまでの跳ね返り具合を見せてくれるようになりました。
http://www.dango-itimi.com/blog/swf/146/preloader.swf
画面クリック後、左右キーでフリッパーを操作することが可能です。スペースキーを押すと PAUSE となります。
また、ボールがどこか平坦な地で停止してしまった場合の対処として、上下キーで画面全体を揺らす事ができます。ボールがどこかに接地している場合のみ機能し、一度揺らしたら一定時間立たないと再度揺らすことはできません。
効果音はテストとしてフリッパーを操作した時のみ鳴るようにしています。また、現段階で得点はスロットがそろった時のみ入ります。
どのようにすれば Box2DFlash でピンボールゲームを作ることが可能かの調査は、今回のサンプル製作でほぼ完了しました。今後は、スロットのようなゲーム内イベントを少しずつ増やしていき、充実化を図りたいと思います。
[ FLASH ] [ update ] 2011年10月29日 13:36 | コメント (0) | トラックバック
Box2DFlash v2.1a ピンボール1
過去 AS2 で製作し中途で止まっていたピンボールゲームを、Box2DFlash v2.1a にて動作させてみることに。
「Flash オーサリング環境上で製作したシェイプデータを Box2DFlash の物体として再現するライブラリ」の精錬化と、Box2D を用いてのゲームプログラミングの練習の意味も兼ねての制作となります。
過去製作したピンボールゲームの背景データと、Flash オーサリング上で背景用グラフィックスシンボルを配置したイメージは以下となります。
まだまだお粗末ですが Box2D debug モードでの動作は以下となります。
http://www.dango-itimi.com/blog/swf/145/0/preloader.swf
画面クリック後、左右キーでフリッパーを操作することが可能です。ゲーム中スペースキーを押すと PAUSE となります。どこかくぼみにボールがはまるとゲームは停止してしまいます。
PAUSE 機能を実装してみて、Box2DFlash v2.1a では内部で何か独自のスレッドを持ってはいないことが確認できました。b2World.Step メソッドを実行することで 1フレーム分の処理が実行されるような内容になっているようです。
背景グラフィックスや、ボールとフリッパーのグラフィックスを合わせたものが以下となります。
http://www.dango-itimi.com/blog/swf/145/1/preloader.swf
フリッパーの動作は b2RevoluteJointDef クラスのモーター機能を利用しています。
参考サイト)
http://flashjp.com/apiindex.php
http://d.hatena.ne.jp/matsu4512/20090110/1231585208
b2RevoluteJointDef を利用してみた所、b2RevoluteJointDef.lowerAngle, b2RevoluteJointDef.upperAngle の値を設定したとしても、その値 丁度には停止してくれない、という点に気づきました。制限値に近い角度になっている状態で更に大きなチカラを加えたり モーターを回したりすると、一瞬大きく角度がはみ出てしまいます。よって、制限角度を超えたらそれ以上にチカラを加えたりモーターを回したりはしないようにするための制御を別途行うようにしています。
[ FLASH ] [ tips ] [ update ] 2011年10月13日 16:56 | コメント (2) | トラックバック
Box2DFlash v2.1a 調査6 : 斜面を登り切った後の平面移動と処理サイクル
斜面を並行移動するプレイヤー(操作可能な箱)が、斜面を登り切った後 繋がる平面に対し、スムーズな平面並行移動に遷移するサンプルを作成しました。斜面を登り切るタイミングで Y軸方向の移動ピクセル量を調節し、平面から浮かないような処理を加えています。
http://www.dango-itimi.com/blog/swf/144/preloader.swf
斜面を下り終えた後に繋がる平面への並行移動遷移処理は、今回の処理とは別となるため恐らく次回となります。
斜面を登り切った後 どうすれば平面並行移動にスムーズに遷移できるのか、胃袋が痛くなるまで悩みましたが、Box2D上におけるピクセル移動処理の方法が判明したため今回のサンプルを作成できました。
その他 悩ましかった点は、プレイヤー位置や移動量を決定する b2Body.SetPosition, b2Body.ApplyImpulse, b2Body.SetLinearVelocity メソッドがそれぞれ適用されるタイミングはいつなのか、プレイヤー位置操作後 プレイヤーが衝突している物質を取得できるタイミングはいつなのか、についてです。
結論としては、1フレーム内に 以下の順序で処理を行うことにより、問題は解決しています。
(1)プレイヤー移動 b2Body.SetPosition, b2Body.ApplyImpulse, b2Body.SetLinearVelocity 等を実行 (2)b2World.Step メソッド実行 (3)衝突物質の判定 b2World.GetContactList メソッドからの衝突物質データの取得 (4)衝突判定 プレイヤーが衝突している物質が何であるかを判定し、次のフレームでプレイヤーがどの行動を取るのかを設定
プレイヤー位置を設定するメソッド実行後、b2World.Step メソッドにより プレイヤーの位置が確定し、確定された位置から衝突物質が何であるのか判定できるようになる、といったところでしょうか。誤っていたらごめんなさい。
[ FLASH ] [ tips ] [ update ] 2011年08月18日 17:47 | コメント (0) | トラックバック
Box2DFlash v2.1a 調査5 : ピクセル移動
移動する物質を指定位置でぴったり停止させたい、という場合、任意で物質の移動速度を調節する必要があります。しかしどういう記述をすれば、ピクセル単位で物質を移動させることができるのか わからない状態でした。
検索してみたところ、丁度それらしき情報を発見。
適当ブログ:物体を投げる処理(box2d c++)
http://wt03.blog.fc2.com/blog-entry-42.html
上記サイトによると、以下の式から得られる値を b2Body.SerLinearVelocity に設定すればよいとのことです。
移動させたいピクセル数 * フレームレート / BOX2D_SCALE
例えば、フレームレート 30, BOX2D_SCALE の値を 10 として、横に 5 ピクセル移動させたい場合以下のような記述を行います。
var FRAME_RATE:uint = 30; var BOX2D_SCALE:uint = 10; body.SetLinearVelocity(new b2Vec2(5 * FRAME_RATE / BOX2D_SCALE, 0));
変数 body は操作したい物質の b2Body クラスインスタンスです。
上下左右キーで空中を 5 ピクセルずつ移動するだけのサンプル swf は以下となります。
http://www.dango-itimi.com/blog/swf/143/preloader.swf
このサンプルでは前回の記事に記述した、操作対象となる物質に重力を無視する処理を組み込んでいます。
[ FLASH ] [ tips ] [ update ] 2011年08月17日 10:00 | コメント (0) | トラックバック
Box2DFlash v2.1a 調査4 : 重力を無視して直進する物質
Box2D 上でプレイヤーに何か弾のようなものを撃たせたい場合に必要と思われる、「重力を無視して直進する物質」はどのようにすれば表現できるのかの調査を行ってみることに。
ネットで検索してみると以下のサイトに、重力を無視するにはどうすればよいかの説明がありました。(恐らくバージョンは Box2DFlash v2.0.2)
Master of None
http://d.hatena.ne.jp/o_healer/20080508
上記サイトでは、b2Math.MulFV というメソッドを用い、物質の質量と反対方向の重力数値を加工し、加工後取得可能な力を物質に加えているらしき事がわかります。
しかし v2.1a では b2Math クラスは無くなっており、v2.0.2 のリファレンスで b2Math.MulFV メソッドの項目を見てみるも何も説明がなく、MulFV メソッドによりどのような加工が行われるのかわからない状況です。
よって色々な方法を試し、なんとかそれっぽい動作になる形にしました。
重力を無視して物質を直進させるには以下の二行を毎フレーム呼び出す形となります。
body.SetLinearVelocity(new b2Vec2(x軸速度, y軸速度)); body.ApplyForce(new b2Vec2(0, body.GetMass() * -gravityY), body.GetPosition());
変数 body は直進させたい物質の b2Body クラスインスタンスとなります。
一行目 SetLinearVelocity は、今までの物質の速度を無視して、引数で指定した速度に強制的に変更します。二行目では重力を相殺しています。もっとスマートな方法はあるかもしれません。
物質を空中に留めたい場合は以下のように記述します。
body.SetLinearVelocity(new b2Vec2(0, 0)); body.ApplyForce(new b2Vec2(0, body.GetMass() * -gravityY), body.GetPosition());
今回作成したサンプルは以下のような記述を行い、弾が右方向に直進するようにしています。
body.SetLinearVelocity(new b2Vec2(10, 0)); body.ApplyForce(new b2Vec2(0, body.GetMass() * -gravityY), body.GetPosition());
サンプル swf は以下となります。スペースキーで弾が発射されます。(スペースキーを有効にするにはキーボード変換を半角英数モードにする必要があります)
http://www.dango-itimi.com/blog/swf/142/preloader.swf
他参考にさせていただいたサイト
■ SetLinearVelocity 関連
http://www.haphands.com/sw_flash/tech/box2d/box2d_07.html
■ 衝突 する / しない のグループ分け関連
http://www40.atwiki.jp/spellbound/pages/647.html
http://hokori.net/2009/05/27/box2dflashas3_contact/
[ FLASH ] [ tips ] [ update ] 2011年08月07日 15:27 | コメント (0) | トラックバック
Box2DFlash v2.1a 調査3 : b2Manifold 調査
前回の記事「Box2DFlash v2.1a 調査2 : 斜面に対して平行に移動する箱」からの続きです。
二つの物質が衝突した際 得ることが可能な b2Manifold というクラスインスタンスがあります。b2Manifold クラスインスタンスのプロパティ値をどのように見れば「斜面に衝突したかどうか」「どの斜面に衝突したのか」を判別できるのかの調査を行いました。
調査用 サンプル swf
http://www.dango-itimi.com/blog/swf/141/preloader.swf
上下左右キーで回転しない箱(以後プレイヤー)を操作する事ができます。斜面に接地時は、斜面に対して平行に移動します。
プレイヤーが背景オブジェクト(緑色の物質)に衝突すると、m_type と m_localPlaneNormal テキストフィールドに衝突時のデータが表示されます。
まず、m_type プロパティの値に注目します。サンプルから以下のデータを得ることができます。
(1) プレイヤーの上下左右の面が多角形(box or polygon)の背景オブジェクトにぶつかる あるいはプレイヤーのどこかが円の背景オブジェクトにぶつかると b2Manifold.m_type は 2 の値(b2Manifold.e_faceA) を返却する (2) プレイヤーの四隅が背景オブジェクトにぶつかると b2Manifold.m_type は 4 の値(b2Manifold.e_faceB) を返却する
プレイヤーの角度は常に一定であり、プレイヤー上下左右の面が背景オブジェクトの斜面に衝突する事はありません。背景オブジェクト斜面に衝突するのはプレイヤーの四隅のみです。
よって、b2Manifold.m_type の値が 4 の時に、プレイヤーが斜面に衝突していることになります。
m_localPlaneNormal は「ローカル座標軸を元とした衝突面の単位法線ベクトル」といった意味でしょうか。b2Manifold.m_type プロパティと合わせて見ます。
(1) m_type の値が 2 で プレイヤーが多角形(box or polygon)に衝突した場合 プレイヤー衝突面の単位法線ベクトルを返却する (2) m_type の値が 4 の場合 背景オブジェクトのローカル座標軸を元とした 背景オブジェクト衝突面の単位法線ベクトルを返却する (3) m_type の値が 2 で プレイヤーが円に衝突した場合は 今回の斜面衝突判定とは関係ないため説明略
ローカル座標軸を元としたデータの取得となるため、画面上に表示されている物質の角度がなんであれ、角度を 0 とした単位法線ベクトルが返却されます(多分)。box の角度が 15度、-30度の背景オブジェクトいずれも、上面にプレイヤーをぶつけると m_localPlaneNormal の値は (0, -1) となります。
これより今回のサンプルでは、以下の条件(a)～(c)いずれかの時 プレイヤーは斜面に衝突していることになります。
(a) 衝突した長方形(box)背景オブジェクトの角度が正で m_localPlaneNormal の値が(-1, 0) または (0, -1) (b) 衝突した長方形(box)背景オブジェクトの角度が負で m_localPlaneNormal の値が(-1, 0) または (1, 0) (c) 衝突した背景オブジェクトが多角形(polygon)で m_localPlaneNormal の y 値が負
多角形(polygon)の角度が 0 ではない場合、斜面に衝突したかどうかの判定処理は複雑になりそうです。
参考)
Box2DFlash Documentation : b2Manifold
http://www.box2dflash.org/docs/2.1a/reference/Box2D/Collision/b2Manifold.html
Box2D 2.1a Tutorial – Part 4 (Collision Detection)
http://blog.allanbishop.com/box2d-2-1a-tutorial-–-part-4-collision-detection/
[ FLASH ] [ tips ] [ update ] 2011年08月05日 02:14 | コメント (0) | トラックバック
Box2DFlash v2.1a 調査2 : 斜面に対して平行に移動する箱
アクションゲームを作る場合に必要と思われる機能「斜面に対しての並行移動」は、Box2Dにて実現可能かどうかの調査を行ってみることに。
斜面に平行に移動するには、衝突した物資の斜面の角度が分かればよい事になります。
ネット上で調べてみると、物質衝突時得ることが可能な b2Manifold というクラスインスタンスがある、という情報が見つかります。しかし b2Manifold から得られる各値をどのように見れば、「衝突した斜面」と「斜面の角度」の判別を行うことが可能なのかの情報は見つかりませんでした。(特にv2.1aの日本語の情報は皆無)
よって あらゆる方向から物質をぶつけ、得られる数値から推測を行い、おそらくこうであろうと予測しつつ、なんとか形にする所まで進めました。
成果物は以下となります。画面クリック後、上下左右キーでプレイヤー(回転しない箱)を操作する事が可能です。
http://www.dango-itimi.com/blog/swf/140/preloader.swf
通常はプレイヤーに対し上下左右キーでその方向に力が加わります。しかし長方形の固定物質の斜面にプレイヤーが接地(上から衝突)した場合のみ、左右キーはプレイヤーに対して 斜面に並行した力が加わるようにしています。
現在は多角形の斜面には対応しておらず、多角形に対応後、調査結果をまとめたものを記事にできればと思います。
[ FLASH ] [ tips ] [ update ] 2011年07月31日 19:30 | コメント (0) | トラックバック
Box2DFlash v2.1a 調査
世に公開されている物理エンジンライブラリを用いてのプログラミング法を学習すべく、Box2DFlash v2.1a を利用してみることに。
Box2DFlash
http://www.box2dflash.org/
Box2DFlash はバージョンごとに API が変化しているようで、最新の v2.1a に関しては以下のサイトが参考になります。
Box2D 2.1a Tutorial - Part 1(英語)
http://blog.allanbishop.com/box2d-2-1a-tutorial-part-1/
まずは Box2D の使用方法を学びつつ、Flash オーサリング環境上で制作したシェイプデータを、そのまま Box2DFlash の物体として再現するような処理を作成する事を第一目標としました。
以下のような 四角、丸、点(緑丸)の集合体、のムービークリップを Flash オーサリング上で用意します。
四角なら(box～)、丸なら(circle～)、多角形なら(polygon～)、といった具合にムービークリップ名には規則性を持たせ、ムービークリップ名称と形状・座標・角度に応じた Box2D の物質を生成するように処理を作ります。
例えば一番左上の紫色の四角形のムービークリップ名は box4_1_0_10 としており、数値の部分は以下の意味を持ちます。
4 : id
1 : 動作する物体であることを示す
0 : 反発係数
10 : 摩擦係数
反発係数と摩擦係数は処理内では 1/10 として計算されます。
処理作成後の再現結果は以下となります。
http://www.dango-itimi.com/blog/swf/139/preloader.swf
ムービークリップの名称を変更すれば、ソースコードを変更する事なく各物体の振る舞いを変更する事が可能です。また、ムービークリップ群を配置しているクラスは dynamic に設定しており、ソースコードを変更する事なく、自由にムービークリップを追加・削除する事ができます。(dynamic なクラスはバグの温床ともなるため、使用の際は注意が必要)
反発係数や摩擦係数をムービークリップ名で設定できるようにはしましたが、その仕様は削除する事になるかもしれません。物体1から10までを同じ反発係数や摩擦係数にしたい、という場合、専用のクラスを用意し、そのクラスと結びつけるほうがよいからです。また、反発係数や摩擦係数以外の物体に設定可能なパラメータはまだまだたくさんあり、全てのパラメータをムービークリップ名で設定可能にする、というのは大変で現実的ではありません。
[ FLASH ] [ tips ] [ update ] 2011年07月25日 12:38 | コメント (0) | トラックバック
FLA.PRINTER フラプリ : RPG BATTLE2 カスタムモード公開
http://flaprinter.appspot.com/rpg_battle2/custom/
FLA.PRINTER フラプリ 第五弾 RPG BATTLE2 のカスタムモードを公開しました。
シンプルモードに対し色々と設定が可能になっております。お暇がありましたらどうぞご利用ください。
[ FLASH ] [ update ] 2011年07月17日 16:52 | コメント (0) | トラックバック
FLA.PRINTER フラプリ : RPG BATTLE2 シンプルモード公開
http://flaprinter.appspot.com/rpg_battle2/simple/
FLA.PRINTER フラプリ 第五弾 RPG BATTLE2 のシンプルモードを公開しました。
シンプルモードでは敵画像の差し替えを行うことが可能です。お暇がありましたらどうぞご利用ください。
・敵の画像サイズは最大で 幅 220px 高さ 115px
これより大きい表示サイズの画像を指定すると JPG 形式で縮小されます。
・JPG, PNG 以外の画像を指定すると JPG 形式に変換される
透過 GIF 画像は JPG に変換されてしまうため、透過 PNG で作成する事をお勧めします。
[ FLASH ] [ update ] 2011年07月15日 10:21 | コメント (0) | トラックバック
FLA.PRINTER フラプリ : RPG BATTLE 2 サンプル swf 作成中
FLA.PRINTER フラプリ : RPG BATTLE 2 グラフィックス作成中
FLA.PRINTER フラプリ : 縦シューティング公開
http://flaprinter.appspot.com/shooter_cols/simple/
http://flaprinter.appspot.com/shooter_cols/custom/
FLA.PRINTER フラプリ 第四弾 縦シューティングゲームを公開しました。
内容は横シューティングをほぼそのまま縦バージョンにしただけとなります。
お暇がありましたらどうぞご利用ください。
[ FLASH ] [ update ] 2011年06月22日 00:00 | コメント (0) | トラックバック
FLA.PRINTER フラプリ : RPG BATTLE1 カスタムモード公開
http://flaprinter.appspot.com/rpg_battle1/custom/
FLA.PRINTER フラプリ 第三弾 RPG BATTLE1 のカスタムモードを公開しました。
シンプルモードに対し色々と設定が可能になっております。お暇がありましたらどうぞご利用ください。
サーバ側の処理や html, javascript の処理は、用意しておいたモジュールを組み合わせて作成しただけなので、ベースの swf が完成した後は公開までかなり早く済みました。一点、クッキーに日本語の文字列を保存しようとしたところ、python 独自?の Unicode の扱いが原因でエラーが発生し少々つまずくことに。対策法を別途記事にするかもしれません。
[ FLASH ] [ update ] 2011年05月29日 20:54 | コメント (2) | トラックバック
FLA.PRINTER フラプリ : RPG BATTLE1 シンプルモード公開
http://flaprinter.appspot.com/rpg_battle1/simple/
FLA.PRINTER フラプリ 第三弾 RPG BATTLE1 のシンプルモードを公開しました。
シンプルモードでは敵画像の差し替えを行うことが可能です。お暇がありましたらどうぞご利用ください。
・敵の画像サイズは最大で 幅 240px 高さ 115px
これより大きい表示サイズの画像を指定すると JPG 形式で縮小されます。
・JPG, PNG 以外の画像を指定すると JPG 形式に変換される
透過 GIF 画像は JPG に変換されてしまうため、透過 PNG で作成する事をお勧めします。
・敵画像は二枚まで指定可能
・背景画像設定可能
・プレイヤーや敵のパラメータ(HP, MP, 名前等)設定が可能
・デフォルトサウンド設定
・クリア後の URL 設定
[ FLASH ] [ update ] 2011年05月22日 14:04 | コメント (5) | トラックバック
FLA.PRINTER フラプリ 第三弾 ベース swf 作成中
FLA.PRINTER フラプリ 第三弾 グラフィックス作成中
FLA.PRINTER フラプリ : シューティング カスタムモード公開
http://flaprinter.appspot.com/shooter_rows/custom/
FLA.PRINTER フラプリ 第二弾 シューティングゲームのカスタムモードを公開しました。
カスタムモードでは敵機体画像、プレイヤー機体画像、背景画像、その他細かいパラメータ設定が可能です。どこか不具合等ありましたら、お気軽に申し付けください。
今回のカスタムモード制作に伴い、出来る限りの共通処理のモジュール化を実施。今後はFlash Lite 制作のみになるべく専念できるような形にしたつもりです。
モジュール化は頭を少々使いますが楽しい作業でもあります。
ただし、モジュールが出来上がった後はモジュールを組み立てるだけの作業が発生するため、モチベーションがどうも保ちにくい、という難点があります。
ブロック崩しのカスタムモード製作時 感じていましたが、テキストフィールドやラジオボタン等、画面上に input フォームがたくさん配置されていると、どうも乱雑で見た目がいまいちな感じがありました。
また、今回シューティングゲームでは結構多くの設定を行う事が可能なのですが、設定項目が多ければ多いほど input フォームも増え、見難さが増してしまいます。設定するつもりのない設定項目の input フォームが見えているのは邪魔かもしれません。
上記問題を解決するために、必要な設定項目以外はデフォルトでは閉じるようにしました。
項目タイトルをクリックすると開きます。
その他、作り直しが何度も行われるかもしれない事を考慮し、設定したデータがクッキーに記憶されている間は、カスタムページを開いた時 自動で設定項目が開くようにもしています。
[ FLASH ] [ tips ] [ update ] 2011年04月27日 20:27 | コメント (0) | トラックバック
FLA.PRINTER フラプリ : シューティング シンプルモード公開
http://flaprinter.appspot.com/shooter_rows/simple/
FLA.PRINTER フラプリ 第二弾 シューティングゲームのシンプルモードを公開しました。シンプルモードでは敵機体の画像の差し替えを行うことが可能です。
お暇がありましたらどうぞご利用ください。
追記)
ボス機体表示サイズは 幅x高さ 100 x 150 px ですが、それより小さい JPG, PNG 以外の画像を指定するとエラーが発生するかもしれないため、修正予定
追記2)
修正完了しました。カスタムモードで詳細を記述する予定ですが、現在の仕様を以下に記述しておきます。
・ボス機体表示サイズは最大で 幅 110 px, 高さ 150 px
これより大きい表示サイズの画像を指定すると JPG 形式で縮小されます。
・JPG, PNG 以外の画像を指定すると JPG 形式に変換される
透過 GIF 画像は JPG に変換されてしまうため 透過 PNG で作成する事をお勧めします。
[ FLASH ] [ update ] 2011年04月19日 19:22 | コメント (0) | トラックバック
FLA.PRINTER フラプリ:ブロック崩し simpleモード不具合修正
ブロック崩し simple モードが正常に動作していなかった不具合を修正しました。
http://flaprinter.appspot.com/block/simple/
第二弾シューティングゲームは、fla ファイルをパブリッシュするための jsfl の開発が完了し、サーバ側(python)の処理制作にとりかかりました。まずはシンプルモードから作成を行い、ブロック崩しとの共通処理項目をまとめていきます。
[ FLASH ] [ update ] 2011年04月17日 19:15 | コメント (0) | トラックバック
FLA.PRINTER フラプリ 第二弾 ベース swf 作成中
FLA.PRINTER フラプリ 第二弾 グラフィックス作成中
GAE SDK 1.4.3 リリースに伴う「FLA.PRINTER フラプリ」変更予定箇所
2011年3月30日に Google APP Engine SDK 1.4.3 がリリースされたとのことです。気になった内容は Image API のあらゆる処理に画質設定が可能になったという点です。
参考) python 練習帳 : Google App Engine SDK 1.4.3リリース文抄訳
http://php6.jp/python/2011/04/02/google-app-engine-sdk-1-4-3/
試してみたところ、見事画質 100 のまま、画像の 変形・切り抜き・合成 までが可能となりました。
ちなみに GAE ドキュメント の日本語ページの内容は相当古いようで、Image API の画質設定を行える説明箇所がありません。右上の言語設定を英語にすると、比較的新しい内容となります。ただし現在はまだ 1.4.3 の内容には書き変わっていない模様。
http://code.google.com/intl/ja/appengine/docs/python/images/
画質設定はメソッドの最後の引数に 0～100 の値を設定すれば有効となりました。
画質100 で変形・切り抜き・合成 を行う記述例)
from google.appengine.api import images images.resize(imageBytes, width, height, images.JPEG, 100) images.crop(imageBytes, leftX, topY, rightX, bottomY, images.JPEG, 100 ) images.composite( [(imageBytes, 0, 0, 1.0, images.CENTER_CENTER)], width, height, 4294967295, #ffffff images.JPEG, 100 )
早速 FLA.PRINTER フラプリにて画質 100 設定をデフォルトにしようと考えました。しかし、生成される swf の容量が 100 KB を超えやすくなってしまうため、カスタムモードで ユーザが任意に画質を選択できるようにしたいと思います。
あと余談ですが、フラプリ ブロック崩しのサンプルでクリア後に表示される URL が誤っており、せっかくのボーナス画像が見ることができない状態になってしまっていたため修正しました。ごめんなさい。
追記 2011/4/7)
ブロック崩しカスタムモードにて画質設定可能になりました。
[ FLASH ] [ tips ] [ update ] 2011年04月04日 11:48 | コメント (0) | トラックバック
Python + SWFバイナリ解析 : ビットマップ画像用 DefineShape タグ解析完了
GAE/python : Webツール「FLA.PRINTER フラプリ」を公開
今年正月より調査を行っていた Google App Engine(以下GAE) にて、ゲーム・待ち受け Flash(swf) が簡単に作成できる Webツール「FLA.PRINTER フラプリ」を公開しました。
画像一枚用意するだけでオリジナルの携帯向け Flash 製作を行えます。
結構古い携帯電話にも対応します。(vodafone 等)
簡単に作れるかわりに、Flash の内容もシンプルです。
カスタムモードを用いれば、ある程度 こった Flash を作ることが可能です。
携帯向けの他、PC向けに、マウス対応など 機能を拡張したファイルも同時に出力します。
何かものを作る際、形にするまでには多くの根気が必要となりますが、その根気の必要量をなるべく少なくすべく、シンプルモードはできるだけ簡単なステップで Flash(swf) を生成できるようにしています。生成後に表示される QR コードから、携帯電話で即表示確認・保存が可能となります。
現在フラプリでは、ブロック崩しのみが作成可能です。内容はとても単純なブロック崩しなので、ゲーム性は薄いです。バーの中心でボールを当てた際、ブロック貫通ボールになるようにする、等、まだ改良の余地はあるかもしれません。
個人的には、以下のようなムフフな感じでも利用してほしく思います。
サンプルギャラリー : block 3
---
以下少々技術的な余談
swf 内に任意のスクリプトの埋め込みと、画像データの入れ替えを行う処理を python にて実装しました。
はじめは PIL(Python Imaging Library) を利用して swf に画像を埋め込むための解析処理を作成していましたが、中途、PIL は GAE 上では利用できない事が判明しました。よって GAE 上では、PNG の画像解析に関しては pypng というモジュールを利用し、GIF の解析処理は断念することに。
最終的に、swf バイナリ解析処理は、PIL 利用版と pypng 利用版 を切り替えて利用出来るようにまとめました。
ブロック崩しカスタムモードでは背景画像を選択することができます。この背景画像は PNG ファイルなのですが、PNG ファイルを swf 内に埋め込むための解析処理に結構な処理行数を必要としてしまいます。
ユーザからのリクエスト(生成処理呼び出し)のたびに PNG 解析処理を実行するのは よろしくないため、事前に swf 内に埋め込める形にバイナリ解析しデータストアに登録しておく、という方法を採りました。
ローカル PC 上のデータストアに設定したデータを、本サーバ上に登録する方法があるようですが、資料が少なくややこしそうだったため、Web 上からアップロードできる要パスワードの専用ページを別途作成することに。
jsfl を用い、パブリッシュ時に ガイドレイヤーやプロファイラを動的に切り替えることで、一つの fla ファイル内に 携帯向け Flash Lite 1.1 用スクリプトと、PC向け Flash Player 7 用スクリプトの両立を行っています。
今回作成したブロック崩し用 fla ファイルでは jsfl を実行すると、以下のような swf (計16種類)がパブリッシュされます。
fla ├ シンプルモード用 │ ├ ゲーム用 │ │ ├ Flash Lite 1.1 用 │ │ │ ├ jpg 画像用 swf │ │ │ └ png 画像用 swf │ │ └ Flash Player 7 用 │ │ ├ jpg 画像用 swf │ │ └ png 画像用 swf │ └ 待ちうけ用 │ ├ Flash Lite 1.1 用 │ │ ├ jpg 画像用 swf │ … … │ └ カスタムモード ├ ゲーム …
ユーザがシンプルモードで投稿した画像が jpg だった場合、サーバ側では「シンプルモード」の「jpg 画像用 swf」4種類を取得し、それら swf 内に投稿 jpg の埋め込みを行います。
PC 向け Flash(swf) が Flash Player 7 である理由は、Flash Player 7 が Flash Lite 1.1 用スクリプトを判別可能な最大のバージョンであるからです。Flash Player 8 からは Flash Lite 1.1 のスクリプトはパブリッシュできません。
Google App Engine SDK でのローカル(Windows上)環境上では動作したものが、サーバにアップロードすると動作しない、といった箇所がいくつかありました(後述)。バグを完全に取り除いてから本サーバにアップロード、という手順は無理かもしれません。
また、Google App Engine Launcher からの「Deploy」コマンドによるファイルアップロードは 毎回 ID と パスワード入力を行わなくてはならないため、本サーバ上での動作確認はやや手間がかかります。
urlopen によるファイル取得に関しまして、ローカルと本サーバ上とでは動作が異なる点に少々つまづきました。
Windows 上では、プロジェクトルートからの相対パスで静的ファイルが取得できるのに対し、本サーバ上では相対パスでの urlopen による静的ファイルの取得は不可。「http://～」というアドレス経由で Web 上から取得できる形にしておけば本サーバで取得可能。しかし、ローカル環境上では「http://localhost～」というアドレス経由では urlopen が機能せず？ファイル取得できず。
結局、ローカル環境上では相対パスで、本サーバ上では「http://～」経由でファイルを取得するような処理を作成することに。webapp のテンプレートファイルのファイルパス指定は相対パスでローカル本サーバどちらとも正常に機能するので、何かよい方法があるのかもしれません。
ユーザが設定する画像のフォーマットエラーや容量オーバー時等に発生するエラーにて、「フォーマットエラーです」といったきちんと場合分けしたエラー表示処理は面倒なのでまだ行っていません。エラー発生時は強制的にホームに戻されるという、やや不親切設計です。
古い携帯機種にも対応するために、ブロック画像を細かく分割するという作業を行っています。一つの大きな画像をブロックの数だけスクリプトで複製し、各ブロック内では画像の一部分を表示する、という方法が本来はセオリーであり、簡単で swf 容量も少なく済みます。しかしその簡単な方法ですと 昔の携帯機種ではブロック消去時に負荷がかかるようで、画面が一瞬止まってしまうという現象が発生します。事前に画像をわざわざ小さく分割するのは苦肉の作であります。
今後の開発用に、Web 上から swf 内ヘッダとタグを解析し表示するツールを作成しています。どのタグのデータを入れ替えれば良いのかを判別するために利用します。
http://flaprinter.appspot.com/swfdump/
解析結果は header, tagSet, tagMap の順で表示されます。
header --- swf ヘッダ内のデータ
tagSet --- 登場順タグ一覧
tagMap --- タグ毎の 登場順に ID を割り振った一覧
Amazon 商品の表示を行う予定でしたが、東北関東大震災により Amazon が正常に機能していない状況のため、現在は勝手に日本赤十字社へのリンクを貼らせていただいております。
■ swf バイナリ解析処理の拡張
画像表示領域(DefineShape)の動的変更
■ ゲーム第二弾製作
ブロック崩しの次のゲームを製作中。二作目まで製作できたら量産体系が整うことになりそうなので、以後は Flash Lite の製作のみに集中できそうです。
[ FLASH ] [ tips ] [ update ] [ web service ] 2011年03月26日 16:05 | コメント (0) | トラックバック
Mobage(モバゲータウン)にて 団子一味の野望 mobile が OPEN
追記)
サービス終了しました。
遊んでくださった皆様ありがとうございました。
なんとびっくり、Mobage(モバゲータウン)にて 団子一味のゲームが遊べるようになりました！「団子一味の野望 mobile」という名称となります。
「団子一味の野望 mobile」は個人で頂いたお話の仕事となり、私は運営・開発共にほぼ関わっておりません。一部グラフィックスデータの提供とストーリーモードの台詞の監修を少々させていただいただけとなります。
内容は 「OH! DANGO! JAM」がベースとなり、そこにさまざまなソーシャル要素が加わって、携帯ゲームならではの楽しい仕組みがてんこ盛りとなっております。よろしければ是非一度お遊びください！
■ モバゲータウン上の URL(携帯からしかアクセスできません)
http://pf.mbga.jp/12001690
■ QRコード
※ モバゲーという事で無料でも遊べますが、課金アイテム等もありますゆえ、お子様に遊んでいただく場合はご注意ください。
※ 「団子一味の野望 mobile」については、「団子一味の野望 mobile」の制作会社へお問い合わせください。
※ PC 版 OH! DANGO! JAM のゲストキャラクター(熊猫男性・ビーンズ・猫剣士等)は、「団子一味の野望 mobile」には登場しないのでご了承ください。
[ FLASH ] [ GRAPHIC ] [ info ] [ update ] [ web service ] 2011年02月24日 19:31 | コメント (4) | トラックバック
ドット絵ベルトスクロールアクション3D その7
http://www.dango-itimi.com/blog/swf/112/
システム制作優先でグラフィックは現在あるものをほぼ使い回しています。
今回までの主な実装内容は以下のとおりです。
■ つかむ処理実装
相手の側に近寄ると相手をつかむ
つかんでから「斬る」キーで相手を斬る
三回まで斬る事が可能
■ つかみからの投げ
つかんだ後 マウスをプレイヤーから一定距離離してから「斬る」キーで相手を投げる
投げた相手に敵が触れると その敵は吹き飛ばされる
つかんだ後 「ジャンプ」キーでつかんだままジャンプ
つかみジャンプの後 つかみからの投げと同じ操作で相手を投げることが可能
---
【 キャラクター操作 】
[マウス] --- ポインタ方向へ移動
[スペース] --- ジャンプ
[F] --- 斬る
[A] --- 矢を放つ
[D] --- 防御(キーを押し続けると状態を一定時間持続)
【 特殊操作・仕様 】
・技によっては攻撃モーション途中で ジャンプ or 防御 に移行可
・防御成功時 斬るボタンを押すことにより無敵状態でカウンターアタック可能
・技によっては一度の攻撃で複数回ヒット
・相手の側に近寄ることでつかむ
つかみ状態から 攻撃・投げ・ジャンプ投げが可能
【 カメラ操作 】
[マウスドラッグ] --- 回転
[マウスドラッグ + Shift] --- 拡大縮小
[マウスホイール] --- 拡大縮小
[マウスドラッグ + Ctrl] --- 焦点位置変更
左手はホームポジションに添えるイメージで操作キーを割り振っています。
キー操作を有効にするためには一度画面をクリックする必要があります。
---
相手をつかんだ瞬間?ダメージを受けると、相手が空中に浮かんだままになってしまうバグあり
低空で投げると 相手のダメージ色が初期化されないバグあり
[ FLASH ] [ update ] 2011年01月04日 17:41 | コメント (0) | トラックバック
ドット絵ベルトスクロールアクション3D その6
http://www.dango-itimi.com/blog/swf/111/
今回までの主な実装内容は以下のとおりです。
■ 防御処理実装
相手の攻撃を受け止めることが可能
防御キーを押し続けると 防御モーションをしばらく持続
■ 防御成功時からカウンター処理実装
相手の攻撃を防御キーで受け止めた後 無敵状態でカウンターアタックが可能
暫定として
防御成功時 「斬る」キーを押した場合 「斬る 二段目」が発動するように設定
■ 攻撃モーションをキャンセルして 防御 or ジャンプ 処理に遷移する処理実装
暫定として以下の攻撃を防御遷移可能技に設定
・「斬る 一段目」と「矢を放つ」
暫定として以下の攻撃をジャンプ遷移可能技に設定
・「斬る 二段目」と「矢を放つ」
■ 多重ヒット攻撃設定可能に
暫定として以下の攻撃を 2回ヒットする技として設定
・タケノコ「斬る 一段目」
・カバの地上攻撃
---
【 キャラクター操作 】
[マウス] --- ポインタ方向へ移動
[スペース] --- ジャンプ
[F] --- 斬る
[A] --- 矢を放つ
[D] --- 防御(キーを押し続けると状態を一定時間持続)
【 特殊操作・仕様 】
・技によっては攻撃モーション途中で ジャンプ or 防御 に移行可
・防御成功時 斬るボタンを押すことにより無敵状態でカウンターアタック可能
・技によっては一度の攻撃で複数回ヒット
【 カメラ操作 】
[マウスドラッグ] --- 回転
[マウスドラッグ + Shift] --- 拡大縮小
[マウスホイール] --- 拡大縮小
[マウスドラッグ + Ctrl] --- 焦点位置変更
左手はホームポジションに添えるイメージで操作キーを割り振っています。
キー操作を有効にするためには一度画面をクリックする必要があります。
---
複数攻撃を一度に防御しようとするとエラーが発生して画面が停止するバグがあり、処理見直し中。
ノートPCで表示確認してみたところ、3D描画に負荷がかかってしまっているのか処理落ちがかなりある事がわかりました。3D背景は床と壁と木の柱があるだけにもかかわらず、これだけ処理落ちが起こってしまうとなると考えものです。
[ FLASH ] [ update ] 2010年12月25日 15:02 | コメント (0) | トラックバック
ドット絵ベルトスクロールアクション3D その5
http://www.dango-itimi.com/blog/swf/110/
今回までの主な実装内容は以下のとおりです。
■ 吹き飛ばし攻撃処理実装
暫定として以下の攻撃を吹き飛ばし攻撃に設定
・タケノコの「斬る」二段目
・カバの空中攻撃
■ 吹き飛ばされた場合ダウン状態へ遷移
・一定時間でダウン状態解除
・プレイヤーキャラクターの場合
一定時間経過の他 何かキーを押す事によりダウン状態解除
・ダウン状態でも攻撃を受ける
■ その他
吹き飛ばし処理実装に伴い 空中Y軸方向移動は自由落下するよう処理変更
---
【 キャラクター操作 】
[マウス] --- ポインタ方向へ移動
[スペース] --- ジャンプ
[F] --- 斬る
[A] --- 矢を放つ
【 カメラ操作 】
[マウスドラッグ] --- 回転
[マウスドラッグ + Shift] --- 拡大縮小
[マウスホイール] --- 拡大縮小
[マウスドラッグ + Ctrl] --- 焦点位置変更
左手はホームポジションに添えるイメージで操作キーを割り振っています。
キー操作を有効にするためには一度画面をクリックする必要があります。
[ FLASH ] [ update ] 2010年12月15日 10:45 | コメント (0) | トラックバック
ドット絵ベルトスクロールアクション3D その4
できているところまで一旦アップロード。
http://www.dango-itimi.com/blog/swf/109/
今回までの主な実装内容は以下のとおりです。
・空中ジャンプ処理追加
・飛び道具 表示範囲外で消去する処理追加
→ 画面内青線位置で飛び道具消去
・移動可能範囲制御処理追加
→ 床上のみ移動可能に
→ 移動可能範囲はメタセコイア上で設定
・ヒットストップ(攻撃がヒットした場合の画面描画微量停止)処理追加
・攻撃エフェクト表示処理追加
・ダメージ中の色変化処理追加
【 キャラクター操作 】
[マウス] --- ポインタ方向へ移動
[スペース] --- ジャンプ
[F] --- 斬る
[A] --- 矢を放つ
【 カメラ操作 】
[マウスドラッグ] --- 回転
[マウスドラッグ + Shift] --- 拡大縮小
[マウスホイール] --- 拡大縮小
[マウスドラッグ + Ctrl] --- 焦点位置変更
左手はホームポジションに添えるイメージで操作キーを割り振っています。
キー操作を有効にするためには一度画面をクリックする必要があります。
[ FLASH ] [ update ] 2010年12月08日 10:49 | コメント (2) | トラックバック
ドット絵ベルトスクロールアクション3D その3
まだまだハリボテ状態ですが 一旦アップロード。
3D描画・ゲーム用ライブラリ製作、大量のドット絵アニメーションオーサリング用 jsfl 作成、メタセコイアデータ表示 等々、じっくり足場を固めつつ当ゲーム製作に戻りました。
http://www.dango-itimi.com/blog/swf/108/
【 キャラクター操作 】
[マウス] --- ポインタ方向へ移動
[スペース] --- ジャンプ
[F] --- 斬る
[A] --- 矢を放つ
【 カメラ操作 】
[マウスドラッグ] --- 回転
[マウスドラッグ + Shift] --- 拡大縮小
[マウスホイール] --- 拡大縮小
[マウスドラッグ + Ctrl] --- 焦点位置変更
ひとまず左手はホームポジションに添えるイメージで操作キーを割り振っています。
キー操作を有効にするためには一度画面をクリックする必要があります。
[ FLASH ] [ update ] 2010年12月01日 16:07 | コメント (0) | トラックバック
メタセコイア → Flash その3 : 個々のオブジェクト操作
処理負荷軽減を考慮した 3D モデルの面分割数の削減 並びに、各オブジェクトを個々で操作しやすいような設定を行ないました。今回はタンスの扉と引き戸を開けたり閉めたりできるようにしています。
http://www.dango-itimi.com/blog/swf/107/mqo.swf
【 カメラ操作方法 】
[マウスドラッグ] --- 回転
[マウスドラッグ + Shift] --- 拡大縮小
[マウスホイール] --- 拡大縮小
[マウスドラッグ + Ctrl] --- 焦点位置変更
swf 画面内 各[OPEN/CLOSE]ボタンで、タンスの操作が可能です。
・メタセコイア上でのモデリング図
[ FLASH ] [ tips ] [ update ] 2010年10月22日 12:30 | コメント (0) | トラックバック
3D データへの 1px 縁取り
ここ最近 3D 表示関連の勉強をし始めた理由は、某ポケモン最新作のゲーム映像を見てからの事でした。ドット絵と 3D 表現の融合に、これは一度表現してみたい、と感じました。
現在までの 研究結果が以下の URL となります。
http://www.dango-itimi.com/blog/swf/106/mqo.swf
【 カメラ操作方法 】
[マウスドラッグ] --- 回転
[マウスドラッグ + Shift] --- 拡大縮小
[マウスホイール] --- 拡大縮小
[マウスドラッグ + Ctrl] --- 焦点位置変更
ビットマップ画像の重ねあわせの関係でカメラ回転角度には制限がかかっています。
表示はこれだけですが、かなり処理に負荷がかかりカメラ回転もややカクつきが発生してしまっています。PC のファンがうるさく鳴り出したらごめんなさい。
Zソート で面の表示順がおかしくならないようにするには、面を等間隔で細かく分割すればよい、と考えました。その結果、とても簡単なモデルなのに面数がとても多く処理負荷が高くなってしまっています。
もう少し単純な面で分割できるような形状にし、テクスチャで凹凸をごまかせば、面数が減り処理負荷も削減できそうです。
---
3D 表示において色々ネット上で調査をしておりましたら、今月に「Flash が 3D 対応する」といった旨の発表が「Adobe Max 2010」とやらで行われるようですね。これは Flash Player で Zバッファ を用いることができるようになるのですかなあ。なんとも期待したいところです。
[ FLASH ] [ tips ] [ update ] 2010年10月16日 17:05 | コメント (2) | トラックバック
ベクターデータへの 1px 縁取り
1px 縁取り処理を再作成。
ベクターデータをビットマップデータに変換(Bitmap.draw)し、変換後のビットマップデータ内グラフィックス形状の外周に アルファ値を含むピクセルが存在している場合でも、縁取りを見た目綺麗に行えるようにしました。
ドット絵に適用
ベクターデータに適用
メタセコイアから取り込んだ 3D モデルに適用してみると以下のようになります。
http://www.dango-itimi.com/blog/swf/105/mqo.swf
【 カメラ操作方法 】
[マウスドラッグ] --- 回転
[マウスドラッグ + Shift] --- 拡大縮小
[マウスドラッグ + Ctrl] --- 焦点位置変更
swf 内 左側の 3D モデルを元に、白く縁取り後 二倍表示を行なったものが右側の 3D モデルとなります。
カメラの角度のよっては 面と面との結合部がやや離れて表示されてしまう場合があり、その離れた隙間に対しても縁取りがされてしまいます。隙間を埋めるような面の形状にする等、工夫すればある程度は解決できそうです。
[ FLASH ] [ tips ] [ update ] 2010年10月09日 18:06 | コメント (0) | トラックバック
メタセコイア → Flash 2
必要と思われる機能の実装とバグをもろもろなくし、メタセコイアで製作した 3D モデルを Flash にて表示を行うライブラリ製作はほぼ完了しました。
今回試しに以下のようなモデルを作成しました。
Flash 上で表示すると以下のようになります。
http://www.dango-itimi.com/blog/swf/104/mqo1.swf
鏡面表示例
http://www.dango-itimi.com/blog/swf/104/mqo2.swf
【 カメラ操作方法 】
[マウスドラッグ] --- 回転
[マウスドラッグ + Shift] --- 拡大縮小
[マウスドラッグ + Ctrl] --- 焦点位置変更
マウスでカメラをくるくる操作してみると、角度によって一部面の描画順が変わる事があります。
どういう描画法を行なえば問題ないものになるのかを調べてみたところ、面作成方法を工夫すればある程度改善はできそうですが、Flash では完全な解決策はないとのこと。よって面の形状やカメラ角度等によって描画順が変わってしまうのは仕方無しとしました。
[ FLASH ] [ tips ] [ update ] 2010年09月29日 19:40 | コメント (8) | トラックバック
メタセコイア → Flash
以前から課題にしていた、メタセコイアで製作した 3D モデルを Flash にて表示を行うライブラリ製作にとりかかりました。
世には Papervision3D 用にメタセコイアファイルを読み込むライブラリが公開されており、どのような解析を行うのか等を参考にさせてもらいつつ進めています。
■ Papervision 3D 用 Metasequoia クラス
http://www.libspark.org/wiki/rch850/Metasequoia
http://www.libspark.org/svn/as3/Metasequoia/src/org/libspark/pv3d/Metasequoia.as
メタセコイアはシェアウェア版を用いて 3D モデルを製作することにしました。
シェアウェア版とはいえ、無料で利用可能な機能のみを用いています。
http://www.metaseq.net/metaseq/index.html
メタセコイアファイル(mqo)はテキストファイルで開くことが可能で、ファイル内は以下のファイルフォーマット通りになっています。
http://www.metaseq.net/metaseq/format.html
mqo ファイルは テキストファイルとして Flash から読み込むことが可能です。
mqo ファイル読み込み後はファイルフォーマットに従い、Material チャンクや Object チャンクといった内部の情報をそのままクラスファイルにし、その後、独自の 3D 表現ライブラリで使用できるように変換します。
3D 描画を行う際の難点として以下の(a)(b)がありました。
(a)メタセコイアのY軸とZ軸の向きが Flash の座標軸と逆
(b)メタセコイアと Flash とでは面表示規則(上面はどちらかの判定)が逆
ひとまずとして以下の対処で解決しました。
(aの対処)
Flash 上では 各頂点座標を X軸を中心として 180 度回転させる
(bの対処)
面にテクスチャを表示する際は TriangleCulling.NEGATIVE を用いて描画を行う
今回サンプルとしてメタセコイアで作成した簡単な 3D モデルのスクリーションショットが以下となります。
このメタセコイアファイルを Flash 上に読み込み表示を行ったものが以下となります。
http://www.dango-itimi.com/blog/swf/103/dpzl.swf
【 カメラ操作方法 】
[マウスドラッグ] --- 回転
[マウスドラッグ + Shift] --- 拡大縮小
[マウスドラッグ + Ctrl] --- 焦点位置変更
どの面が手前にくるかのソート処理はまだ組み込んでいないため、常に三角面体が手前に表示されます。
[ FLASH ] [ tips ] [ update ] 2010年09月26日 19:34 | コメント (0) | トラックバック
透視投影と平行投影の切り替え + ドット絵クォータービュー3D サンプルデモ
透視投影と平行投影の切り替えを行うサンプルを作成しました。クォータービューのドット絵を合わせ、その他もろもろの処理を加えたものが以下となります。
http://www.dango-itimi.com/blog/swf/102/
画面 UI 等適当で、キャラクターアニメーションも抜けがあります。
【 UI 説明 】
・投影方法選択
PROJECTION
├ PERSPECTIVE --- 透視投影
└ PARALLEL --- 平行投影
・カメラ選択
CAMERA CONTROL
├ AUTO --- 自動操作
├ MANUAL --- マニュアル操作
└ FIXED --- 固定
【 マニュアル選択時のカメラ操作方法 】
[マウスドラッグ] --- 回転
[マウスドラッグ + Shift] --- 拡大縮小
[マウスドラッグ + Ctrl] --- 焦点位置変更
[ FLASH ] [ GRAPHIC ] [ tips ] [ update ] 2010年09月25日 13:46 | コメント (0) | トラックバック
ドット絵ベルトスクロールアクション3D 2
もろもろ適当なベストスクロール処理実装。マウス方向にキャラクターが移動します。キャラクターはまだ奥の壁を突き抜けます。また、衝突判定確認用に立方体の表示を行っています。
http://www.dango-itimi.com/blog/swf/98/
【 3Dカメラ操作方法 】
・マウス
[マウスドラッグ] --- Y軸を軸にした回転
[マウスドラッグ + Shift] --- 拡大縮小
[マウスドラッグ + Ctrl] --- 焦点位置変更
軸回転は微量行われるようにしています。ゲーム中演出としてY軸の微量回転もありかな、といったところです。
[ FLASH ] [ update ] 2010年04月11日 17:32 | コメント (2) | トラックバック
OH! DANGO JAM が起動しなくなってしまった場合の対処
OH! DANGO JAM が起動しなくなってしまった、という報告を時たま受けていました。ネットワーク上に登録された おかしなデータの敵と戦うと、自分のデータもおかしいことになってしまい、起動しなくなってしまうというものです。
なので、データを一度リセットするためのツールを用意しました。
http://www.dango-itimi.com/jam/jamClear.html
大変申し訳ありませんが、上記ツールを用いてデータをリセットし、それでも宜しければ再び 1 から遊んでやってください。
敵の名前が「CPU」とつくものは戦っても安全な敵となっています。NaN と表示される敵と戦うと データが壊れてしまうという報告を受けていますのでご注意ください。
[ FLASH ] [ info ] [ update ] 2010年02月18日 02:14 | コメント (1) | トラックバック
ドット絵ベルトスクロールアクション3D
今まで作成してきたドット絵キャラクターが3D表現上にどのように映るか一度確認したかったため、適当な背景画像を作成し、簡単なサンプルを作成しました。
http://www.dango-itimi.com/blog/swf/97/
※要 最新の Flash Player 10
豆粒のように小さく表示される場合は Flash Player 10 が最新のものではありません
【 3Dカメラ操作方法 】
・キーボード
[W] --- 上移動
[S] --- 下移動
[A] --- 左移動
[D] --- 右移動
・マウス
[マウスドラッグ] --- Y軸を軸にした回転
[マウスドラッグ + Shift] --- 拡大縮小
[マウスドラッグ + Ctrl] --- 焦点位置変更
軸回転は微量行われるようにしています。
用意した背景画像はこちら
今度は 3D上の表示を確認しつつ描き込んで行く予定。
[ FLASH ] [ update ] 2010年02月17日 01:46 | コメント (3) | トラックバック
PNGEncoder フレーム分割処理版
Flex SDK の mx.graphics.codec.PNGEncoder クラスを改造し、負荷が高くなる箇所を分割して処理を行う PNGEncoder クラスを作成しました。
すでに分割処理を行う PNGEncoder を作成されている方はいますが、私が改造したものは 指定した数値分処理を行ったら中途でループを抜けるものとなっています。イベント発行などは行わず、処理が終了したら 取得対象となる ByteArray インスタンスを返却します。
http://www.dango-itimi.com/blog/swf/90/sample.zip
サンプルファイルの一部を抜粋/見やすく修正
private var main:Function;
private var pngEncoder:PNGEncoder;
...
public function Sample() {
...
pngEncoder = new PNGEncoder(
new TypeBitmapData32(bitmapData), //32bit PNG エンコード指定
bitmapData.width, bitmapData.height,
5000 //1フレーム内に実行するループ数を任意に設定
);
main = encode;
addEventListener(Event.ENTER_FRAME, run);
}
private function run(event:Event):void{
main();
}
private function encode():void{
var pngBytes:ByteArray = pngEncoder.run();
trace(pngEncoder.getProgress());
if(pngBytes) main = stop;
}
private function stop():void {}
PngEncoder.run メソッドを実行し、戻り値が null の場合はまだ処理が完了していません。ByteArray インスタンスが返却されると処理が完了したことを示します。PngEncoder.run メソッドを実行後 PngEncoder.getProgress メソッドを呼び出すことで現在の進行状況(0～100%)が確認できます。
mx.graphics.codec.PNGEncoder では、処理行数が多くなる for 文内で if 文があり、これはなくしたほうがよいのではと考え、コンストラクタの引数には あらかじめ一定の処理を行うためのインスタンスを渡すようにしました。しかし逆にこれでは処理が遅くなってしまうという場合はごめんなさい。
サンプルでは 32bit PNG エンコードを行いますが、アルファチャンネルなしの PNG エンコードを行いたい場合は、TypeBitmapData24 クラスのインスタンスを引数に指定します。
pngEncoder = new PNGEncoder( new TypeBitmapData24(bitmapData), bitmapData.width, bitmapData.height, 5000 );
コンストラクタの第四引数に何も数値を指定しない(デフォルト数値 0を指定した)場合は、分割処理は行われません。PNGEncoder.run メソッド一度の実行で ByteArray インスタンスを取得できます。
その他改造点としまして、Array を Vector に変更しています。Flash Player 9 対応にする場合は Vector 記述箇所を Array に戻す必要があります。
mx.graphics.codec.PNGEncoder 内にある Adobe の著作権表示箇所やその他コメントは、そのまま残しておいたほうがよいのか、記述を何か変えるべきなのか、削除したほうがいいのか、どのように扱えばいいか判断がつかなかったため、改造後のソースには何も書いていません。何か問題がありましたらご指摘願います。
■ Flex SDK mx.graphics.codec.PNGEncoder
http://opensource.adobe.com/svn/opensource/flex/sdk/trunk/frameworks/projects/framework/src/mx/graphics/codec/PNGEncoder.as
[ FLASH ] [ tips ] [ update ] 2009年12月10日 19:07 | コメント (0) | トラックバック
GridCutter
習作として GridCutter という画像加工出力を行う Web ツールを製作しました。
各ピクセルデータを拡大して等間隔に配置し 32bit の PNG で出力を行います。
以下簡単な操作手順です。
・FILE から加工元となる画像ファイルを PC 上から選択
・各ピクセルデータを 四角か丸か どちらの模様で表示するかを TYPE から選択
・zoom (倍率)、margin(間隔ピクセル数) に数値を入力
・出力される 画像サイズ W(横幅)と H(縦幅)を確認
・VIEW ボタンを押して画像トレース開始
→ 進行状況はツールバー最下部に表示
・画面に表示されたトレース画像で問題なければ SAVE ボタンで PC 上に保存
すべての処理はローカルPC上で行われます。「四角」あるいは「丸」の模様を配置するだけなので、画像加工処理自体は非常に簡単なものですが、何か機会がありましたらお気軽にご利用ください。
zoom あるいは margin のテキストフィールドそばにマウスカーソルがあると、各テキストフィールドに自動的にカーソルがあたり、ハイライトするようにしています。これにより、テキストフィールドをクリックすることなくキーボードから数値入力が可能となります。
しかし、以下の条件が合わさると、テキストフィールドの数値はハイライトされているのにキーボードから数値入力ができなくなる、という場合があります。
・ブラウザに Opera を用いている
・FILE または SAVE ボタン押下からファイル選択ダイアログ表示を行い
ファイル選択あるいはキャンセルからダイアログを閉じた直後の状態
上記条件の場合、ユーザは swf 画面を一度クリックしないと 数値入力ができません。
Opera のみフォーカスの動作が少々異なるのかもしれません。
[ FLASH ] [ update ] [ web service ] 2009年12月06日 13:57 | コメント (0) | トラックバック
BoxScroller
AS3 ライブラリ整理を一旦終了。ライブラリ内の一機能を用いたサンプルの紹介です。
まず、核となるスクロールバー機能があり、そのスクロールバー機能を用いて四角形の領域に縦方向と横方向にスクロールバー表示を行う BoxScroller というものを作成しました。
BoxScroller を用いることにより、ブラウザのデフォルト機能であるスクロールバー表示のような表現を行うことが可能となります。以下のサンプルを閲覧ください。表示には Flash Player 10 が必要です。
→ サンプル1(表示領域の外側にスクロールバーを表示する例)
→ サンプル2(表示領域の内側にスクロールバーを表示する例)
画面内に表示されるスクロールバーは Flash で実装しています。スクロールバー押下でのスクロール処理の他、マウスホイールによるスクロールや、各ページをドラッグ&ドロップすることでもスクロールする事が可能です。
画面右下の数値ボタンを押すことにより、表示されるページが変化します。ブラウザサイズを変更することにより、あるいはページを切り替える(PAGE1, PAGE2を切り替える)ことにより、スクロールバーの表示サイズや位置が適切に調整されます。また、ページの表示サイズに対しブラウザの表示サイズが大きい場合、スクロールバー表示は消去されます。
PAGE3 は BoxScroller を複数画面内に適用した例となります。BoxScroller が複数存在する場合、マウス位置により どの BoxScroller をマウス処理対象とするかの判定を行うかの機能を組みこんでいます。
[ FLASH ] [ tips ] [ update ] 2009年11月24日 11:11 | コメント (0) | トラックバック
Twice Me
■ Twice Me
http://www.dango-itimi.com/twiceme/
zoome で公開されている動画をアンチエイリアスなしで拡大して閲覧可能
個人用に製作。あれこれやってるので小さく宣伝。
最低限の機能のみ実装し UI グラフィックは適当です。
時間帯によっては API からまったく反応が返ってこないため使い物になりません。
[ FLASH ] [ info ] [ update ] [ web service ] 2009年08月31日 00:47 | トラックバック
絶賛放置中だった PICT PUZZLE を修正しました : ver1.03 へ
Flash Player 10 にすると動作しなくなってしまうという欠陥ゲーム PICT PUZZLE の修正を行いました。サイトに設置してくださっていたみなさま、何ヶ月も放置してしまいまことに申し訳ございませんでした・・・！
PICT PUZZLE 説明ページ
http://www.dango-itimi.com/download/pictpuzzle/
最新版ファイル一式 pict.zip ver1.03
http://www.dango-itimi.com/download/pictpuzzle/pict.zip
過去のバージョンから ver1.03 へバージョンアップを行うには、pict.zip 内の pict.swf のみを差し替えてください。
[ FLASH ] [ update ] 2009年07月29日 02:17 | コメント (0) | トラックバック
スクロールバーコンポーネント3 可変サイズのスクロール対象コンテンツ
スクロールバーコンポーネント2 動的なバーの長さ変化
スクロールバーコンポーネント 習作
SWFAddress を用いたサイト構築5 設定ファイルを扱う AIR 製作
ライブラリで用いる設定ファイルを扱うアプリケーションを Adobe AIR にて製作。
以下は自分用のメモ
サイト全体の設定ファイルとしてまず index.xml という XML ファイルを用意し、そこにサイト内で読み込む対象の設定項目を記述します。現在までの習作 の index.xml の内容は以下のようになっています。
この index.xml ファイルはデータ量が多くなるので直接 Flash からは読み込みません。コンテンツごとの複数の xml ファイルに分割し、各コンテンツ表示時に読み込むようにします。
ファイル分割を行なうには AIR を用います。index.xml を AIR で作成したアプリケーションで読み込み、index.xml の内容を解析し、定めたフォーマットに整形した後、コンテンツごとの xml ファイルを出力させます。
出力している xml ファイルは以下のとおりです。
page ボタンで表示されるコンテンツと etc ボタンで表示されるコンテンツ用の xml ファイルです。読み込む 画像やswf ファイル名、表示するテキスト情報が主となります。
また、当ライブラリでの核となる scene.xml ファイルも index.xml を元に AIR で生成します。
scene.xml には、各コンテンツシーンをいくつ生成する必要があるのかの情報が記述されます。scene.xml を元に全てのシーンインスタンスを生成し、id を割り振ったり、アドレスバーから指定された URL は存在するか、といったチェックを行なう事が可能となります。
今回作成した AIR アプリケーションのスクリーンショット
「選択」ボタンを押すことでファイル選択ダイアログが表示され、index.xml のディレクトリ位置指定が可能となります。
「書き出し実行」ボタンを押すことで、 index.xml を配置しているディレクトリを基準に scene.xml, page.xml, etc.xml が 指定のディレクトリに書き出されます。
xml 編集ソフトは XMLEditor.NET を用いています。
サイトの更新を行なう人は index.xml を編集し AIR にて xml ファイル書き出し処理を実行後、各更新ファイルをサーバにアップロードします。上記 xml 編集ソフトは Windows 用のものなので Mac の人は別途何かいい xml 編集ソフトを探す必要がありそうです。
[ FLASH ] [ tips ] [ update ] 2009年03月25日 11:02 | コメント (0) | トラックバック
SWFAddress を用いたサイト構築4 外部データ読み込み優先処理実装
自シーンでの外部データ読み込み中に 子孫シーンで外部データ読み込みが発生した場合、子孫シーンの読み込みが完了するまで 自シーンの読み込みを一旦停止し、子孫シーンの読み込み終了後、自シーンの読み込みを再開するための処理を実装しました。内容は以前のエントリーの通りです。子孫シーンとはしていますが、現在は子シーンのみの監視を行なうテストしか行なっておりません。
今回までの習作は以下の URL から確認できます。
http://www.dango-itimi.com/blog/swf/82/
page ボタンを押すと、サムネイル画像が複数読み込まれるページが表示されます。サムネイル画像を押下すると、大きな画像が画面下に読み込み表示されます。複数のサムネイル画像の読み込み途中で どれかサムネイル画像を押下すると、サムネイル画像の読み込みが一旦停止し、大きな画像を先に読み込んだ後、サムネイル画像の読み込みが再び開始されます。
その他実装内容として、ディレクトリの ID 表示に関して設定が可能となりました。以下はその仕様のルールとメモ。
[ FLASH ] [ tips ] [ update ] 2009年03月25日 03:45 | コメント (0) | トラックバック
AS3 での複数ファイル一括入出力操作は AIR で
Flash Player 10 から FileReference クラスによる ファイル入出力機能がサポートされたとのことで、簡易的な xml ファイル操作と xml 入出力アプリケーション製作をしてみようかと調査してみました。しかし FileReference クラスでは一括で複数のファイル出力を行なうといった事は無理なのですね。一度のユーザのボタン押下等のタイミングに対し、ひとつのファイル操作処理が可能、という仕様でした。
Flash でファイル入出力ができるようになったので、個人的な AIR の用途はますますなくなった、と思っていましたが見当違いでした。AS3 を用いて複数のファイル操作を行なうアプリケーションを作成するには AIR で、ということで。
[ FLASH ] [ update ] 2009年03月21日 14:40 | コメント (0) | トラックバック
SWFAddress を用いたサイト構築3 外部データ読み込みに関する考察
Flash で製作された以下のような構造になっているページがあるとします。
page, btn, window はどれもムービークリップです。
page ├ btn1 --> window1 ├ btn2 --> window2 ├ … └ btnN --> windowN
仕様は以下のようになっています。
・page 内に btn が複数(1～N)個ある ・各 btn を押すと 対応する window を開く ・各 window はブラウザで新規ウインドウで開くのではなく page 内の指定の位置(page前面、page右側等)にムービークリップとして表示する
更に外部データの扱いに関して以下のような仕様となっています。
・各 btn には外部から読み込んだ画像(サムネイル画像等)を表示 ・window 内に表示するデータは btn が押された後に外部から読み込む
今までの私の AS2 での作りでは btn の画像が全て読み込み終了するまで btn は押せず window は開かないようにする、といったものにしていました。しかし btn に読み込む画像が多ければ多いほど各 window を開くまでの時間がかかってしまいます。
読み込み中断処理可能な AS3 からは次の仕様を考えていくことに。
・各 btn に表示する画像が読み込まれなくても各 btn は押下可能に ・各 btn 押下後は 全 btn の読み込みは中断し 開く window 内で表示するデータを読み込む
ここでの考慮事項として、画像が表示されていない(読み込みが完了していない) btn は押せないようにしてほしい、という要望が挙がる場合もあるかもしれないので、画面遷移の仕様を決める段階でどうするか決めておいたほうがよさそうです。
更に次のような page 内処理で window の状態を監視する処理も考えていくことに。
・window 内のデータの読み込みが完了したら 中断していた page 内の各 btn の画像読み込みを再び開始する ・window が閉じられ再び btn 選択 page 画面が表示されたら 中断していた page 内の各 btn の画像読み込みを再び開始する
前者の方法ならば、window 内のデータを閲覧している間、バックグラウンドで全 btn のデータ読み込みを完了しておく、といったことが可能になります。
window から更に外部データを読み込む別ページを前面に表示する...といったいったものになってくると、後者のほうがいいかもしれません。
回線速度が上がっており、待機時間に関して考慮するのであるならば、まずは別の製作箇所優先 となっている今日ではありますが、よりよいテンポのいいページを製作するためにも、こういった工夫は随時行なっていけたらよいものです。
[ FLASH ] [ tips ] [ update ] 2009年03月16日 18:17 | コメント (0) | トラックバック
SWFAddress を用いたサイト構築 習作2
シーン外部 swf 対応と読み込み中断処理実装や、表示切替処理最適化などを行ないました。今回までの習作は以下の URL から確認できます。
http://www.dango-itimi.com/blog/swf/81/
画面一番右上のボタンが 外部 swf を読み込んで表示するとなっております。
[ FLASH ] [ tips ] [ update ] 2009年03月09日 18:32 | コメント (0) | トラックバック
SWFAddress を用いたサイト構築 習作
Progression で構築されたサイトが増える中、今後の Flash サイト製作ではディープリンク機能は欠かせないものになりそうです。というわけで、ディープリンク機能を実現するための SWFAddress を用いてのサイト構築を行なうためのライブラリを作成中。
SWFAddress を用いると、ユーザは URL 指定によりコンテンツ表示切替を行なう命令を いつでも行なうことが可能となります。これは、どのような表示状態からでも 指定した URL に対応するコンテンツ表示を行なうことができるシステム構築が必要になることを意味します。
どのような表示状態からでもコンテンツ表示切替が可能、とはいえ、矛盾が生じないためにある程度決め事が必要となります。現在作成中のシステムでは以下のような決め事を行ないました。
1)コンテンツA表示切替中に コンテンツBへの表示切替命令が行なわれた場合
コンテンツA表示切替が終了するまでコンテンツBへの表示切替は行なわれない
2)コンテンツA表示切替中に 他コンテンツへの表示切替命令が 複数 行なわれた場合
コンテンツA表示切替終了後は
最後にリクエストのあったコンテンツ表切り替え命令に対するコンテンツを表示する
画像やボタンや画面遷移がとっても適当な今回の習作はこちら
http://www.dango-itimi.com/blog/swf/80/
ブラウザの[戻る][進む]にも対応しています。
存在しない URL が指定された場合の対処はまだ行なっておらず、適当な URL をアドレスバーに入力すると 処理が停止し画面が止まります。
[ FLASH ] [ tips ] [ update ] 2009年03月01日 20:39 | コメント (0) | トラックバック
ローグライクマップ3D その2 マップスクロール
ローグライクマップ3D
AS2で作成していたローグライクマップ生成処理をAS3に移植し3D表示。
3Dカメラ機能も向上させ、マウスホイールがなくても拡大縮小・焦点位置の変更が可能になりました。
http://www.dango-itimi.com/blog/swf/78/automap3D.swf
※要 最新の Flash Player 10
豆粒のように小さく表示される場合は Flash Player 10 が最新のものではありません
【 操作方法 】
[マウスドラッグ] --- 回転
[マウスドラッグ + Shift] --- 拡大縮小
[マウスドラッグ + Ctrl] --- 焦点位置変更
[マウスホイール] --- 拡大縮小
[マウスホイール + Ctrl] --- 焦点位置変更
マップの一部を表示するようにしています。マップ移動はまだできません。
swf を表示するたびにマップ表示が切り替わります。ブラウザの再読み込みで swf の表示が更新されます。
表示画像が二種類しかなかったり等、見た目はまだまだいまいちです。
カメラをぐっと寄せれば、一人称視点の3Dダンジョン風ゲームも作れそうです。
[ FLASH ] [ update ] 2009年02月16日 00:41 | コメント (0) | トラックバック
Flash CS4 勉強6 3D空間上に2Dの絵表示2
ようやく3D空間上に2D絵を表示する際の表示サイズの取得方法がわかりました。いわゆる、3D空間上の とある一点の座標の表示サイズを求めるための方法です。一点の座標の表示サイズ、というのは変な話なのですかね。どのように求めればよいのかずっと悩んでいましたが、とても簡単な方法でできました…
今までの勉強内容のソースがまったくまとまっていないので、後日にまとめて記事にしたいところです。
http://www.dango-itimi.com/blog/swf/77/Test3D.swf
[ 操作方法 ]
・マウスドラッグ：回転
・マウスホイール操作：拡大縮小
・右クリック(Mac では Ctrl + クリック)でコンテキストメニューを表示
→マウスホイールによるカメラ操作方法の変更が可能
Y軸を軸とした回転の他に X軸での回転も可能とし、常にフィールド(地面)をスクリーンに向けたまま回転するようにしています。
マウスホイールが無い PC の事を考え、Shift + マウスドラッグ等で拡大縮小等を行えるようにする予定。
[ FLASH ] [ update ] 2009年01月12日 21:55 | コメント (4) | トラックバック
Flash CS4 勉強5 3D空間上に2Dの絵表示
http://www.dango-itimi.com/blog/swf/76/Test3D.swf
[ 操作方法 ]
・マウスドラッグ：回転
・マウスホイール操作：拡大縮小
・右クリック(Mac では Ctrl + クリック)でコンテキストメニューを表示
→マウスホイールによるカメラ操作方法の変更が可能
2Dドット絵の表示サイズ拡大縮小処理に不整合が起きないよう、Y軸のみを用いて回転させています。青い四角のワイヤーフレーム表示は当たり判定を行う領域です。試験的に表示しています。
ドット絵周囲に一ピクセルの黒い線と白い線を描き込んでいますが、線につぶれた感がでてあまり綺麗には見えないですね。足元に影表示を行えば、少し地面から浮いている感が薄れるかもしれません。
今回用意した二つのドット絵
[ FLASH ] [ GRAPHIC ] [ update ] 2009年01月11日 13:22 | コメント (0) | トラックバック
Flash CS4 勉強4 コンテキストメニューから焦点位置変更処理選択
マウスホイールで拡大縮小表示調節を行うだけではなく、スクリーンからの焦点位置？の変更を行えるようにしました。焦点位置を変更すると、3Dの奥行き感が変わります。
デフォルトではマウスホイールは3Dオブジェクトの拡大縮小を行いますが、右クリック(Mac では Ctrl + クリック)でコンテキストメニューを表示することで、マウスホイールの処理を変更することが可能です。
http://www.dango-itimi.com/blog/swf/75/Test3D.swf
※要 最新の Flash Player 10
豆粒のように小さく表示される場合は Flash Player 10 が最新のものではありません
[ 操作方法 ]
・マウスドラッグ：カメラ回転
・右クリック(Mac では Ctrl + クリック)でコンテキストメニューを表示
→マウスホイールによるカメラ操作方法の変更が可能
ブラウザ上にスクロールバーが表示されている場合、マウスホイールがブラウザのスクロールバーも同時に操作してしまうようなので swf 直リンクで表示させることにしました。
[ FLASH ] [ update ] 2009年01月04日 15:29 | コメント (0) | トラックバック
Flash CS4 勉強 3Dカメラマウス操作 + イージング
Flash CS4 勉強 3D和室
Flash CS4 勉強 3Dテクスチャ
ようやくできました、遠近法 + テクスチャ描画。いつかできるようになってやるんだ…！と意気込んでから長かった。
[ FLASH ] [ tips ] [ update ] 2008年12月27日 20:10 | コメント (0) | トラックバック
透視投影 再々勉強
業務に必要になりそうなので再度透視投影について勉強。最近丁度 Flashによる透視投影方法について詳しく解説してある記事があったので参考にさせてもらいました。
■てっく煮ブログ
AS3.0 で 3D プログラミングを１から勉強する (1)
AS3.0 で 3D プログラミングを１から勉強する (2) - 行列の導入
AS3.0 で 3D プログラミングを１から勉強する (3) - 透視投影
なんともシンプルな式と方法で透視投影ができてしまうようで、今まで私が知っていた方法はなんだったのと言わんとぞばかりです。
試しとして以前作成したローグライクマップ自動生成処理と組み合わせてみました。
[ FLASH ] [ tips ] [ update ] 2008年07月09日 10:31 | コメント (4) | トラックバック
トレジャーボインゴ11
会社の携帯端末 docomo SO905i の Flash Lite 3.0 にてトレジャーボインゴの動作確認を行ってみました。そして見事動作させることができました。
---
■Flash Lite 3.0 搭載 携帯用アドレス
・サンプル5 直アドレス
http://m.dango-itimi.com/trebo/test/5.swf
・携帯電話用 団子一味のアドレス
http://m.dango-itimi.com/
・QRコード
携帯端末での操作方法は、「2」「8」「4」「6」キーでキャラクター移動＆攻撃となっております。
携帯用のトレジャーボインゴは、フレーム分割処理というものを組み込んでいるため、マップ生成からステージ表示まで20秒くらい時間を必要とします。携帯版ではマップ生成中は「マップ生成中...」といった表示を行う予定です。
---
Flash Lite 3.0 が搭載されている docomo 905i シリーズのワークメモリは以下のページによると 一律 3072KB とのこと。
http://www.nttdocomo.co.jp/service/imode/make/content/spec/flash/index.html
Adobe Device Central CS3 のエミュレータ上では、トレジャーボインゴのワークメモリ使用数は 2400～2600KB 程度となっているので、携帯端末上でも問題なく動作してくれました。
現状わかっている問題点として、フロア切り替え後、階段をすぐさま下り次のフロアへ移動すると メモリ解放が上手く行われない、といったことがあるようです。使用メモリが上がったままになってしまい どんどん 3000KB に近づいいってしまう、という現象が起こってしまいます。
端末の性能がアップしていることからか、Flash Lite 2.0 が搭載されていた au よりも処理速度は早く動作しています。キャラクター等の移動速度は PC に比べると遅いですが、au よりは早く動作するようになりました。
docomo 905i シリーズから画面領域がいままでの倍となったので swf表示サイズを当初の予定通り倍にしています。ドット感が出ていい感じです。
■PC版はこちら
[ FLASH ] [ tips ] [ update ] 2008年01月14日 22:21 | コメント (0) | トラックバック
トレジャーボインゴ10
トレジャーボインゴ9 「FLERR: メモリ不足エラーです。」
「処理フレーム分割」を行った事により、ローグライクマップ自動生成処理を携帯端末で動作させることに成功しました。しかし、生成処理の処理行数が多いためかメモリを結構消費してしまい、ゲーム本体であるトレジャーボインゴのメイン処理を続けて実行すると「FLERR: メモリ不足エラーです。」というエラーが発生。
モバイルデバイスに適した Flash Lite アプリケーションメモリの管理
上記ヘルプページによると、メモリを解放するには使用していない変数に null を代入すればよいとのことなので、色々 null なり delete なり試してみましたが一向に解放される気配を見せてくれず。
Adobe Device Central CS3のエミュレータからメモリについて調べてみたところ、現状の au の FlashLite のヒープメモリ量では トレジャーボインゴを動作させることは困難かもしれません。後もう少しで動作する…！ というところでメモリが足りなくなってしまいます。vodafone は au よりもヒープメモリが高く設定されている(500KB程多い)ようで、動作するみたいです。
ローグライクマップ自動生成処理を AIR か何かで作成し、マップ情報をあらかじめたくさんの静的ファイルに書き出しておき、ゲーム実行時にそのファイルをランダムで読みに行く… といった対策が考えられますが、ローグライクマップ自動生成処理をAS3で作り直す気力は現在なし。
「処理フレーム分割」等、携帯用の対策を行っているだけで時間がかかり 先になかなか進めることができないため、しばらくは携帯で動作させる事はあきらめようと思います。当面は PC と Wii 用向けということで、今後 携帯端末の性能がもう少し上がってくれることを願います。
[ FLASH ] [ update ] 2007年11月18日 18:34 | コメント (0) | トラックバック
トレジャーボインゴ8 ポップアップテキストエフェクト
「OH! DANGO JAM」でも使用していた 数値や英字がポップアップして表示される テキスト表示処理をライブラリ化。トレジャーボインゴに用いる予定。
以前も作成したような気がしましたが、過去とコーディングスタイルが徐々に変わっており、現在のコーディングスタイルに合わせたものを作成し直しました。
[ FLASH ] [ update ] 2007年10月18日 20:53 | コメント (0) | トラックバック
トレジャーボインゴ7 マップ自動生成処理組み込み
トレジャーボインゴ6
トレジャーボインゴで使用するゲーム画像を作成中
【 タイトル画像とゲーム中の主な画面構成 】
【 イベントシーン 】
ややこった家などを表示。
複数マップチップをまたぐグラフィックの背景パーツを配置するのは何かと難しいので、左図の家はイベント中のみに表示されます。
【 自動生成マップ背景用ブロック配置イメージ 】
クォータービューなので、キャラクターが隠れない程度の高さがよさげです。
【 アイテム 】
ハート、金塊、剣、盾、階段
【 操作方法確認画面 】
見難いのでおそらく作り直します。
[ FLASH ] [ GRAPHIC ] [ update ] 2007年06月18日 20:47 | コメント (6) | トラックバック
トレジャーボインゴ5
敵AI処理はほぼ完成。斜め移動のないローグライク(不思議のダンジョン系)ゲームの敵の動きにしてみました。画面外の敵の移動処理は重たくなる＆大変そうなので行っておりません。
敵は白玉軍団が襲ってきます。敵の方向へキーを押すとそちらへ攻撃を行います。携帯端末用でテンポの良さを重視したいので、プレイヤーの周囲全部の敵がいっせいに攻撃をおこなってきます。
携帯端末での操作方法は、2846キーでキャラクター移動＆攻撃です。
■FlashLite2.0搭載 携帯用アドレス
・サンプル4 直アドレス
http://m.dango-itimi.com/trebo/test/4.swf
・携帯電話用 団子一味のアドレス
http://m.dango-itimi.com/
・QRコード
PC版はこちら
[ FLASH ] [ update ] 2007年03月04日 22:43 | コメント (0) | トラックバック
トレジャーボインゴ4
キャラクター移動処理追加。敵キャラクターが画面内に登場すると、プレイヤー方向へ移動してきます。携帯端末でのfpsは12出ているか出ていないか程度。おおむね負荷のかかる処理は実装したので、これ以上速度が遅くなることはないと思われます。
携帯端末での操作方法は、2846キーでキャラクター移動です。敵キャラクターはまだグラフィックを作っていないのでプレイヤーと色違いのキャラクターを配置しています。ひとまず三体ほど登場するようにしています。
■FlashLite2.0搭載 携帯用アドレス
・サンプル3 直アドレス
http://m.dango-itimi.com/trebo/test/3.swf
・携帯電話用 団子一味のアドレス
http://m.dango-itimi.com/
・QRコード
[ FLASH ] [ update ] 2007年02月04日 19:04 | コメント (0) | トラックバック
トレジャーボインゴ3
任意の位置に背景パーツで作成できるように設計。
今後は不思議のダンジョン系の自動マップ生成に挑戦する予定。
サンプルでは14x14のマップチップを並べ、周囲に木を生やし一つの部屋を作っています。2846キーで上下左右にマップ全体が移動します。キャラクターは背景パーツの一つとなっており現在は移動しません。
携帯端末で動作確認してみると、処理(描画?)速度は以前のサンプルより遅くなってしまっています。16～18fpsくらいで移動し、1マス移動する毎にマップチップ+背景パーツ表示切替が行われ、そこでガクッと一瞬止まります。
現在の速度は及第点といったところでしょうか。これ以上早くするのは難しいです。今後、キャラクター移動処理など組み込むので更に遅くなるかもしれません。
■FlashLite2.0搭載 携帯用アドレス
・サンプル2 直アドレス
http://m.dango-itimi.com/trebo/test/2.swf
・携帯電話用 団子一味のアドレス
http://m.dango-itimi.com/
・QRコード
[ FLASH ] [ update ] 2007年01月13日 01:25 | コメント (0) | トラックバック
トレジャーボインゴ2
上下左右でマップチップが移動するだけのサンプルを作成。
FlashLite2.0を搭載してある携帯端末からも閲覧が可能です。
http://m.dango-itimi.com/trebo/test/1.swf
上下左右矢印キー または 2846番号キー のどれかで移動します。
fpsは24に設定していますが、携帯端末上では体感 fps18～20程度です。これから更に色々な処理が加わるので、処理速度はもっと遅くなると思われます。現在のところ処理速度は合格点です。
マップチップが消えたり登場するところで、綺麗に消えるようにエフェクトをかけるものも作成してみましたが、見た目がいまいちなのでひとまずボツに。
携帯電話用 団子一味のアドレスはこちら
http://m.dango-itimi.com/
QRコード
[ FLASH ] [ update ] 2007年01月08日 16:35 | コメント (0) | トラックバック
トレジャーボインゴ1
FlashLite2.0で何かクォータービューで動作する簡単なサンプルゲームでも一本作成してみようかなとイメージ画面を作成。タイトルは「トレジャーボインゴ」。
WiiのFlashPlayerは7相当ということで、そちらも視野に入れたいところです。
今まで作成してきたクォータービューものとは異なる点は、主人公キャラクターを常に画面中心に位置させ、移動時は主人公ではなく背景マップを移動させるという点。
昔のドラクエ1のようなマップチップ単位で移動させるのではなく、フレーム毎にピクセル単位で移動させます。
携帯FlashLite2.0でまっとうな処理速度で動作すれば、携帯電話のFlashPlayerよりも性能がいいであろうWiiでも動くのではないかと考えております。まっとうな処理速度を出すために、1フレーム間での処理行数を減らす事を最優先に、深度変更処理や背景パーツ移動処理の最適化を図ります。
WiiのFlashPlayerではどれくらいのことができるのか、Wii自体を持ってないのでまだほとんど調べておりません。ニンテンドーDSLiteが現在でもまだ品薄状態ということなので、Wiiも当面買えそうもない予感がします。
Wii FlashPlayer 調査予定項目
・SharedObjectの使用の可否
・読み込み可能なswfの容量
・サウンド周り
[ FLASH ] [ GRAPHIC ] [ update ] 2007年01月07日 15:50 | コメント (0) | トラックバック
タケノコと牛殿様5 タメ攻撃
マウスボタンを押しっぱなしでパワーをため、一定時間ためると円のエフェクトがキャラの後ろに表示され、マウスボタンを放すとタメ攻撃が発動します。
マウスクリックによる各通常攻撃中にタメを行うことで、それぞれ対応するタメ攻撃を出すことが可能です。通常攻撃四段目中にはタメてもタメ攻撃は出せません(スライディングになります)。パワーをタメている間でも移動が可能です。
WiiのOperaでFlashが再生できるとのことで、クリックのみで遊ぶ事ができるように作っている「タケノコと牛殿様」もWiiで遊べたらいいなあ と思っております。しかしおそらくWii OperaのFlashPlayerは7だったりして無理なのでしょうなあ。
[ FLASH ] [ GRAPHIC ] [ update ] 2006年12月14日 19:10 | コメント (0) | トラックバック
タケノコと牛殿様4 基本攻撃2とエフェクト
任意のタイミングで攻撃が可能になりました。また クリックし続けるとパワーをためるエフェクトが発生します。ためて出すことのできる技はまだ出せません。その他、簡単なキャラクターの残像表示も行うようにしました。キャラクターの残像は見ていて目が回るかもしれないので後でなくすかもしれません。
今回までの内容で、中身がなんだかすっきりしない設計とソースコードになっていたので二回くらいシステムを構築し直しています。タスクシステムたるゲームシステム設計法があるとネットに情報があったので、独自似非タスクシステムで構築し直しました。
クリックし続けたときに足元から出る光のエフェクトは、前々からこういう表現はどうやるんだろうなあ、と思っておりましたが、Blendmode.ADD と GlowFilter, BlurFilter を用いれば簡単に実現が可能なのですね。もっとモリモリ研究したいです。
[ FLASH ] [ update ] 2006年11月26日 17:47 | コメント (5) | トラックバック
タケノコと牛殿様3 基本攻撃
タケノコと牛殿様2 キャラクター移動
タケノコと牛殿様
軸測投影3 ボックス
軸測投影2 テクスチャ
軸測投影
透視変換2 高さ
透視変換 再勉強
ピンボール作成8 スロット動作
ピンボール作成7 ドット背景組み込み
OH! DANGO! JAM アクセス過多により一時公開停止
ピンボール作成6 背景ドット化途中
ピンボール作成5 仮背景組み込み
ピンボール作成4 背景作成途中
ピンボール作成3 複雑な地形の仮背景組み込み
ピンボール作成2 ステージスクロール
ピンボール作成1 プロトタイプ
レーザー状に反射 鋭角～鈍角頂点での反射
ピンボールバーの処理 途中3
ピンボールバーの処理 途中2
ピンボールのバーの処理 途中1
OH! DANGO! JAM アップデート 2006/3/5
キャラクターのイエティを追加しました。ドーモ君っぽい。
昔のアクションRPGのゲームで背景に登場していたキャラクターです。スライム型団子スランゴをぷりんぷりん投げてきます。キャラが弱かったのでサンタの帽子をかぶせて取り繕いました。
そして！
遊画堂 りょうへいさんのキャラクター「猫剣士」が遂におだんごジャムに参戦！
団子達はその剣で竹串のごとく貫かれてしまうのか…！？
猫剣士の勇姿は是非ゲーム内でご確認ください。
どちらのキャラクターも準レアキャラなのでアイテムも比較的取りやすいキャラクターとなっております。
OH! DANGO! JAM
http://www.dango-itimi.com/jam/
[ FLASH ] [ GRAPHIC ] [ update ] 2006年03月05日 13:28 | トラックバック
OH! DANGO! JAM アップデート 2006/2/26
レアキャラクター オバケボーイを追加しました。
男の子の帽子がとれたバージョンです。技はどれもかっこいいものにしました。その他のグラフィックはゲーム内でご確認ください。必殺技は団子ロボを召喚します。
おならプーたんと同じくらいの強さに設定しましたので、比較的倒しやすいのではないかと思います。
OH! DANGO! JAM
http://www.dango-itimi.com/jam/
[ FLASH ] [ GRAPHIC ] [ update ] 2006年02月26日 19:28 | コメント (7) | トラックバック
OH! DANGO! JAM アップデート
レアキャラのカバ天使を追加しました。他の画像はゲーム内にてご確認ください。
カバが多くてごめんなさい。描くのが楽なのです！
OH! DANGO! JAM
http://www.dango-itimi.com/jam/
[ FLASH ] [ GRAPHIC ] [ update ] 2006年02月18日 22:12 | コメント (2) | トラックバック
ついに完成！ OH! DANGO! JAM
長らく作っていたJamGameがついに完成。
「OH! DANGO! JAM」というタイトルになります。
URLはこちらです。Flashギャラリーにそのうちリンクを貼ります。
http://www.dango-itimi.com/jam/
まだ大規模なテストは行っていないため、不具合が発生する場合があります。当面ベータ版ということでお願いします。致命的なバグが発生した場合、プレイデータを消去させていただく場合があります故、ご了承ください。
それと、完成とはしましたが引き続きキャラクターを何体か追加していく予定です。
未公開だったゲーム画面のスクリーンショット。モザイクは自主規制。
キャラクターの中には派手な必殺技を使用するレアキャラクターがおります。そのレアキャラクターの変身アイテム取得に是非挑戦してみてください。
製作・テストプレーにご協力いただいた方々へ、今まで長い間お付き合いいただきありがとうございました。
Special Thanks
拓さん
HACCANさん
りょうへいさん
竹さん
[ FLASH ] [ GRAPHIC ] [ update ] 2006年02月12日 15:56 | コメント (37) | トラックバック
JamGame(仮題)作成中14
JamGame(仮題)作成中13
ゲームで使用するキノッパの画像。必殺技はＢダッシュ。仲間の犬の名前はトリュフといいます。
某所で書いたキノッパの簡単なキャラ設定を引用。
>・頭のお皿にキノコが生えてしまったが手が短くて取ることが出来ず
>・お皿に水をかけるとキノコが生長してしまうというジレンマが発生する
>・上記理由によりいつも不機嫌そうにゲーゲー鳴いている
目標にしていた通常キャラグラフィックがそろいましたので、この後は某所でJamGameのクローズドベータテストを行います。テスト中にレアキャラを二体ほど作成し完成です。
[ FLASH ] [ GRAPHIC ] [ update ] 2006年02月02日 19:30 | コメント (0) | トラックバック
JamGame(仮題)作成中12
JamGame(仮題)作成中11
JamGame(仮題)作成中10
JamGame(仮題)作成中9
山に篭りオープニングムービーを完成。
あまりこったものにする予定はなかったのですが、イメージが膨らみ結構手間と時間をかけてしまいました。新たにオープニング用の曲を作成したのでゲーム内で流れる音楽は三曲に。
只今の全体的な進捗具合は85%程でしょうか。年内の完成は無理そうなので、クリスマスあたりにオープニングだけでも公開しようと思います。
この作品は団子一味のサイトを始めてから今の今までの私の技術の集大成ともいえるものになっております。特に目新しいシステムであるわけでもなく、以前作ったゲームやムービーの似たりよったりな作品になってしまっているかもしれません。
しかし、今まで積み上げてきたゲーム製作やネットワーク処理の技術・ドット絵アニメーションのノウハウ等がこめられており、今までにはない高品質なものに仕上がっていると思います。
完成した暁には是非一度遊んでみてやってください～
[ FLASH ] [ GRAPHIC ] [ update ] 2005年12月12日 02:19 | コメント (2) | トラックバック
JamGame(仮題)作成中8
JamGame(仮題)作成中7
JamGame(仮題)作成中6
JamGame(仮題)作成中5
JamGame(仮題)作成中4
SHOP画面。売値の倍率が0.25秒おきに変化し、タイミングよく売りたいアイテムを選択することにより0.1～5倍の値段でアイテムが売ることが可能です。
JamGameのシステム面は95%完成。かなりたくさんのクラス数になっております。ちょっと作る画面が多すぎましたね。全体の進捗度は75%程。
[ Classファイル一覧 ]
これよりゲームに使用するキャラクターグラフィック作成に入るので、今後しばらくX-LABOはドット絵ギャラリーへと遷移します。
[ FLASH ] [ GRAPHIC ] [ update ] 2005年11月21日 19:33 | コメント (0) | トラックバック
BitmapDataクラス習作1
JamGame(仮題)作成中3
JamGame(仮題)作成中2
JamGame(仮題)作成中1
一年半年ほど前から極秘裏に作成しておりましたゲームがありました。
しかし途中何度も間が空いてしまい、内部システムも古くなってしまったので現在再構築作業中です。
腕は一年半年前より遥かにアップしたので、ガリガリ順調に進んでいます。
完成できるまであまり表に出さないようにするので、ちょいくらblogの書き込みが減るかもしれませんがご了承ください。
[ FLASH ] [ update ] 2005年08月26日 01:05 | コメント (0) | トラックバック
PICTPUZZLE ver1.02
PICTPUZZLEのバージョンアップを行いました。
ランキングが20位まで表示されるようになります。その他、細かい修正を行いました。
ver1.02よりも過去のバージョンをお使いの方は以下の手順でバージョンアップを行ってください。
【 ランキングCGIを用いていない方 】
(1)pict.zip ver1.02をダウンロード
(2)pict.zipを解凍
(3)解凍されたpictフォルダ内のpict.swfを、サーバにアップしてあるpict.swfに上書きアップロードする
【 ランキングCGIを用いている方 】
(1)サーバにアップロードしてあるcgi/dat/rank.datを自分のＰＣへダウンロード
(2)pict.zip ver1.02をダウンロード
(3)pict.zipを解凍
(4)解凍されたpictフォルダ内の cgi/dat/rank.datをメモ帳で開く
(5)メモ帳で開いたrank.datの一行目から五行目までの内容を、1でダウンロードしたrank.datの一行目から五行目までの内容に書き換える
(6)書き換えたrank.datを、サーバにアップロードしてあるrank.datファイルに上書きアップロードする
(7)解凍されたpictフォルダ内のpict.swfを、サーバにアップしてあるpict.swfに上書きアップロードする
不明な点がありましたら、こちらのエントリーにコメント、またはメールをください。
[ FLASH ] [ update ] 2005年08月14日 18:36 | コメント (0) | トラックバック
PICTPUZZLE ダウンロードページ
左MENUに「DL(DOWNLOAD)」の項目を設けました。そこからPICTPUZZLEをダウンロードすることが可能です。
気に入ってくださった方はよろしかったら使用してみてください。背景画像・ブロック画像・音楽等 自由にカスタマイズ可能です。
他に、以前より処理を見直し 少しくっつく感じでブロックが出現するようになりました。ハイスピードになるまで遊べるようになったと思います。
また、何かゲーム内でヘンテコな不具合など見つかりましたらご報告ください。
Ｃさん、拓さん 設置確認にお付き合いいただき大変ありがとうございました！
[ FLASH ] [ update ] 2005年08月05日 19:14 | コメント (0) | トラックバック
遅延処理追加
サイト微更新。
団子一味のTOPページ等最初に開いた時、MENU部分のFlashとTOPページのはてなBookmarkのFlash、AmazonWebService表示用のFlash三つの表示処理がバッティングして MENUのFlashがガタガタな表示になってしまっていました。
そこで、はてなBookmark用のFlashの表示処理を3秒後に、Amazon広告用のFlashの表示処理を5秒後に故意に遅延させて実行させることにより表示がガタガタになる問題を多少ですが解決できたと思います。
private var sID:Number;
//1000ミリ秒(一秒)後にメソッドfuncを実行
public function main():Void{
this.sID = setInterval(
function(sc){ clearInterval(sc.sID); sc.func(); }, 1000, this );
}
private function func():Void{
trace( "実行" );
}
それと、最近AmazonWebServieceからカスタマーレビューが取得できなくなってしまっていましたが、正常に取得できるように戻ったようです。リスがまたしゃべれるようになりました。
[ FLASH ] [ update ] 2005年08月03日 01:33 | コメント (0) | トラックバック
テーブルの上のメッセージ システム変更
MENUのROOMのテーブルをチェックすると書き込みができるメッセージボードですが、少し内部システムを変更しました。
今まで自作cgiにて書き込みシステムを作成していましたが、作りが甘いため どんな書き込みがあるのか いちいちMENUから確認しにいかなくてはなりませんでした。
このcgi部分をお絵描き掲示板のbbsnote.cgiに丸々変更し、RSSにて書き込み状況を監視できるようにしました。これでセキュリティ対処はばっちり行えます。
少し以前の書き込みは消えてしまいましたが、よろしければまたお気軽にお書き下さい～
[ FLASH ] [ update ] 2005年08月02日 20:13 | コメント (0) | トラックバック
PICTPUZZLE作成中6
PICTPUZZLE作成中5
PICTPUZZLE作成中4
PICTPUZZLE作成中3
PICTPUZZLE作成中2
ドキドキポカン作成中3
ドキドキポカン作成中2
ドッキンバクバクアドベンチャー(仮題)作成中
さすらいのマウスクリッカー
その昔 大学のインターネットを利用した授業にて暇だった時 決まって遊んでいたブラウザゲーム「さすらいのマウスクリッカー」。JavaAppletで作成されいましたオチゲーで、中毒性はかなりのものでした。
最近仕事でオチゲーを作成する機会があり、昔に帰ってまた遊んでみようとネットでさがしてみたのですが、どうやらサイトが消滅してしまっているようで 今どこにあるのか見失ってしまう状態に。
遊びたくて仕方がなかった私は記憶を頼りにFlashにて似た感じのゲームを作成しました。今後は更にアレンジを加え独自のゲームにします。
というわけで よろしかったら是非お試し下さい～ ↓
[ FLASH ] [ update ] 2005年06月25日 23:20 | コメント (1) | トラックバック
Flash 3Dもの作成中3
Flash 3Dもの作成中2
Flash 3Dもの作成中1
最近の気になった記事表示
TOPページ更新にあわせ 最近の気になった記事を5件表示するようにしました。記事にカーソルを合わせると私のその記事に対してのコメントが表示されます。コメントは別の場所に表示したほうが見やすいかもしれないですね…
この記事は、はてなブックマークの機能を利用させてもらっています。
始めはperlでRSSを読み込ませiframeを用いて表示させようと考えました。しかし読み込みがとても遅く、その読み込んでいる間 nowloading のような表示をさせたかったのですが上手い方法を見つけることが出来ず断念しました。perlというのは処理が最後まで全部終わらないと対象ページが表示されないのでしたっけ。結局Flashにて作成することに。XMLConnectorとDataSetのコンボの簡易作成です。はてなブックマークのRSSはPHP経由で読み込ませています。
[ FLASH ] [ update ] 2005年06月05日 01:23 | コメント (0) | トラックバック
WebServiceConnectorを用いてのAmazonWebService(AWS)の利用
TOPページにAmazonの広告を設置しました。マニアックな品物を紹介していく予定ですので、気が向きましたら私めのレビューでもご覧下さい。(まだ数点しか紹介しておりません。)TOPページのほか、Blogの個別記事等にも順次設置していく予定です。
リスレビューは最近作成していました人工無能の機能の一部を用い、AWSから引っ張ってきたデータを元に作成しています。またAmazonの商品画像データは外部サーバにあるためFlashから直接読み込むことが不可能なので、PHP経由で読み込ませています。
FlashMX2004ProのコンポーネントWebServiceConnectorを用いると簡単にAWSへ接続が可能です。
参考サイト
こちら側では紹介したい商品のASIN(商品番号)とその商品に対するレビューをExcel等で一覧にまとめておくだけで、他の必要なデータは全部AWSから自動で取得できます。Excelにまとめたデータはこのツールを用いてXMLに書き出しFlashで読み込ませています。
WebServiceConnectorから接続しているのはAWS3.0です。AWS4.0(Amazon-ECS)へはWebServiceConnectorから接続しようとしても、何故か繋ぐことが出来ないようです。但し、以前はAWS4.0へ接続しようとしただけでFlashアプリケーションごと強制終了をくらってしまっていたのですが、最近また試してみましたら 強制終了することはなくなったようです。ということは、問題があるのはAWS4.0側なのですかな…？
エラー時の処理をまだ組み込んでいないので、動作が怪しくなる場合があります。チカチカ変な動作をしてしまうので、その時はごめんなさい。
[ FLASH ] [ tips ] [ update ] 2005年06月04日 16:28 | コメント (0) | トラックバック
ROOM SITE INFOページ作成完了
男の子の部屋を出た部屋にてSITE INFOページへ飛べるようになりました。団子一味の歴史が今あばかれる…！
昔の事を思い出して羅列させたのですが、曖昧な部分もあり少しいいかげん。管理人白玉の箇所には、後でもっと何かしっかり書こうと思います。
また、MENUのINFOをTOPに変更。次はTOPページを少し作り直します。
しっかりとしたイラストを描こうと思っているのですが どんな絵にしますかなあ。
[ FLASH ] [ update ] 2005年06月03日 23:30 | コメント (0) | トラックバック
ROOM SITE INFO作成中
ドット絵 リス
ROOM ベランダ
人工無能RSSリーダー2
人工無能RSSリーダー１
FlashとImageMagickの連携5 (FIN)
ブロック崩しタイトル画面作成中
ブロック崩し画面イメージ
ROOM Flash ミニムービー改良
ノート部分のミニムービーにエフェクトを追加しました。皆さん素敵なメッセージありがとうございます。
(5月4日13時)只今調整中に付きメッセージが見れません。
(追記)調整終了
名前・メッセージを入力せずに間違えて送信ボタンを押してしまった場合の対処をとりました。
UTF-8の他にUTF-8Nというものがあることを今回の修正にて知る。ローカルマシンのWindowsでは動作する自作cgiをUTF-8で保存してサーバにアップしてみたら何故か500エラーが発生してしまい どういうこったと調べておりましたら、UTF-8Nで保存すればいいような事が書いてありましたので早速UTF-8Nに保存して修正完了。文字コードの問題は難しいですなあ。
UTF-8のページの作り方
(追記2)
IEからみたらメッセージ書き込み部分が文字化けしていました… なので化けないよう修正しました。
[ FLASH ] [ GRAPHIC ] [ update ] 2005年05月04日 00:43 | コメント (0) | トラックバック
FlashとImageMagickの連携2
FlashとImageMagickの連携1の続きです。
1で作成したFlashにゴリゴリ処理を加え ブロック崩しゲームを作成しました。
[ FLASH ] [ update ] 2005年05月03日 22:08 | コメント (0) | トラックバック
ROOM Flash ミニムービー作成
ROOM Flashにてミニムービーが一つ見れるようになりました。男の子の部屋を出た所のテーブルの上のノートをCHECKしてみてください。曲にあわせてリスと白玉がリズムを取るだけの簡単なミニムービーです。(製作日数 約4日/グラフィック1.5日・プログラミング1日・曲2日)
メッセージボード表示機能を備えていますので、マナーを守って どなたでもお気軽に何か書き込みください～
(追記)
読み込み中にBACKを押して再びノートをチェックすると、テキスト表示がだぶってしまうというバグがあるようです。原因を調査し後に修正します。
(追記2)
修正完了しました。
[ FLASH ] [ update ] 2005年05月01日 16:31 | コメント (3) | トラックバック
FlashとImageMagickの連携1
ROOM Flashの組み込み
ようやくバグも取れ、ROOM用のFlashを左MENUに組み込みました。
昔作った「カバゴンクエスト」「わたしのおむすびおひとついかが」「団子談話室（チャット）」が遊べます。三つ目の部屋での階段はまだ上ることが出来ません。きちんと検証していないので、ゲームswf呼び出し周りにバグがあるかもしれません。それと、カバゴンクエストとおむすびゲームの記録ですが、swfを配置しているディレクトリ構造を変えていないのでまだ残っていると思うのですが、きれいさっぱり記録がなくなってしまっていたらまこと申し訳ないです…すみません、すみません。
(追記)
細かい部分で気になるところがいくつかありますが、大きなバグは修正できましたので後は少しずつ直していきます。ゲームデータ復帰を試みましたができませんでした… 大変申し訳ありません。
(現在までに気付いたバグ)
・チャット選択後、ROOMに戻るとクリックしていないのにキャラクターが動作してしまう
・OS内のゲーム詳細表示ウインドウが真っ白になる時がある
・OS内のゲーム終了後、OS画面上でキー操作を受け付けなくなる
・BLOG,P-BBS表示中にも後ろで男の子が動けてしまう
[ FLASH ] [ update ] 2005年04月24日 19:53 | コメント (6) | トラックバック
ROOM Flash作成中2
FlashとImageMagickとの連携によるブロック崩し作成がようやく完了です。ROOMのベッドを早速チェック！
