Canvasまさお(JSまさお)

RYOさんによって開発されている、JS版まさおコンストラクションの紹介ページです。

Canvasまさお対応サイト一覧

2020年4月25日現在 全43サイト (多度津含む)
A Cloudy Day 閃光の星
過疎村 The Only Place
urotaichi corporation !のウェブサイト
スーパー正男～GMS～ 新緑の草木島
A storeroom of ennki SUPER DIAMOND SMASH
Masao World Adventure 総合雑学 鵺帝国
あさみどり RF研
青空の宮殿 Legend world
Network Pioneer 正男の寄り道
スーパー正男MY+ おおかみの森
IKYS THE HOMEPAGE ■将棋のページ■
正男送電線 正男の年金問題
れもん果汁.net Dii
福田直人のホームページ ポケモンズゲームランド
渉のホームページ エナジーボール
バスからはどうほう TADANET
かな's おはなばたけ 昔の裏庭 ＜昔の裏庭＞
Milta's Homepage 「汽笛一声」 -桃色乗務室- ＜「汽笛一声」 -桃色乗務室-＞
New Sky Order 森のくまさんホームページ VER.2018
極限まで冷えたハト サリナズワールド
ぼうしの研究所AM ULMD

一部に限ったCanvas移行や、MasaoSpaceの埋め込み形式の正男で公開しているサイトも含みます。古今東西正男の方もあわせてご参照ください。

当ページでのライブラリ名称の扱いについて

当ページ内では名称として、より一般的に使われているであろう「Canvasまさお」を採用しています。ほか名称案として「JSまさお」「まさお5」「マリオ」などいくつか候補が挙げられていますが、同じものでありますのでご注意ください。

最近では専ら、正式名称「JS版まさおコンストラクション(または、まさおコンストラクション JS)」通称「Canvasまさお」みたいな使い分けが定着してきているようです。

Google Chrome 47へのアップデートでの仕様変更による影響

Chromeのバージョンアップによって、古いバージョンのCanvasまさおのままでは、Param要素のままの正男を自動変換する手法が使えなくなるらしいです。この問題に対応してCanvasまさお本体のバージョンアップがなされたので、公式ページや公式Twitterで確認のうえ、サイトでの対応のほうも進めましょー

何にせよ、CanvasMasao.jsでの新しい更新がきたら対応するのは大事ですね。

NEWAndroidでバーチャル操作パッドが延々と下へスクロールされる問題

ページがどんどん縦長になり、正男の画面が表示されなかったり操作入力がままならなかったりするもので、20年1月頃から発生が確認されています。次のようにCSSを追加すると、修正されるようです。

[id^="__mcpad"] canvas {
    position: fixed !important;
    top: unset !important;
    bottom: 0 !important;
}

コードは、ぼうし氏から提供いただいたものを参考にしています。

Canvasまさおの解説

既存のスーパー正男をJavaではなくてJavaScriptで動かすべく開発されてきました。

今までとの違い／特徴

「Canvasまさお」というだけあって、今までのapplet要素ではなく、最新のHTMLバージョンであるHTML5で登場したcanvas要素でゲームが動作します。

もしあなたがJavaの最新版をインストールして正男の動作に使っている場合、applet要素で動くものは色々な制限がかかっていました。が、これが無くなります。これは、Javaではなく、JavaScriptをCanvasまさおでは利用しているためです。この2つは名前が似ているようで実は全然違うのです。

