Month: December 2016

スマホ対応HTML5アドベンチャーゲームエンジン - Almight

デバッグをしよう | スマホ対応HTML5アドベンチャーゲームエンジン – Almight

デバッグをしようconfigファイルを編集する「tutorial\lib\config」フォルダに「almight.config.js」というファイルがあります。 Almightのゲーム設定は、このconfigファイルを編集することで行えます。 例)ゲームタイトルを設定・画面サイズの設定など 設定する項目は、configファイル内に書いてありますのでそちらを見てみてください。 デバッグモードにするconfigファイルの72行目に、デバッグモードにするかどうかという設定項目があります。 debug: 0,となっている部分を debug: 1,に書き換えて保存して下さい。 これでデバッグモードになりました。 コンソールを表示するAlmight.exe を起動させた状態で、F12 キーを押してください。 MacでChromeを使っている場合は、右上のレンチアイコンから[ツール]→[デベロッパーツール]を選択してください。また、 option+command+j でもデベロッパーツールが開きます。 06_001 ここでは、ゲームの実行中にどのようなタグが実行されたか等の情報が全て表示されます。 画像が見つからない、などのエラーの内容も表示されますので、開発中はデバッグモードにしてコンソールを表示していると便利です。 機能デモ・サンプルゲームを見るSDKには「demo」というフォルダに機能デモとサンプルゲームを同梱しています。 このシナリオファイルには多数の解説コメントが入っていますので、ぜひ参考にしてみてください。

シナリオを分岐させよう | スマホ対応HTML5アドベンチャーゲームエンジン – Almight

シナリオを分岐させようラベルをつけるアドベンチャーゲームに必須な要素といえば、選択肢です。 プレイヤーに選択肢を表示して、そこからシナリオが分岐していくというのが基本ですね。 選択肢が選ばれたら、特定の場所にシナリオがジャンプしないといけません。そのため、目印となるラベルを設定します。 ラベルは、行の先頭に* がつきます。 では、first.ksの下部を編集して、以下のようにしてみましょう。 Almightへようこそ![m]このゲームエンジンで、[m]どんなゲームを作りますか? *anna@cmあんなゲームを作りましょう@s *konna@cmこんなゲームを作りましょう@s「あんなゲーム」「こんなゲーム」というシナリオにジャンプするためのラベルを追加しました。 しかし、このまま実行してもラベルはそのまま通過されて上からしか実行されず、最初の[s]タグで処理が停止してしまいます。 では、選択肢を表示させましょう。選択肢の表示には[choices]というタグを使います。 Almightへようこそ![m]このゲームエンジンで、[m]どんなゲームを作りますか? @choices text1=”あんなゲームかな” target1=”anna” text2=”こんなゲームだよ” target2=”konna”@s *anna@cmあんなゲームを作りましょう@s *konna@cmこんなゲームを作りましょう@s04_001 選択肢が表示されました。 ここからは選択肢をプレイヤーが選択するまで先には進みません。 上の「あんなゲームかな」を選択すると、[choices]タグで指定されている「target1」属性のラベル名までジャンプします。 そこで「*anna」というラベルまでジャンプし、文字を全消しして「あんなゲームを作りましょう」という文字を表示して停止する。といった流れになります。 04_002 変数を使う変数とはいわゆるフラグとして使えるもので、セーブデータの中に保存されます。 ここに様々な要素(特定のCGを見た・どちらのルートに進んだ・好感度の数値などなど…)を記録しておくことで、ゲームをさらに豊かにすることが出来ます。 変数にはいくつか種類があります。 セーブ・ロード可能な普通のゲーム変数を f変数 といいますセーブ・ロードと関係なく、常に値を保持できるシステム変数 sf変数 といいます一時的に値を置けるだけの一時変数(ゲームの終了で消える) tf変数 といいます変数には半角英数、全角文字、アンダーバーを利用可能ですが、出来るだけ全角文字は避けて下さい。また、変数名の最初の文字に数字を付けることはできません。(2p などは _2p などとしてください) この変数名の前にゲーム変数ならf.を、システム変数ならsf.を、一時変数ならtf.を置き、「f.flag」として変数を呼び出します。 変数に値を入れるには[eval]タグを使います。 f.flagに400という数字を入れるには @eval exp=”f.flag = 400″といったふうに使います。文字列を入れたい場合は @eval exp=”f.flag = ‘こんにちは’”このように、シングルクォーテーションで文字列を囲み、ダブルクォーテーションでexp属性を囲みます。 @eval exp=”f.flag = 400 + 5″とすれば、405となるよう四則演算も出来ますし、文字列の結合なども可能です。 タグの属性値に変数を使う@eval exp=”tf.name…
Read more

