インプレース編集機能の付いたノベルゲーム

10/10/25　同ページのスクリプトをJS Adventureのバージョン2.0に変更しました。サンプルページも用意しています。

　JavaScriptによるゲーム作成ライブラリJS Aventure.jsの機能や不具合を大幅に改善してバージョンを1.0JS Adventure　バージョン2.0にしました。 最新ブラウザの使用を前提に、テキストを影付き文字にしたりアウトラインをつけたりできます。下のサンプルゲームはPrototype.jsライブラリのインプレース機能を使って、ゲーム内容を編集できます。 ゲーム画面の下のエリアボックスをクリックすると、背景色が変わり編集可能になります。文字サイズやセリフの部分などが手っとり早く変えられると思います。いろいろ試してみてください。 ちなみに画像や音楽などはゲーム作成エディターの素材がそのまま使えます。

下のエリアをクリックしてイベントを編集しよう

[ //SCENE N1 { name: 'n1_intro_a', flag: null, story: null, data: [ { type: 'changeBgImg', param: 'autumn_leaves_01' }, { type: 'changeBgImg', param: [ 'autumn_leaves_02', 'sub' ] }, { type: 'showBgImage' }, { type: 'playMusic', param: 'music03' }, { type: 'createSimpleText', param: [ 'これはデモ画面です', 'demo1', { style: 'color: #FFF; font-size: 50px; overflow: hidden; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Verdana, arial, sans-serif;', loc: [90, 120], shadow: true, outline: false } ] }, { type: 'createSimpleText', param: [ '下のインプレース編集部分で、createSimpleTextというイベントのオプションを変えるとこのようにテキストが影付き文字になります。', 'demo2', { style: 'color: #FFF; font-size: 20px; overflow: hidden; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Verdana, arial, sans-serif;', loc: [20, 120], shadow: true, outline: false } ] }, { type: 'createSimpleText', param: [ '通常はこのように背景の影響で読みにくいです。ここでcreateSimpleTextイベントのオプションのshadowプロパティをtrueにすると……', 'demo3', { style: 'color: #FFF; font-size: 20px; overflow: hidden; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Verdana, arial, sans-serif;', loc: [20, 120], shadow: false, outline: false } ] }, { type: 'createSimpleText', param: [ 'このように背景画像があっても読みやすくなります。最新バージョンならばIEなど主要ブラウザで確認できるはずです。', 'demo4', { style: 'color: #FFF; font-size: 20px; overflow: hidden; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Verdana, arial, sans-serif;', loc: [20, 120], shadow: true, outline: false } ] }, { type: 'createSimpleText', param: [ 'テキストを白抜き文字にすることもできます。オプションのoutlineプロパティをtrueにしてみたところです。', 'demo5', { style: 'color: #FFF; font-size: 24px; font-weight: bold; overflow: hidden; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Verdana, arial, sans-serif;', loc: [20, 120], shadow: false, outline: true } ] }, { type: 'createSimpleText', param: [ 'その他、インプレース機能を使って遊んでみてください。', 'demo6', { style: 'color: #FFF; font-size: 40px; font-weight: bold; overflow: hidden; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Verdana, arial, sans-serif;', loc: [20, 120], shadow: false, outline: true } ] }, { type: 'createSimpleText', param: [ '秋が深まる今日、フェルト村にも紅葉の季節が訪れた。', 'koyo1', { style: 'color: #FFF; font-size: 18px; overflow: hidden; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Verdana, arial, sans-serif;', loc: [80, 120], shadow: true, outline: false } ] }, //デモ1の表示と非表示 { type: 'dispSimpleText', param: [ 'demo1', { delay: 1.0, effect: true } ] }, { type: 'waitUntilClick', param: 'disp' }, { type: 'hideSimpleText', param: [ 'demo1', { effect: true, duration: 0.5 } ] }, //デモ2の表示と非表示 { type: 'dispSimpleText', param: [ 'demo2', { delay: 1.0, effect: true } ] }, { type: 'waitUntilClick', param: 'disp' }, { type: 'hideSimpleText', param: [ 'demo2', { effect: true, duration: 0.5 } ] }, //デモ3の表示と非表示 { type: 'dispSimpleText', param: [ 'demo3', { delay: 1.0, effect: true } ] }, { type: 'waitUntilClick', param: 'disp' }, { type: 'hideSimpleText', param: [ 'demo3', { effect: true, duration: 0.5 } ] }, //デモ4の表示と非表示 { type: 'dispSimpleText', param: [ 'demo4', { delay: 1.0, effect: true } ] }, { type: 'waitUntilClick', param: 'disp' }, { type: 'hideSimpleText', param: [ 'demo4', { effect: true, duration: 0.5 } ] }, //デモ5の表示と非表示 { type: 'dispSimpleText', param: [ 'demo5', { delay: 1.0, effect: true } ] }, { type: 'waitUntilClick', param: 'disp' }, { type: 'hideSimpleText', param: [ 'demo5', { effect: true, duration: 0.5 } ] }, //デモ6の表示と非表示 { type: 'dispSimpleText', param: [ 'demo6', { delay: 1.0, effect: true } ] }, { type: 'waitUntilClick', param: 'disp' }, { type: 'hideSimpleText', param: [ 'demo6', { effect: true, duration: 0.5 } ] }, //サンプルノベルスタート { type: 'crossfadeBg', param: [ { duration: 3.0 } ] }, { type: 'typeSimpleText', param: [ 'koyo1', { delay: 1.0 } ] }, { type: 'waitUntilClick', param: 'disp' }, { type: 'hideSimpleText', param: [ 'koyo1', { effect: true, duration: 0.5 } ] }, { type: 'showWin', param: 'main' }, { type: 'typeMsg', param: [ '「うわあ、すごい。葉っぱがみんな真っ赤に染まってる」', 'アルタ', { image: 'Actor38', offset: [3, 1] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「だから言ったでしょ。ここの紅葉が一番きれいだって」', 'パルフィ', { image: 'Actor34', offset: [0, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「ほんとはみんなにも内緒にしておきたかったんだけどね」', 'パルフィ', { image: 'Actor34', offset: [0, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「親分、見て見て！　紅葉がきれいッスよ」', 'シーナ', { image: 'Actor37', offset: [0, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「へえ、紅葉ってこんなに鮮やかになるのか」', 'アスマ', { image: 'Actor55', offset: [0, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「ふふ、いつも暗い穴倉で獣狩りばっかやってるあんたにはさぞかし新鮮な景色に見えるでしょうね」', 'パルフィ', { image: 'Actor34', offset: [0, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「穴倉とかゆーな。ダンジョンっていうんだ」', 'アスマ', { image: 'Actor55', offset: [1, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「それはともかく。まあ、たしかに秋って感じでいいよな」', 'アスマ', { image: 'Actor55', offset: [0, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「でも、分かんねえのは何で食えもしねえのに紅葉狩りって言うんだろうな」', 'アスマ', { image: 'Actor55', offset: [0, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「言うと思った！　紅葉を手にとって眺める風習からそう呼ばれるようになったのよ」', 'パルフィ', { image: 'Actor34', offset: [3, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「色づく紅葉と深まる秋に、人は季節の移ろいを感じ、様々な思いを寄せてきた……」', 'パルフィ', { image: 'Actor34', offset: [0, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「長く厳しい冬を前にただよう憂愁。この美しい紅葉はそんな人々につかの間の慰めを与えてくれるのよ」', 'パルフィ', { image: 'Actor34', offset: [0, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「うんうん、分かるなあ。この季節特有のわびしさというか、もの悲しさみたいのがあるよね」', 'アルタ', { image: 'Actor38', offset: [3, 1] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「うーん、あたいにはちょっぴり大人な雰囲気すぎてわからないッスよ」', 'シーナ', { image: 'Actor37', offset: [0, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「親分はどうッスか？」', 'シーナ', { image: 'Actor37', offset: [0, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「秋の憂愁ねえ。オレにとっちゃ秋は狩りのシーズンって感じで……」', 'アスマ', { image: 'Actor55', offset: [0, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「むしろ気持ちが沸き立ってくる季節だけどな。運動の秋って言うだろ？」', 'アスマ', { image: 'Actor55', offset: [0, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「はいはい、あんたに風流さを求めた私がバカでした」', 'パルフィ', { image: 'Actor34', offset: [1, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「それはそうと腹へって来たな。村を出てから何も食べてないし」', 'アスマ', { image: 'Actor55', offset: [0, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「そうッスね。あたいもお腹ぺこぺこッス」', 'シーナ', { image: 'Actor37', offset: [0, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「そいじゃ、ここらでランチタイムとするか」', 'アスマ', { image: 'Actor55', offset: [0, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「せっかくパルフィお嬢様がごちそう作ってきてくださったわけだし」', 'アスマ', { image: 'Actor55', offset: [0, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「ちょっと、まだお昼にもなってないじゃない。何でこう、あんたたちは食い意地ばっか張ってるの？」', 'パルフィ', { image: 'Actor34', offset: [1, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「僕も朝からほとんど何も食べてなくて……ちょっとお腹がすいたかな？」', 'アルタ', { image: 'Actor38', offset: [2, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「アルタまでそんなこと言う……」', 'パルフィ', { image: 'Actor34', offset: [1, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「はい、3対1で決まりー！」', 'シーナ', { image: 'Actor37', offset: [0, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「そうと決まりゃ、準備準備！　ほいさっさ～」', 'アスマ', { image: 'Actor55', offset: [0, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'typeMsg', param: [ '「あーもう、気分を台無しにして！　あんたたち、次は連れてきてやんないかんね」', 'パルフィ', { image: 'Actor34', offset: [1, 0] } ] }, { type: 'clickToContinue', param: 'mainWin' }, { type: 'hideWin', param: [ 'main', { delay: 1.5 } ] }, { type: 'changeBgImg', param: 'autumn_leaves_03' }, { type: 'crossfadeBg', param: [ { duration: 2.0 } ] }, { type: 'showText' }, { type: 'typeText', param: '　動作確認：　Firefox3.6　IE8　Chrome6.0' }, { type: 'waitUntilClick', param: 'textWin' }, { type: 'hideText' } ] } ]

動作確認：　Firefox3.6 Chrome6.0 Opera10.6 IE8

以上のサイト様からお借りしました
イラストポップ
臼井の会
Ｆｒｅｅ ＳｏＺａｉ
フリー画像素材 EyesPic
無料素材 - BEIZ Graphics Web
煉獄庭園
Senses Circuit
01SoundEarth
H/MIX GALLERY
TAM Music Factory