JAVAScript習得のコツ

Furosiki
記事: 25
登録日時: 2017年4月02日(日) 13:46

JAVAScript習得のコツ

投稿記事by Furosiki » 2017年5月29日(月) 01:39

前回、トリアコンタンさんから頂いたスクリプトを弄ってみたのですが、
持っているインプレス社出版の「ゲームで学ぶJAVAScript入門」と言う参考書に書かれた命令文を追加しても上手く行きません。
手持ちの参考書にある記述にはHTMLのタグに関する記述が混じっているので、
それがRPGツクールMVのプラグイン制作にどの様に影響するのか分からないので、今一つ、弄れません。
皆さんは、JAvascriptの習得には、どの様な手段を用いて習得したのでしょうか?

一つの参考書から読み解くにも限界があるのではないかと思いますので、
もし宜しければ、RPGツクールMVにお勧めの参考書があればお教えて下さいませ。

アバター
トリアコンタン
記事: 2311
登録日時: 2015年11月10日(火) 21:13
お住まい: きのこ王国
連絡を取る:

Re: JAVAScript習得のコツ

投稿記事by トリアコンタン » 2017年5月29日(月) 04:03

こんばんは!

書籍についてですが、JavaScript(以下JS)の書籍は直接はあまり役に立たないかもしれません。

理由はツクールMVのコアスクリプトがVXAce以前のRGSSの影響を強く受けているので、簡単に言うとあまりJSっぽくないからです。
今のところツクールMVのコアスクリプトそのものを扱った書籍は(多分)ありません。
私も特にJSの書籍を買ったことはなく、JS特有の文法については主に以下のサイトで補いました。

https://developer.mozilla.org/ja/docs/Web/JavaScript/A_re-introduction_to_JavaScript

コアスクリプトをいきなり全部把握しようとすると内容が膨大になってしまうので、まずはタイトル画面など対象を絞って理解を深めていくといいかと思います。

どこまで参考になるかは分かりませんが、ツクールMV発売直後に初めて作成したプラグインです。
https://raw.githubusercontent.com/triacontane/RPGMakerMV/master/TitleNewGameOnly.js

あとうまく動かない命令文をご提示頂ければなぜ動かないのかを説明できるかもしれません。
プラグイン関連のトラブルが発生した際の切り分けと報告の方法です。
http://qiita.com/triacontane/items/2e227e5b5ce9503a2c30

[Blog] : http://triacontane.blogspot.jp/
[Twitter]: https://twitter.com/triacontane/
[GitHub] : https://github.com/triacontane/
アバター
しぐれん
記事: 972
登録日時: 2017年3月28日(火) 22:22
連絡を取る:

Re: JAVAScript習得のコツ

投稿記事by しぐれん » 2017年5月29日(月) 11:53

私は元々はC++使いで、その時の知識をもとにJavaScriptを覚えました。

プログラミングの基本である、順次・分岐・反復の実行を理解することが大切です。
これを専門用語で構造化プログラミングと言います。
これはツクールのイベントコマンドに置き換えると以下のようになります。
・順次
上から下へ、順番に処理が実行されること。
・分岐
特定の条件で、処理がAとBどちらかに分かれること。
イベントコマンドでは、条件分岐がこれに該当します。
・反復
一定の条件の間繰り返すこと。
イベントコマンドでは、繰り返し処理が該当し、一定の条件は条件分岐で組むようになっています。

難しいことを書きましたが、何度も書いて練習するのが一番です。
わからなかったら、遠慮せずに質問することも大切です。
現在、プラグイン依頼はお休み中です。
Furosiki
記事: 25
登録日時: 2017年4月02日(日) 13:46

Re: JAVAScript習得のコツ

投稿記事by Furosiki » 2017年6月01日(木) 03:22

トリアコンタンさん、しぐれんさん、返事に遅れましたが、ご返答ありがとうございました。
>書籍についてですが、JavaScript(以下JS)の書籍は直接はあまり役に立たないかもしれません。
>理由はツクールMVのコアスクリプトがVXAce以前のRGSSの影響を強く受けているので、簡単に言うとあまりJSっぽくないからです。
>今のところツクールMVのコアスクリプトそのものを扱った書籍は(多分)ありません。
なるほど、JAVAScriptでも独自のルールを設けてあるのですか、
そう言えば、RGSSはRuby言語をRPGツクールXP~VXAce向けに調整した物ですし、JAVAScriptもそうならない訳がないですよね。