マクロを使おう | スマホ対応HTML5アドベンチャーゲームエンジン – Almight

マクロを使おうマクロを定義してみるマクロは、複数のタグをまとめて一つのタグとして呼び出せるようになる便利機能です。 実は、いままでのチュートリアルではこのマクロを既に活用しながら解説してきました。 画像を[show_bg]で読み込んで[action]で実行するという一連の動作は、Almightで既に定義されているマクロを使っていたものです。 @call storage=”macro.ks”という行がfirst.ksの一行目にありましたが、ここで「ks」フォルダに入っているmacro.ksを読み込んでいます。 では実際にマクロを定義してみましょう。 [macro name=”color”][font color=”#ff0000″]ああああ[resetfont][endmacro]このように、[macro]と[endmacro]で囲んだ部分がマクロとして定義され、以降は[color]と書くだけでいつでも呼び出せるようになります。 マクロの属性[macro name=”color”][font color=”%iro”]ああああ[resetfont][endmacro]このように、color属性の部分を%iroというふうに変えてみました。 こうして属性値の最初に%を使うと、マクロで呼び出す属性値を渡すことが出来ます。 つまり [color iro=”#ff000″]このように書けるようになります。 さらにこのとき [macro name=”color”][font color=”%iro|#ff0000″]ああああ[resetfont][endmacro]このように、縦棒で区切っておけば、その後に書いた値がデフォルト値として使われるようになります。 マクロ機能は非常に便利な機能です。 ぜひ使いこなして下さい。 また、Almightに標準で付属しているmacro.ksは改造が可能ですので、カスタムしてさらに便利に使って下さい。

サウンドを再生しよう | スマホ対応HTML5アドベンチャーゲームエンジン – Almight

サウンドを再生しようAlmightでは、サウンド形式としてoggを採用しています。 音声の変換は、以下のサイトを参考にして、Ogg Vorbisに変換してください。 http://www.vector.co.jp/vpack/filearea/win/art/sound/conv/ http://www.forest.impress.co.jp/library/software/bonkenc/ 出来たファイルは「ogg」フォルダに入れてくださいね。 BGMを再生するでは早速BGMを再生してみましょう。 この1行を追加すればOKです。 (first.ksの1行目にある、@call… よりも下に入れて下さい) 停止するには、[stop_bgm]を使います。 SEを再生するSE(効果音)を再生したい場合があるかと思います。 SEの再生には、[play_se]を使います。 停止するには、[stop_se]を使います。 ですが、大抵の効果音は短い音声だと思いますので、[stop_se]を使う場面は少ないかもしれません。 BGVを再生する雨の音や風の音、人の息づかいなど、BGV(環境音)をループ再生させたい場面に[play_bgv]を使います。 停止するには、[stop_bgv]を使います。 今回使ったマクロBGMを再生する BGMを停止する SEを再生する SEを停止する BGVを再生する BGVを停止する

文字枠を操作しよう | スマホ対応HTML5アドベンチャーゲームエンジン – Almight

文字枠を操作しようアドベンチャーゲーム風の文字枠にしよういまは、メッセージを表示する枠がキャラクターの上にかぶさっています。これはこれで、サウンドノベル風のゲームを作るならそのままでも良いのですが、画面の下に文字を表示するアドベンチャーゲーム風のものに変更してみます。 以下のマクロを、1行目の下に追加してみましょう。 @type_msg type=”adv”@actionこのようになりましたか? @call storage=”macro.ks” @type_msg type=”adv”@action @show_bg file=”bg01″@action @show_lc file=”pra01″@show_rc file=”ele01.png”@action rule=”rule01.png” time=1000 Almightへようこそ![m]このゲームエンジンで、[m]どんなゲームを作りますか?@s03_001 アドベンチャーゲームらしくなりましたね。[type_msg]を使って、[action]を実行することで文字枠の種類を変更することが出来ます。 [position]を使えば、文字枠に画像を使ったり、より詳細な設定が可能になったりしますが、このチュートリアルでは割愛します。 文字枠を非表示にするには[hide_msg]を、表示するには[show_msg]を同じ要領で使って、[action]を実行してください。 @hide_msg@actionを実行すると、文字枠が非表示になります。 03_002 今回使ったマクロメッセージレイヤーのタイプを変更する typeにfullを指定すると、サウンドノベル風に全画面にメッセージレイヤーが表示されるタイプになりますtypeにadvを指定すると、アドベンチャーゲーム風にテキスト枠が表示されるタイプになります変更した後は、[action]を使って実行して下さい メッセージレイヤーを表示状態にする [show_msg]このあと、[action]を使って実行して下さい メッセージレイヤーを非表示状態にする [hide_msg]このあと、[action]を使って実行して下さい

画像を表示してみよう | スマホ対応HTML5アドベンチャーゲームエンジン – Almight

画像を表示してみよう背景を表示させてみる真っ黒な画面では寂しいので、背景を表示させてみましょう。 まず、1行目の下に以下のマクロを入力してみてください。 @show_bg file=”bg01.jpg”@actionこのようになりましたか? @call storage=”macro.ks” @show_bg file=”bg01.jpg”@actionAlmightへようこそ![m]このゲームエンジンで、[m]どんなゲームを作りますか?@sすると、このように画像がフェードイン表示されます。 02_001 では、少し掘り下げて見てみましょう。 @show_bg file=”bg01.jpg”@action[show_bg]を使うと、背景を読み込むことができます。 この場合は、「game」フォルダの「jpg」フォルダ内にある、bg01.jpg が読み込まれていますね。 [show_bg]のfile属性に、ファイル名を指定しています。このマクロは、jpgファイルに限り拡張子を省略出来ます。 基本的に、プロジェクトフォルダに素材を追加するときは「game」フォルダ以下の「<ファイルの拡張子>」フォルダにファイルを追加してください。 しかし、[show_bg]のみを使っても画面に画像は表示されません。このマクロは、画像を読み込むだけで、画面に表示することはしないからです。 そこで、そのあと[action]を実行することで、読み込んだ画像を表示することが出来ます。 [action time=3000] のように、time属性を指定することでフェードする時間を3秒間に伸ばしたり、timeに0を指定して即時切り替えたりも出来ます。 では、次に立ち絵イラストを表示していきましょう。 立ち絵を表示させてみるでは、ゲームの登場人物たちを表示してみましょう。 先ほど入力した2行の下に、以下を追加してみましょう。 @show_c file=”pra01.png”@actionこのようになりましたか? @call storage=”macro.ks” @show_bg file=”bg01.jpg”@action @show_c file=”pra01.png”@action Almightへようこそ![m]このゲームエンジンで、[m]どんなゲームを作りますか?@sすると、このように立ち絵がフェードイン表示されます。 02_002 今回は[show_c]を使って立ち絵を中心に読み込みました。 立ち絵を読み込むマクロは他にもあります。 [show_l] 左端に読み込む[show_lc] 中心より左寄りに読み込む[show_rc] 中心より右寄りに読み込む[show_r] 右端に読み込む[show_c] 中心に読み込むキャラを2人表示するには、以下のように変更します。 @call storage=”macro.ks” @show_bg file=”bg01.jpg”@action @show_lc file=”pra01.png”@show_rc file=”ele01.png”@action Almightへようこそ![m]このゲームエンジンで、[m]どんなゲームを作りますか?@s02_003 立ち絵は背景より上、メッセージレイヤーより下に表示されます。 新しく立ち絵を追加するときは、PNG形式で画像サイズをゲームの画面サイズと同じにし、他の部分を透過するようにしてください。 ユニバーサルトランジション[action]は、属性なしだと1秒かけてクロスフェードで画像を切り替えますが、ルール画像と呼ばれるモノクロ画像を使うとユーザーが自由にトランジションを設定することができます。 「png」フォルダに「rule01.png」というファイルがありますが、これがルール画像と呼ばれるものです。 02_004…
Read more