強火で進め

このブログではプログラム関連の記事を中心に書いてます。

enchant.js

enchant.js で BMFont で作ったビットマップフォントを使えるようにするプラグイン「bmfont.enchant.js」を使ってみた

enchant.js で BMFont(Bitmap Font Generator) で作ったビットマップフォントを使えるようにする「bmfont.enchant.js」というプラグインがリリースされたので使ってみました。自分が以前に作った(カスタムフォントを描画する描画するライブラリ)は等幅フォン…

enchant.jsのレシピ本「enchant.js開発のレシピ―115個のレシピで学ぶPC&スマホゲーム開発の極意 」

enchant.js開発のレシピ作者: phi出版社/メーカー: 秀和システム発売日: 2012/08/23メディア: 単行本 クリック: 155回この商品を含むブログ (5件) を見るこういう機能ってどうやって実装するんだろ?という質問に答えてくれるレシピ本となります。筆者はブロ…

「leapfest 2012」でLTをして来ました

「leapfest 2012」でLTをして来ました。内容はenchat.jsとUnityの比較。 leapfest 2012 | PeaTiX http://peatix.com/event/2823 LTの内容 あまり、 vs と付けるのは好きじゃないけど丁度いいのが思いつかなかったので vs と付けました。どっちも良いライブラ…

enchant.js で10分でゲームを作る動画

10分間で出来るものなんですね。生産性高いなぁ。2Dシューティングを制作。 gl.enchant.js を使って3Dシューティングを制作。 @phi_jp さんの記事。 gl.enchant.js を使って 10 分で 3D ゲームプログラミングしてみた. んで, その様子をビデオキャプチャーし…

初のenchant.js本「HTML5とJavaScriptでスマートフォンゲーム作成! ゼロからはじめるenchant.js入門」

執筆陣はいつも分り易い技術本を書かれる布留川英一さん、そして開発者の方々の様ですし、分り易い&しっかりした内容が期待出来そうです。HTML5とJavaScriptでスマートフォンゲーム作成! ゼロからはじめるenchant.js入門【公式ガイド】作者: 布留川英一,伏…

gl.enchant.js で2Dキャラの表示をしてみた

Planeオブジェクト(法線の調整などは必要でした)で2Dキャラを表示してみました。 こちらで試せます。こちらのソースコードはご自由にお使い下さい。

gl.enchant.js のサンプルをGALAXY TabのFirefoxで動かしてみた

gl.enchant.js のサンプル(つまりWebGLのプログラム)をGALAXY Tab 10.1 LTE SC-01DにインストールしたFirefoxで実行してみました。因みに、標準のブラウザはまだWebGLに対応していませんでした。 関連情報 enchant.jsのWebGLライブラリ gl.enchant.js のβ版…

gl.enchant.js で初音ミク(はちゅね)を表示してみた

「まずはこれだろう」という事で初音ミク(はちゅね)を表示してみました。ドロイド君がテクスチャ無しのモデルデータだったのでちょっと不安でしたがテクスチャもちゃんと読み込むみたいです。こちらで試せます。今回のサンプルではこちらのサイトで提供され…

enchant.jsのWebGLライブラリ gl.enchant.js のβ版がリリース

enchant.jsのWebGLライブラリ gl.enchant.jsの β版リリースされました。もちろん、WebGLに対応したブラウザでしか動作しないので注意して下さい。こちらで直ぐに試せます。 9leap : gl.enchant.js β版 by enchant_js - どこでも遊べる、投稿型ゲームサイト h…

放物線状に物を投げる方法

今回のサンプル サンプルの全ファイルカーソルキーの左右で飛ばす角度を変更出来ます。こちらで紹介されているマリオのジャンプの方法を実装。 マリオのジャンプ実装法とVerlet積分 - Gemmaの日記 http://d.hatena.ne.jp/Gemma/20080517/1211010942 関連情報…

往復移動処理(キャラクターの画像反転)

