JAVAScript習得のコツ

[Furosiki]

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

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

[トリアコンタン]

こんばんは！

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

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

https://developer.mozilla.org/ja/docs/W ... JavaScript

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

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

あとうまく動かない命令文をご提示頂ければなぜ動かないのかを説明できるかもしれません。

[しぐれん]

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

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

難しいことを書きましたが、何度も書いて練習するのが一番です。
わからなかったら、遠慮せずに質問することも大切です。

[Furosiki]

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

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

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

コード: 全て選択

//
/*
@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');

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

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

    };
})();

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

お二人ともお答えして頂き、誠に有難う御座います。

[トリアコンタン]

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

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

ピクチャの画像そのものを扱っているのは「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

[Furosiki]

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

コード: 全て選択

//
/*
@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');

	//蝙蝠を斜め４５度へ傾ける。
	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の物です。それだと動かない事は初めてしました。
それにしても日本語の書籍では永久に見つからない物もあるんですね。教えて下さりありがとうございました。
また困った事があれば、質問フォーラムに投稿いたします。