>コアスクリプトをいきなり全部把握しようとすると内容が膨大になってしまうので、まずはタイトル画面など対象を絞って理解を深めていくといいかと思います。
確かに対象を絞っていくのも手ですよね。
しかし、ファイル一つに対しても膨大なクラスなので、うまく見定められるかどうか分かりませんけどね。

>あとうまく動かない命令文をご提示頂ければなぜ動かないのかを説明できるかもしれません。
ご協力有難う御座います。今、やっているのはあなたから教えて頂いたスクリプトの画像を表示するプラグインで、
習得の為に画像を回転させようととりあえず、指定した角度の分だけ傾ける命令文を追加したと言った物です。
命令文は記述した参考書から探し出した物で、「//蝙蝠を斜め45度へ傾ける。」の所が習得の為に加えた改造箇所です。

コード: 全て選択

//
/*
@PluginDesc テスト用プラグイン
@Author Furoshiki
@help
*/

/*
(function() {//トリアコンタン様提供

ImageManager.loadBitmap = function(folder, filename, hue, smooth) {
    if (filename) {
        var path = folder + encodeURIComponent(filename) + '.png';
        var bitmap = this.loadNormalBitmap(path, hue || 0);
        bitmap.smooth = smooth;
        return bitmap;
    } else {
        return this.loadEmptyBitmap();
    }
};
    };
})();
*/

(function() {//トリアコンタン様提供
    'use strict';

    var _Spriteset_Map_createLowerLayer = Spriteset_Map.prototype.createLowerLayer;

    Spriteset_Map.prototype.createLowerLayer = function() {
        // createLowerLayerの元の処理を呼び出します。
        _Spriteset_Map_createLowerLayer.apply(this, arguments);

        // 画像を格納する箱を作成します。
        this._testSprite = new Sprite();

        // 箱に実際の画像をロードします。(ピクチャフォルダのファイル名を指定。拡張子不要)
        this._testSprite.bitmap = ImageManager.loadPicture('Bat');

   //蝙蝠を斜め45度へ傾ける。
//   this._testSprite.rotate = 45;
   this.rotate(Math.PI / 4);

        // 箱を画面に追加します。
        this.addChild(this._testSprite);

    };
})();


>私は元々はC++使いで、その時の知識をもとにJavaScriptを覚えました。
>プログラミングの基本である、順次・分岐・反復の実行を理解することが大切です。
>難しいことを書きましたが、何度も書いて練習するのが一番です。
私はC++とLuaをかじった事がありますが、それらは何所のプログラムでも同じですから、
そこから何とか形に出来る様、努力したい物ですね。

お二人ともお答えして頂き、誠に有難う御座います。
アバター
トリアコンタン
記事: 2311
登録日時: 2015年11月10日(火) 21:13
お住まい: きのこ王国
連絡を取る:

Re: JAVAScript習得のコツ

投稿記事by トリアコンタン » 2017年6月01日(木) 19:19

お疲れさまです。
こういう場合のコツは「元の処理から似たようなことをやっている箇所を見付ける」ことです。

画像を傾けるのは既存処理ではピクチャで実現しています。(イベントコマンド「ピクチャの回転」で使用します)
そこで、その処理を参考にしましょう。

ピクチャの画像そのものを扱っているのは「Sprite_Picture」です。
「this._testSprite」の型は「Sprite_Picture」の親である「Sprite」なので同じ書き方ができると推測できます。
そこで、rpg_sprite.jsの以下の処理を見てみてください。

コード: 全て選択

Sprite_Picture.prototype.updateOther = function() {
    ....
    this.rotation = picture.angle() * Math.PI / 180;
};


「Math.PI / 180」は弧度法に変換するために必要な記述です。
よって今回のテストプラグインに合わせるとこうなります。

コード: 全て選択

this._testSprite.rotation = 45 * Math.PI / 180;


rotationプロパティはPixi.jsによって定義されているので、残念ながら日本語の書籍を探してもおそらく見付からないと思います。