今回のサンプル サンプルの全ファイル主なプログラムはこちら。 bear.ax = 5; bear.addEventListener('enterframe', function(e) { this.x += this.ax; if (this.x < 0) { this.x = -this.x; this.ax *= -1; this.scaleX *= -1; } var rightEnd = game.width…

文字列(テキスト)描画のプラグインに文字列変更対応版のクラスを追加

今回のサンプル サンプルの全ファイル ※この文字列描画のプラグインはご自身のゲームご自由に使って貰ってOKです。是非、ゲーム作りにお役立て下さい。以前作成した文字列(テキスト)描画のプラグイン、昨日の「enchant.js ソースコード・リーディング」にて…

9leapの投稿開始。スコア登録機能のプラグインも追加

9leapの投稿開始されました。合わせて nineleap.enchant.js というスコア登録のプラグインも公開されました。これを使うと9leapのサイトに投稿したアプリはスコア登録を行える様になります。ファイルをリンクしてゲーム終了時にこの様な記述を行うだけで登録…

「enchant.js ソースコード・リーディング」に参加してきた

本日、「enchant.js ソースコード・リーディング」に参加してきました。 enchant.js ソースコード・リーディング - [PARTAKE] http://partake.in/events/5292ece7-8886-4429-8e6b-947590164168 最初に行われたのは主催者の @hakobera さんによる enchant.js …

githubの最新バージョンに素材データ追加

enchant.js、最初にzipで配布されたものにはマップチップやキャラクター、アイコンなどの画像素材が同梱されていたのですがgithubで更新されているものにはこちらのデータが有りませんでした。サンプルで使われている画像データを使うという手は有りましたが…

フォント画像での文字列(テキスト)描画のプラグインを作った

今回のサンプル サンプルの全ファイル(追記 2011/05/03) 新しいバージョンをリリースしました。 文字列(テキスト)描画のプラグインに文字列変更対応版のクラスを追加 - 強火で進め http://d.hatena.ne.jp/nakamura001/20110502/1304348628 (追記 2011/05/01)…

付属のバーチャルパッドのプラグインが8方向入力に対応

今回のサンプル サンプルの全ファイル最新版の enchant.js では標準で付属しているバーチャルパッド以前の上下左右のいずれかしか取得出来ない仕様から斜め入力も取得出来る様にバージョンアップし、8方向入力に対応していました。しかも、以前の様に game.j…

4Gamer.netの「enchant.js」によるゲーム制作入門記事が良い

enchant.js について一通り解説されている良記事。これを読めば基本部分はマスター出来るのでは無いでしょうか。 4Gamer.net ― 「enchant.js」でゲームを作ろう! HTML5とJavaScriptによるアクションゲーム制作入門(ミドルウェア/開発ツール) http://www.4…

enchant.js向けの全方向入力可能なバーチャルパッド

今回のサンプル1 今回のサンプル2 サンプルの全ファイル enchant.js に付属しているサンプルのRPGではバーチャルパッドを使っていますがこのバーチャルパッドは上下左右のいずれかの一方向にしか入力出来ません。以前書いた車のサンプルではスマートフォンで…

IDEA*IDEAさんの「RPG編その4」の部分の解説補足(その2)

前回の続き。max()の方の解説。元はこれですが x = Math.max(game.width, x + map.width) - map.width;ちょっと分りづらいのでmax()の2つの引数に - map.width を行い以下に変更。 x = Math.max(game.width - map.width, x);1つ目の引数で注目すべきは - map…

IDEA*IDEAさんの「RPG編その4」の部分の解説補足(その1)

enchant.jsのサンプルコードを解読する(RPG編その4) | IDEA*IDEA http://www.ideaxidea.com/archives/2011/04/rpg_4.html IDEA*IDEAさんの「RPG編その4」読みました。自分もmin()、max()使うよりかはif文でやっちゃうかなぁ?と思いました。でもまぁ、min(…

IDEA*IDEAさんでenchant.jsのRPGのサンプルの解説

IDEA*IDEAさんで enchant.js に付属しているRPGのサンプルについて解説されています。丁寧に画像入りで解説されており、お勧めです。 enchant.jsのサンプルコードを解読する(RPG編その1) | IDEA*IDEA http://www.ideaxidea.com/archives/2011/04/enchant_r…

車の移動処理

今回のサンプル1 今回のサンプル2 サンプルの全ファイル車の移動処理。車特有の前進やバックをしている時のみハンドルを切る効果が有る(進行方向の変更を受け付ける)様に実装。サンプル1 プログラムの主な部分はこちら。 car.deg = -90; car.addX = 0; car.a…

キャラクターの追加時に一瞬、(0, 0)の位置に表示される不具合が修正

今回のサンプル サンプルの全ファイル 昨日のエントリーで紹介したタイミングによっては一瞬、(0, 0)の位置に表示される不具合ですが修正された様です。 キャラクターの追加方法 - 強火で進め http://d.hatena.ne.jp/nakamura001/20110422/1303491804 早速、…

レイヤーの前後関係を考慮したキャラクター追加方法

今回のサンプル サンプルの全ファイル 例えば画面の奥から「背景」「キャラクター」「手前に描画する画像」という並び(レイヤー)にしたい場合、最初にこれらをまとめてゲーム開始前に追加する場合は問題は有りません。しかし、ゲーム中に随時キャラクターを…

キャラクターの追加方法

今回のサンプル1 今回のサンプル2 サンプルの全ファイル 画面をタップするとタップした位置にキャラクターを追加する方法を解説。普通に書くとこんなプログラムになります。しかし、 enchant.js の現在のバージョンではタイミングによっては一瞬、(0, 0)の位…

キャラクターアニメーションの方法

今回のサンプル サンプルの全ファイル 今回は enchant.js に付属の action-skelton フォルダのサンプルを使います。このサンプルはクマが左から右へ移動するサンプルですがアニメーションは付いていません。こちらにアニメーションを付ける方法を解説します…

バーチャルパッドの使い方

今回のサンプル サンプルの全ファイル バーチャルパッドを使うには enchant.js に加えて、rpgフォルダに有る ui.enchant.js と pad.png を使います。HTMLファイルには以下の順番で記載します。 <script type="text/javascript" src="enchant.js"></script> <script type="text/javascript" src="ui.enchant.js"></script> ゲームの処理を記述したJavaScriptのファイルでは以下の様に …

"9leap" Game Programming Camp @ Tokyoに参加してきた

学生対抗ミニゲーム開発コンテスト "9leap(ナインリープ)" - 強火で進め http://d.hatena.ne.jp/nakamura001/20110409/1302358465 以前、紹介したこちらのコンテストに関連したイベントである「"9leap" Game Programming Camp @ Tokyo」に参加してきました。…