そして、そのおかげでスマートフォンでもプレイが出来るようになっています。ふと思い立った時に、例えばそれは駅で電車を待っていたり、なかなか着かないエレベーターを待っていたり、そんな時。先日は管理人宅のREGZAでも動作しました(何

逆に、HTML5 に対応していない古いブラウザでは、canvas要素を使用しているCanvasまさおは動作させることが出来ません。プレイには、最新のブラウザを使用してください。(加えて、ブラウザの設定でJavaScriptを有効にしていない場合も動作しませんので、必ず設定を有効に変更するようにしてください。大抵はしてあることでしょう。)

また、移植の際、Canvasまさおには「まさおコンストラクションFX Update16」対応のものと、「まさおコンストラクション2.8」対応のものの2種類あります。両者には異なる動作が多く、これを取り違えると残念な結果になるのでご注意を。(FXはmc_c.jar、2.8はmc_zipを使っています)

JSSの動作が軽くなったことも大きな特徴の一つです。JSSのメソッドに今までになかった新しいものが要望にあわせて作られる、ということも始まってきています。さらに、canvasとの互換機能が実装されたため、グラフィックの可能性が大幅に広がりました。

ステージの記述方法も一新されたものとなり、敵や障害物の数、さらにはステージの縦の長さ横の長さの制限も撤廃され今まで史上最高に自由な正男作りを可能にしています。

ブックマークレットについて

JavaScriptのプログラムそのものをブックマークに登録しておき、開いているページでブックマークを呼び出して登録したプログラムを実行するというものです。

･･･上の説明がよく分からんというのはさておき、
今回では、開いているページ内のApplet版正男のステージをCanvasまさおに置換するというプログラムを、ブックマークに登録しておくということです。肝心のコードはページ一番上の薄い青色のリンクにあります。リンクを選択した状態で右クリックし、リンクのコピーなどからブックマーク登録のアドレス欄にコピペしてください。

※変換しようとするステージが以下の条件に当てはまる場合、変換されません。

RYOさん(制作者)こぼれ話

まさおメーカーCanvasの方について、どれくらいの制作期間だったか。「ざっと、2週間くらいだったと思います」とのこと。元のCanvasまさおの方は1ヶ月半くらいで制作されたとか。とても私には真似のできることではありません...!

Canvasまさおの導入

ここでは、Canvasまさおでのステージ作成・変換方法、加えてその際に注意が必要なことを紹介しています。

ステージ作り

まさおメーカーCANVAS
マリ...おっと、皆さんご存じのまさおメーカーでCanvasまさおに対応したものが早速リリースされています。デザインも従来のものと違うのに加え、javascriptで作られているのでスマホでも利用することが出来ます。
まさおメーカーCANVAS
Side
Sideで正男を作っている方向けのCanvasまさお対応のランタイムは、urotaichi corporationで他のランタイムと同様に公開されています。
ダウンロードしたランタイムは、Sideの起動画面の その他 → ランタイムマネージャ → 新しいランタイムのインストール から、ランタイムパッケージを読み込んでください。
それ以外
従来のApplet版のソースを本来のCanvasまさお用に最適化する変換装置もあります。Readmeファイルにある使用例3,4で使うものです。Param要素を使わずに文法をしっかりと押さえておきたい人に推奨、でしょうか。

従来のステージ(Applet版)の変換①

あなたのHDD奥深くに眠る正男も、再びプレイ可能に!?
ここからは、もうステージとして出来ている正男(Canvasでない)を変換する方法を簡単に紹介します。早ければ3分で出来ちゃうと思います。

まず、動かしたい正男のHTMLファイルを1つのフォルダにまとめておきましょう。そして、Canvasまさお本体をそのフォルダにダウンロード、解凍しておきます。

FX最新版 はFX16を元に、2.8最新版 は まさおコンストラクション2.8を元にして作られています。必要な方を選んでください。また、ファイルの正男がFX16か2.8かの区別を確認しておいてください。両方の種類でも同じフォルダで構いません。

そしてメモ帳などのファイルを編集できるもので開き、head要素(<head>と</head>の間)に

FX16なら

<script type="text/javascript" src="CanvasMasao.js" charset="UTF-8"></script>
<script type="text/javascript">
CanvasMasao.Game.replaceAll();
</script>

2.8なら

<script type="text/javascript" src="CanvasMasao_v28.js" charset="UTF-8"></script>
<script type="text/javascript">
CanvasMasao.Game.replaceAll();
</script>

と追加して上書き保存します。これで勝手にapplet要素内のステージや設定を読み込んで、Canvas版に変換してくれます。やった！(ただし、最新版のChromeではうまくいかない可能性があります)

他にも、いくつか置換方法はあります。Readmeファイルを各自参照してください。

画像が表示されないときは、その画像を同じフォルダに移したりステージ設定を確認してみたりしてください。

従来のステージ(Applet版)の変換②

基本的な変換方法は↑で紹介したとおりですが、中には、それはもう大量のステージを変換したいという方もいるかと思います。
しかし、その時に一つ一つファイルを開いてなりしては面倒かもしれません。そこで、ここでは、複数の htmlファイルでもまとめて一括で変換できる方法の紹介です。

今回使用するソフトは、「複数のHTML＆テキストファイルを一括置換 TextSS.net」です。htmlファイルの中身を書き換えて、Canvasまさおに変換、となるわけです。とても使いやすく、↓の解説が無くても、大体できちゃいそうなくらいです。

以下、作業の手順です。公式の解説の方も懇切丁寧で大変に詳しくなっているので、そちらもご参照ください。

1. ダウンロード&解凍
公式ページの「ダウンロード」から最新版(5.21)をダウンロードします。インストールは不要で、ファイルを解凍(展開)したら、TextSS.net.exe から本体を起動します。
2. 変換したい正男のある htmlファイルを登録する
htmlファイルを選択してドラッグ&ドロップで「検索と置換の対象ファイルリスト」に乗っけます。このとき、ファイルを選び出して一個ずつ乗っけようとせずとも、つまり、関係のないファイルが一緒に選択されている状態でも大丈夫です。乗っけても、上の方に指定している拡張子以外のファイルは自動で弾いてくれます。フォルダの中身を全て選択して移動させるだけで大丈夫でしょう。ここで、ファイルごとに .bak(バックアップ)ファイルが作成されますが、一応、変換が終わるまでは取っておいてもいいかと思います。※リストのチェックボタンは全てついているようにしてください。
3. 変換する文字列を指定
リストに載せきったら、右下の「次へ」で置換する文字の設定画面へ移動します。
ここで、Canvasまさおに変換するときのコード(ソース)を指定します。
＜設定例＞
検索する文字列→置換する文字列に変換される感じです。設定項目の追加は、右下の方にある「行の追加」から出来ます。「置換方法」は、「文字列の置換」で行います。(なお、正規表現を使うときはPerl5準拠になります。)
検索する文字列1
</head>
→ 置換する文字列1
<script type="text/javascript" src="CanvasMasao.js"></script>
<script type="text/javascript">
CanvasMasao.Game.replace("applet1_id");
</script>
</head>
検索する文字列2
<applet
→ 置換する文字列2
<div id="applet1_id"
検索する文字列3
</applet>
→ 置換する文字列3
</div>
↑の設定例のようにApplet要素をDiv要素に変換することで、プレイするときに出てくる警告みたいなのをなくすことも出来ます。出力の時の文字コードも調整できるので、併せて設定しておくといいかも。パターンリストも登録しておくと、次からも楽です。
4. いざ置換
設定が済んだら、再度、右下の「次へ」を押します。
ここでは、実行するときの置換具合を確認するかどうかの設定を行えます。
「置換の実行方法の指定」は、「すべてのパターンの検索と置換を行う」としたうえで、「置換候補の確認」は、「表示しない」とすれば何も操作すること無く置換が終了します。
実際、Canvasまさおへの変換はコードだけで行うので、一つ一つ確認する必要はないですから大丈夫でしょう。
右下の「開始」で実行されます。
5. 置換結果の確認
置換が行われると、その時点で内容を書き変えて上書き保存します。元のデータのままのものを残すのならば、はじめから複製しておくのがいいです。リストの「ステータス」欄が、「置換完全成功」になっていたらOKです。そうじゃなかったら、その項目を選択して下のプレビューから確認できます。「次へ」がありますが、もう変換は済んでいるので進まないでください。
そのままソフトを終了すると、バックアップファイルも消してくれます。これで、同じディレクトリに CanvasMasao.js を置けばプレイできる ... はずです。

なにぶん使い始めたその日に書いているものなので、内容が違っていましたらどうかご了承ください。(ご指摘いただければ修正します)

音声ファイルについて

Applet版の挙動はほぼ完全に移植しているCanvasまさおではありますが、動作の仕方にはいくつか異なる点があります。その中でも大きな違いとしては、使用できる音声ファイルが .au や .mid であったところが .mp3 .wav .ogg となったことが挙げられます。

これは、Canvasまさおにおいて HTML5 で新たに採用された、Audio要素 を利用して音声を再生しているためで、これまでのように、一つのジャンプやコインの効果音には一つの音声ファイル(.au や .mid)をアップすればいい、とはいかなくなりました。

HTML5は最新であるがゆえに Audio要素 についてブラウザごとに対応がまちまちとなってしまっており、拡張子によっては再生されないものがあって同じ効果音を再生するにも、より多くのブラウザで再生できるようにするにはそれだけ多くのファイルを用意する必要性が出てきてしまっています。

音声ファイルごとに再生がなされるブラウザは、以下の通りです。

ブラウザiconGoogle ChromeiconInternet ExplorericonMozilla Firefox
.mp3○○△
.wav○×○
.ogg○×○

参考：Wikipedia(HTMLオーディオ)
Opera や Safari は　Google Chrome で見た場合と大体同じなので省略しました。

この表を見た限りでは .mp3 と、 .wav か .ogg をアップすれば大体のブラウザで音声が再生されそうです。

.ogg と .wav を比較したとき、よく言われるのが「.wavの方がファイルサイズが大きい」ということで、Canvasまさおでも、.wav のBGMでは初期値で読み込まないことになっています。.wav は高音質に出来る、という利点がありますが、レンタルサーバを利用していて容量が気になるという場合には .wav は避けた方がいいのかもしれません。

(参考) 拡張子ごとのファイルサイズ比較
gameover.mp3 : 6.9KB ／ gameover.ogg : 5.7KB ／ gameover.wav : 13.6KB

ここからは、管理人直選の音声変換に使えるソフトを紹介していきます。主に、.au や .mid からの拡張子の変換ができるものです。拡張子変えるくらい、ファイル名の変更からできるわーいなんて言わずに、是非 使いましょう。

EcoDeco Tool(えこでこツール)
.au からの変換に。(.mid からの変換には使えません)公式HP
Zipファイルを展開し、.exe を起動して変換したいファイルをまとめて(複数ファイル可)ドラッグするだけ、とシンプルな操作が特徴。上記の、.mp3 .wav .ogg 全てに変換することが出来ます。それも、割と高音質で変換してくれるらしいです。音量の調整や保存フォルダの変更も出来ます。
.mp3 の変換方法が2つあり、デフォルトで使えるのはFraunhoferの方です。もう一つのLameの方は新たにファイルをダウンロードするなどひと手間必要ですが、より高音質になります。導入方法は検索してみてください。かなり高音質のものにすることもできて、普段使いにも最適かも!?
iTuens
.mid からの変換に。(難あり?)
単に管理人のPCに入っていて、調べたら一応は変換できるよ! とのことだったので使ってた、程度です。そこまで推す理由は無いのが本音。が、せっかくなので。
iTuensで .mid を再生するには QuickTimePlayerが必要だということで、わざわざPCにインストールしました。それから、1つ1つ変換するものを選択しては変換を選んでクリック、の繰り返しで済みます。少し面倒でしたけど。

これについては、調べればもっといいものがあるかもしれません。

このページを作る時に参考にしたページ

これらのページも同様のスタンスで書かれています。こちらも読んでおくと吉かも