トップバー広告(PC)

ツクールスタジオ

【RPGツクールMV×JSちゃん(javaScript)】ツクールプラグインをつくってほしいだけの種まき。(JSプラグインの作り方をさがしてみた?)

2016年11月2日

%e3%83%97%e3%83%ad%e8%a8%80%e8%aa%9ejs%ef%bc%88%e3%82%b8%e3%83%a3%e3%83%90%e3%82%b9%e3%82%af%e3%83%aa%e3%83%97%e3%83%88%ef%bc%89

 

『RPGツクールMV』はjavaScriptでいじれる!!!!

 

という発表から早1年。それまではプログラム言語Ruby(ルビー)が主体となってツクラーたちと歴史を積み重ねたスクリプトシリーズ「RGSS」はご終了し、

 

「制作ゲームのブラウザでの起動」

 

というツクールMV大目玉の特性のため、これからのツクールはブラウザに強い『javaScript(通称JSちゃん)』によって構成されることになったという。

 

正直、なんじゃらほい

 

ってな具合いでなんのこっちゃわからんかったボクだけど。とにかく「これからはJSらしい」「これからのツクールはJSらしい」っちゅー事だけはわかったボクだけれども。

 

「まあ知らないよりは知ってたほうがいいかも。」

 

というぐらいの好奇心にて「javaScript」というプログラム言語について調べてみたことを覚書。やっぱりシステム周りを動かせるのはツクラーの夢の一つだもんね。作ってくれる人が増えればいいことだもんね。オレは作らんもんね。ね。

 

 

種だけ撒いておこう。

育て!!次世代のJS使いたち!!!!

ツクールのプラグインをつくる!JS習得プログラマーへの道話プログラム言語概要ほしいJSプラグイン

【JSちゃんの取扱】ツクールMVから侵入する作戦

【ツクールプラグインとは?】

要は、「部分上書き」らしい。
※ワードプレステンプレートの子テーマシステムのように

ある部分に対して追加や変更を加えることで機能をパワーアップさせたり、あるいはそもそも別種の機能を載せたりするのだ。その際にできるだけ他に余計な影響が無いようにしていたりする。

 

【ツクールJS構造】

ツクールMV javaScript JS!

rpg_core.js 

(コア※核/中心/重要部)すべてを取り決める社長率いる総務部

rpg_manager.js 

(マネージャー※管理人/執行部/運行/ジェネラル)音楽や画像などの配置、各社員の役割を管理する人事部

rpg_scenes.js 

(シーンす※場面/光景/ツクール的には背景など)「こういう時はこうする」「そういう時はこうする」と考え指示する脚本担当

rpg_sprites.js 

(スプライトす※映像技術)キャラクターやモンスターの形・色・位置・動き・エフェクトなどを決める演出担当

rpg_windows.js 

(ウィンドウす※フレーム/メニュー/配置/レイアウト)メニューやウィンドウ画面などの位置・大きさ・載せる内容などを決める書記担当

rpg_objects.js 

(オブジェクトす※物/目標物/対象)全ての部署が共通で使えるお道具箱

 

【プラグインで影響させたい部分をみつける】

「クリティカルヒット時にアニメーションを流す」という事は、上のどのファイルが一番関連していそうか、アタリをつけます。社長は関係無いですし、人事部の出番も無し。メニューやウィンドウ画面にも関係無し。もしメニュー関係を変更したいなrpg_windows.jsを開けばいいわけです。

……そうですね、エフェクト絡みということで、rpg_sprites.jsが一番関係ありそうです。