なお、rotateメソッドはHTML5のCanvasに定義されていますので書籍に載っていたのはこれかもしれません。
http://www.html5.jp/canvas/ref/method/rotate.html
プラグイン関連のトラブルが発生した際の切り分けと報告の方法です。
http://qiita.com/triacontane/items/2e227e5b5ce9503a2c30

[Blog] : http://triacontane.blogspot.jp/
[Twitter]: https://twitter.com/triacontane/
[GitHub] : https://github.com/triacontane/
Furosiki
記事: 25
登録日時: 2017年4月02日(日) 13:46

Re: JAVAScript習得のコツ

投稿記事by Furosiki » 2017年6月05日(月) 20:58

トリアコンタンさん、分からない所をご解説して頂き、誠に有難うございます。
知らない記述は推測して記入するのですね。分かりました。
教えて頂いた通りに記入した所、見事に回転致しました!
一応、現在のコードは以下の様になっています。
拡大縮小・中心点の位置・透明度を実現する為の手段は、自身の手で見つけました。
今は画像の差し替えやそれをせずにアニメーションできないか模索している最中ですが、
いつかは自分でプラグインを一から製作できる様になれたらいいかなと思っています。

コード: 全て選択

//
/*
@PluginDesc テスト用プラグイン
@Author Furoshiki
@help
*/

/*
(function() {//トリアコンタン様提供

ImageManager.loadBitmap = function(folder, filename, hue, smooth) {
    if (filename) {
        var path = folder + encodeURIComponent(filename) + '.png';
        var bitmap = this.loadNormalBitmap(path, hue || 0);
        bitmap.smooth = smooth;
        return bitmap;
    } else {
        return this.loadEmptyBitmap();
    }
};
    };
})();
*/

(function() {//トリアコンタン様提供
    'use strict';


    var _Spriteset_Map_createLowerLayer = Spriteset_Map.prototype.createLowerLayer;

    Spriteset_Map.prototype.createLowerLayer = function() {
        // createLowerLayerの元の処理を呼び出します。
        _Spriteset_Map_createLowerLayer.apply(this, arguments);

        // 画像を格納する箱を作成します。
        this._testSprite = new Sprite();
        this._testSprite2 = new Sprite();
        this._testSprite3 = new Sprite();

        // 箱に実際の画像をロードします。(ピクチャフォルダのファイル名を指定。拡張子不要)
        this._testSprite.bitmap = ImageManager.loadPicture('Bat');

   //蝙蝠を斜め45度へ傾ける。
   this._testSprite.rotation = 45 * Math.PI / 180;
   this._testSprite.x = 100;
   this._testSprite.y = 200;
   this._testSprite.scale.x = 1.5;
   this._testSprite.scale.y = 0.5;
        // 箱を画面に追加します。
        this.addChild(this._testSprite);

   // 二つ目の画像を扱う
        this._testSprite2.bitmap = ImageManager.loadPicture('Actor1_3');

   this._testSprite2.rotation = -45 * Math.PI / 180;
   this._testSprite2.x = 500;
   this._testSprite2.y = 150;
   this._testSprite2.scale.x = -1;
   this._testSprite2.scale.y = 1;
        // 箱を画面に追加します。
        this.addChild(this._testSprite2);

   // 三つ目の画像を扱う
        this._testSprite3.bitmap = ImageManager.loadPicture('Rat');

   this._testSprite3.rotation = 450 * Math.PI / 180;
   this._testSprite3.x = 400;
   this._testSprite3.y = 150;
   this._testSprite3.scale.x = -1;
   this._testSprite3.scale.y = 1;
   this._testSprite3.anchor.x = -0.5;//中心点を画像の半分*半分にしたい。
   this._testSprite3.anchor.y = 0.5;
   this._testSprite3.alpha = 0.8;
        this.addChild(this._testSprite3);
})();



>rotationプロパティはPixi.jsによって定義されているので、残念ながら日本語の書籍を探してもおそらく見付からないと思います。

>なお、rotateメソッドはHTML5のCanvasに定義されていますので書籍に載っていたのはこれかもしれません。
確かに私が使っていた物はCanvasの物です。それだと動かない事は初めてしました。
それにしても日本語の書籍では永久に見つからない物もあるんですね。教えて下さりありがとうございました。
また困った事があれば、質問フォーラムに投稿いたします。

“MV:質問” へ戻る