[http://ktnhmv.jugem.jp/?eid=12]

※要は当たりをつけてフォルダを開き(部署に顔を出して「この件についてどう?わかる?」)と調べればどこかで作用させられそうな場所が見つかる(見つける)

 

【プラグイン作成】

①ご挨拶(ツクールプラグのラベルみたいなところ)

// CriticalAnimation (プラグイン名)
/*:
@plugindesc クリティカルヒット時にアニメーションを流すプラグイン(説明)
@author わたし(作者)
@help これはあれである(ヘルプ)
*/

「これはツクールMVのルールなのですが、
/*: のあとに、
@plugindesc 概要と、
@author 作者名それぞれ記載し、
*/ で閉じなければなりません。ちなみに長い解説を入れたい場合は
@help のあとに解説を入力することでこのプラグインの「ヘルプ」ボタンをクリックした時に表示されます。」

[http://ktnhmv.jugem.jp/?eid=12]

 

②JS本文(即時関数) ※すべて半角英数字モード(全角があろうもんなら即エラー吐く)

(function() {

例・ここにイジる元コードを抜粋コピペ↓

Sprite_Damage.prototype.setup = function(target) {
var result = target.result();
if (result.missed || result.evaded) {
this.createMiss();
} else if (result.hpAffected) {
this.createDigits(0, result.hpDamage);
} else if (target.isAlive() && result.mpDamage !== 0) {
this.createDigits(2, result.mpDamage);
}
if (result.critical) {
this.setupCriticalEffect();
}
};

例・ここにイジる元コードを抜粋コピペ↑

})();

これを「ツクールプラグインの雛形」として「js/pluginS(プラグインす)」フォルダに保存。

※コードの種類は「UTF-8(BOM無し)」

 

 

JSちゃんで『何かうみだす』!

アンドロイドアプリ開発「Monaca(モナカ)」

bandicam-2016-10-27-10-59-57-883

「Monaca」

・「初心者でも開発できる!Monacaの使い方入門サイト7選」

プログラム志向だけで「まずツクールゲームを作るのはどうか」とも思うところがある。

だってゲームはその他に考えなくちゃいけないこと、作業しなくちゃならないことが多いから、1作完成させるのに時間がかかるからね。

だったら時計のアプリでもカレンダーアプリでもなんでもいいからとにかく作って成果を出してみるってのがダイレクトに可能なのがアプリ開発なのではないかなということで。

 

①こんなアプリ作りたい→

②それだけに必要な情報を覚える&書く→

③完成(しなくとも四苦八苦することで理解が深まるので次に繋がることは確実)

 

これが習得の法則である。

 

しかも!

このたび「ツクールMVと提携」とか。

 

参考・「MonacaとRPGツクールMVが連携しました!」 

やったねっ

あんまりわかってない。

 

ゲーム開発エンジン「Unity(ユニティ)」

bandicam-2016-10-27-11-55-35-893

「Unity(ユニティ)」

・「【入門者必見】Unityとは?」

・「Unity入門に最適なチュートリアルサイトまとめ・比較」

・「はじめてのUNITY(日本語チュートリアル)」

まあ、これが使えたらツクールの話なぞしてないっちゅーわけで。※この「Unity」はプログラムにJSちゃんが使えるぞやったねこのやろう!

 

書くところ「CodePen(コードペン)」

bandicam-2016-10-27-11-26-54-134

「CodePen(コードペン)」

・「CodePenの使い方!プラグインなしでソースコード表示!」

Web上に書いてすぐ出力できるというのがジャバスクリプトの覚えやすさでもあるみたいだね。

 

JSちゃん書籍

とりあえずこれ読んで書いてれば覚えるというぞ。

 

Q&Aのサイト

bandicam-2016-11-11-03-26-08-633

「teratail」私達は、質問する方の問題解決を全力でサポートします。

・例1「2D格闘ゲームが作りたい(初心者)」

・例2「javascriptのfor文について質問です。」

・例3「【WordPress】アプリからのみ閲覧出来る記事は作れますか?」

いいね。

 

プログラマになるまでストーリー

・・・理屈は全く分からなかったし、if文やfor文すら知らなかった。

受験勉強にうんざりしてしまった僕は、とあるweb上で公開されているクローンゲームのステージ作成やキャラクターの設定をいじったりするのにハマっていた。

プログラムの観点で言えば、そのゲーム独自のスクリプト言語って感じだったと思う。

引数で当たり判定つけるか否かとかや位置指定(x、y、z)をしたりできる。

・・・理屈は全く分からなかったし、if文やfor文すら知らなかったけど、それでも何回も何回も起動させてはバグが無いか確認するというトライ&エラーで作っていた。

書いたものが動く。自分にもゲームが作れる。

そういう成功体験めいたものが出来たのが、志望動機として大きかった気がする。

そんな、背景もあり、プログラミングに興味を持っていたのでIT企業中心に就職活動を行った。

「Javaプログラマのはしくれダイアリー」さま編

 とにかくやってれば先に続いていくのだ。 

 

「だから未経験でも大丈夫なんじゃないかな」と言われて、内定をもらいました。

面接でその会社の常務さんと話していたら、「キミの卒業した大学ね、ウチの会社に卒業生が多いんだよ。みんなスキルも高いし。だから未経験でも大丈夫なんじゃないかな」と言われて、内定をもらいました。
いや、理由はそれだけではなかったと思うんですが、やたらその言葉が記憶に残っています。

先生を目指すか、そのままプログラマとして就職するか結構真剣に迷っていたのですが、そのことを前述の常務さんに話したら、「やりたいこととね、向いてることは違うんだよ。キミはこの仕事に向いている」と言われて、結局プログラマを選択しました。
「この仕事に向いている根拠はなんやってん!?」と思わなくもないですが、「やりたいことと、向いてることは違う」という考え方は意外と真理なんじゃないかと思います。

この案件を境にオブジェクト指向やその他のIT技術に強く興味を持ち始めたと思います。
「技術は使いこなせば使いこなすほど開発が楽になる、そして技術を追求するのって面白い!」と思い始めました。
それまでは与えられた仕事がこなせる程度の勉強しかしませんでしたが、それ以降は自分から主体的に勉強するようになりました。

「give IT a try」さま編

 現場で使ってれば自然と身につくものなのね。 

 

「物理法則に従う必要がないのがいいですね。」

自分の思い通りに動くのが楽しいんです。

特に材料も必要ないし、物理法則に従う必要がないのがいいですね。
自分の思い通りに動くのが楽しいんです。
機械とかは苦手です。

「「好きだから」以外に理由なんてないですよ。倉貫 義人さん」編

物理法則ってヤダよね。

 

 

2ちゃんねるというのはインターネットの神のような存在で、ここで言われていることは、必ず正しいと思いこんでいました。

黒い画面に、掛け算の表を出力したり、入力した年月のカレンダーを表示するような小さな成果物に、試行錯誤する日々。

そんな挫折から立ち直るために調べ、試行錯誤するステップさえも楽しく、こんな面白いことならば、できれば職業にしたい、と感じていました。

しかし、2ちゃんねるでは、プログラマの評判は散々でした。
プログラマについてこんなことが書いてありました。
「プログラマは社会の底辺がする仕事」
「1日20時間勤務が当たり前」
「土日が休みになることは少なく、また残業代も出ないブラック」
「30歳で定年」
当時の僕の中では、2ちゃんねるというのはインターネットの神のような存在で、ここで言われていることは、必ず正しいと思いこんでいました。

「プログラマは社会の底辺がなる職業だと思っていたら、プログラマになっていた話。和田 晃一良さん」編

すごいピュア。

 

 

「僕のプログラミングのルーツはRPGツクールです。」

1.まず、見よう見真似で主人公(父)の住む家(ここから旅立つわけです)を作る。
  →即テストプレイ。
  →主人公(父)は海のド真ん中で足踏み。カーソルキーをいじっても、
   上下左右に振り向きはするものの動けない。
  →デバッグ(?)開始、「主人公の初期位置」を設定しなければならないことに気づくのに2時間。

2.さて、ゲームが主人公(父)の家から始まるようにはなった。よし、いよいよ旅立ちだ!
  →扉を模した壁の割れ目へ移動
  →何も起こらない
  →デバッグ(?)開始、壁の割れ目に「主人公が触れたら場所移動」の
   透明イベントを配置するという高等テクニックを習得するのに1日半。

3.壁の割れ目に主人公を移動させると、旅立ちはできる(大陸マップに出る)ようになった。
  →よし、とりあえずもっかい家に戻ろう!
  →戻れない
  →村のグラフィックに「主人公が触れたら(以下略)。

4.ヨッシャー、これで家と大陸を往復できるはず!と旅立ってみる
  →一瞬大陸に切り替わり、即帰宅
  →一瞬家の中に切り替わり、即旅立ち
  →一瞬大陸に(以下略)。透明イベントを配置しているところに移動先を持ってきたため、
   主人公(父)が無限ループしてた。

5.これ以降、しばらくはつまづくことなくツクールに没頭。勢いにのって最初の洞窟を作る
  →その洞窟内に伝説の12武器の一つ、「トールハンマー」が入った宝箱を配置、
   透明イベントをセット。ふっ、チョロいもんだぜとテストプレイ開始
  →トールハンマーがいくらでも手に入るよ!
  →デバッグ開始、トールハンマーを手に入れた後に、
   プレイヤーが感知し得ない「スイッチ」なるものをONにしておき、
   宝箱イベントの開始条件に「スイッチがOFFのとき」「ONのとき」のふたつを作っておく、という
   高等テクニックを習得するのに1日。

上に挙げたような「僕が陥ってしまったこと」は、今こうして振り返ってみると、プログラミングの根っこに関わることだったなぁと思えてきて仕方がありません。

「えいのうにっき」さま編

ツクール万歳。

 

原点:RPGツクール「制限される面白さ」

以上から私がプログラミングに熱中した重要な要素をまとめると、

  • 制限というやりこみ要素
  • 作ったものが簡単に動かせて結果が視覚的にもわかりやすい
  • 教本あるいは教師の存在

の3つです。

「ゲームを作りたい」というベクトルがプログラミングという手段とマッチしていたというのも大きいと思うので、何か目標があることも大切だと思います。

「[考察]プログラミングに熱中したきっかけ。Kishiさん」編

制限は発明の母。

 

わかったこと

・ゴリゴリに高IQなガリ勉タイプの方がなるわけではない。(つまり誰でも可能)

・理系やら文系やらと世の中は分けるが、べつに文系だからと言ってどうだということもない。(意外と色んな経験が活きる)

・「カッコイイ(憧れ)」×「書いたことがその通りに動く(成果)」によって引っ張られていく。(これはどの分野でも同じでしょう)

・とにかく「やれば」出来る様子。

 

やってみたら意外と「自分の特性の何かに引っかかって」続けていけるもの。

結局、出会い次第で「プログラマーになった」という人もいれば「トラック運転手になった」という人もいる。それほどに、「最初は『特別な適性だ』などと考えなくともよい」のではないか。少なくとも、事前に想像だけで完結して決めつけて避けてしまうよりは。やってみたら意外と「自分の特性の何かに引っかかって」続けていけたなんてこともあるのだから。

 

ステップ

・まずカンタンに作りたいことを目標にする

・すぐに書いて動かす×成果を出す

・トライ&エラーを繰り返す

・これを繰り返す

ということのみ。

「すぐに書いて、すぐに成果を出して、すぐに直して、これを繰り返す。」

このスタイルが続けば習得する。

 

必要な知識は「作りたいことに必要なだけ」覚えればいいのだ。

 

それ以外のことはその時その時にまた新たに覚えればいい。

それである程度動かせるようになって理解力が深まった際に、

「一度、全体知識でも見ておくか」

という具合いでいいのだと思う。

 

自分が経験して習得していった覚え方はそんなものだった。※JSちゃんのことではないぞ!

 

プログラム言語とは

「プログラムってかわいい」ということが学べるぞ。

bandicam-2016-10-27-10-24-05-913

「はしれ!コード学園 第1回「転校生」」CodeIQ/画:ちょまど/シナリオ:セオショージ

プログラム言語の擬人化ということでヘシオドスの神統記に勝るとも劣らないかも。

 

とにかく全体像が学べるかも。

bandicam-2016-10-27-08-56-10-030

「<ゲームを作ろう!>超初心者のためのプログラミング入門- 楽しい趣味のプログラミング -」さま 

内容より古典喜劇の方が気になってしまうぞ。

 

「ツクール×JSちゃん」

bandicam-2016-10-27-09-56-12-377

「トモタカラボ 」さま

「ツクール×JSちゃん」の関係がまさにそのまま通覧できるかな。 

 

 

各プラグラム言語の概要

The・テクニシャン「JS(ジャバスクリプト)」

%e3%83%97%e3%83%ad%e8%a8%80%e8%aa%9ejs%ef%bc%88%e3%82%b8%e3%83%a3%e3%83%90%e3%82%b9%e3%82%af%e3%83%aa%e3%83%97%e3%83%88%ef%bc%89

・「JavaScriptの基本をサルでもわかるようにまとめた【入門用】」

・「JavaScript入門完全攻略ガイド」侍エンジニア(一部登録が必要なページ有り)

・「JavaScriptとは」Code部(一部登録が必要なページ有り)

・「HTMLとCSSがよくわからないあなたへ。歴史を学んで少しだけ理解を深めてみませんか?」Love2Laboさま

 

いつの間にやらWeb界を裏から支配した成り上がり「PHP」

%e3%83%97%e3%83%ad%e8%a8%80%e8%aa%9e%e3%80%8cphp%e3%80%8d

「超初心者必見!PHPとは?」侍エンジニア

 

超新星の勢い「Ruby」

%e3%83%97%e3%83%ad%e8%a8%80%e8%aa%9eruby

「Ruby入門完全攻略ガイド」侍エンジニア

※このRubyこそはツクールの今までのスクリプト言語の大本でRGSS1~3で使われていたという

 

原理的なエンシェントスキル「C言語(C++)」

%e3%83%97%e3%83%ad%e8%a8%80%e8%aa%9ec%e8%a8%80%e8%aa%9e

「【初心者必見】C言語でアプリ開発する前に知っておきたい5つの真実 by 井上 慎也」侍エンジニア

「C言語入門完全攻略ガイド」侍エンジニア

 

万物の言語「Java」

%e3%83%97%e3%83%ad%e8%a8%80%e8%aa%9ejava

「【入門者必見】Javaを学ぶメリットやできることなどを簡単解説!by 侍エンジニア塾ブログ編集部」侍エンジニア

「Java入門完全攻略ガイド」侍エンジニア

 

Mac使いでiPhoneアプリなら「Swift」

%e3%83%97%e3%83%ad%e8%a8%80%e8%aa%9eswift

「Swift入門完全攻略ガイド」侍エンジニア

・地図

・スキル選択装備(スキルメモライズ)

・暦

・交易

・吹き出し

・ホコグラをメニューに使う

・明かり

・マップフォグ

・映画のように上下黒帯

・軍団パーティ

軍団パーティ?

 

※実際にお頼みすることがある場合には、

出来るだけ具体的に『イメージ画像』などを用意してリクエストした方がいいと思うぞ。

メニュー画面ならデザイン画などをなんとなくでも用意したほうが伝わりやすかろうてまったく。

 

↑戻る

 

これは「javaScriptって~どんなのなのだろうか~?」という好奇心から調べた情報の覚書である。

しかし記事にして公開する以上はなにかしら人向けにしようとしてプログラムど素人が

「キミもJSちゃんを覚えてムラクモスタジオで活躍しよう!!」

という体でやらせていただいただけぞ。

寂しさだけが募るぞ。

 

プログラマを知る……

参考「プログラマと付き合う」

(▽Д▼ )

スポンサーリンク/記事直下型2連装無職砲

プロフカードぼたん

-ツクールスタジオ
-