Pace

Ankömmling

  • »Pace« ist der Autor dieses Themas

Motto: Lass dir nie von Jemandem einreden, dass du etwas nicht kannst. Denn wenn jemand etwas nicht kann, dann versucht er dir einzureden, dass du es auch nicht kannst. Und wenn du etwas willst, dann mach es einfach.

  • Nachricht senden

1

Mittwoch, 3. Januar 2018, 17:36

Andere Pixi.js-Filter hinzufügen

Hallo zusammen,

hab mich etwas mit Pixi beschäftigt und gesehen, dass ein paar Filter bereitgestellt sind wie z.B. der BlurFilter.
All diese Filter sind problemlos nutzbar, nur hätte ich gerne weitere Filter, wie z.B. den OutlineFilter.
Pixi stellt diese online bereit GitHub - pixijs/pixi-filters: A collection of filters for pixi.js v4.
Hab allerdings keine Ahnung wie man die nun hinzufügen soll. Als einfaches Plugin funktioniert das nämlich leider schon mal gar nicht.
Muss ja aber irgendwie möglich sein.
Hat irgendjemand AHnung davon oder eine Idee, wie man das anstellt?

Besten Dank im Voraus :)

2

Donnerstag, 4. Januar 2018, 06:23

Interessante Frage.
Gute Morgen, was hast Du denn schon ausprobiert? Kannst Du mal deinen bisherigen Code zeigen? Das wäre super.

Ich habe mich auch mal drangesetzt, aber irgendwas klappt bei der Bestimmung der Randpixel nicht.

Spoiler: Plugincode: Filename OutlineFilter.js

JavaScript Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
"use strict";
//=============================================================================
// OutlineFilter.js
//=============================================================================
 
 /*:
 * @plugindesc This applies an outline effect to your Characters on Map.
 * @author mishaa (original shader code), Playm (mv plugin)
 * 
 * @param Thickness
 * @desc Outline tickness
 * @default 8
 * 
 * @help This plugin does not provide plugin commands. Not compatible with other filters.
 */
 
 /**
 * OutlineFilter, originally by mishaa
 * http://www.html5gamedevs.com/topic/10640-outline-a-sprite-change-certain-colors/?p=69966
 * http://codepen.io/mishaa/pen/emGNRB
 *
 * @class PIXI.OutlineFilter
 * @extends PIXI.AbstractFilter
 * @param {number} [thickness=1] The tickness of the outline. Make it 2 times more for resolution 2
 * @param {number} [color=0x000000] The color of the outline.
 * @param {number} [quality=0.1] The quality of the outline from `0` to `1`, using a higher quality
 *        setting will result in slower performance and more accuracy.
 *
 * @example
 *   someSprite.filters = [ new OutlineFilter(9, 0xFF0000, 0.2) ];
 */
PIXI.OutlineFilter = function( thickness, color, quality )
{
    // super class constructor
    PIXI.AbstractFilter.call( this );
 
    this.thickness = thickness;
    var samples =  Math.max(
        quality * PIXI.OutlineFilter.MAX_SAMPLES,
        PIXI.OutlineFilter.MIN_SAMPLES
    );
 
    this.passes = [this];
 
    // set the uniforms
    this.uniforms.thickness    = {type: '2fv', value: new Float32Array([0, 0])};
    this.uniforms.outlineColor = {type: '4fv', value: new Float32Array([0, 0, 0, 1])};
    // set uniform color
    this.color = color;
 
    // fragment shader code as lines (later compiled by PIXI)
    this.fragmentSrc = [
        'precision mediump float;',
        'varying vec2 vTextureCoord;',
        'uniform sampler2D uSampler;',
 
        'uniform vec2 thickness;',
        'uniform vec4 outlineColor;',
        'uniform vec4 filterClamp;',
 
        'const float DOUBLE_PI = 3.14159265358979323846264 * 2.;',
 
        'void main(void) {',
        '    vec4 ownColor = texture2D(uSampler, vTextureCoord);',
        '    vec4 curColor;',
        '    float maxAlpha = 0.;',
        '    vec2 displaced;',
        '    for (float angle = 0.; angle <= DOUBLE_PI; angle += ' + (Math.PI * 2 / samples).toFixed(7) + ') {',
        '        displaced.x = vTextureCoord.x + thickness.x * cos(angle);',
        '        displaced.y = vTextureCoord.y + thickness.y * sin(angle);',
        '        curColor = texture2D(uSampler, clamp(displaced, filterClamp.xy, filterClamp.zw));',
        '        maxAlpha = max(maxAlpha, curColor.a);',
        '    }',
        '    float resultAlpha = max(maxAlpha, ownColor.a);',
        '    gl_FragColor = vec4((ownColor.rgb + outlineColor.rgb * (1. - ownColor.a)) * resultAlpha, resultAlpha);',
        '}'
    ];
};
 
PIXI.OutlineFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.OutlineFilter.prototype.constructor = PIXI.OutlineFilter;
 
PIXI.OutlineFilter.prototype.apply = function(filterManager, input, output, clear) {
	this.uniforms.thickness.value[0] = this.thickness / input.size.width;
	this.uniforms.thickness.value[1] = this.thickness / input.size.height;
 
	filterManager.applyFilter(this, input, output, clear);
}
/**
* The color of the glow.
* @member {number}
* @default 0x000000
*/
Object.defineProperty(PIXI.OutlineFilter.prototype, 'color', {
    get: function() {
        return this.rgb2hex(this.uniforms.outlineColor.value);
    },
    set: function(value) {
        this.hex2rgb(value, this.uniforms.outlineColor.value);
    }
});
 
PIXI.OutlineFilter.prototype.hex2rgb = function(hex, out)
{
    out = out || [];
 
    out[0] = ((hex >> 16) & 0xFF) / 255;
    out[1] = ((hex >> 8) & 0xFF) / 255;
    out[2] = (hex & 0xFF) / 255;
 
    return out;
};
PIXI.OutlineFilter.prototype.rgb2hex = function(rgb)
{
    return (((rgb[0] * 255) << 16) + ((rgb[1] * 255) << 8) + (rgb[2] * 255 | 0));
}
 
PIXI.OutlineFilter.MIN_SAMPLES = 1;
PIXI.OutlineFilter.MAX_SAMPLES = 100;
/* ********************************************************
 *   MV Plugin Stuff
 * ***************************************************** */
(function() {
    var parameters = PluginManager.parameters('OutlineFilter');
    var thickness = Number(parameters['Thickness'] || 8);
    var _Sprite_Character_initialize = Sprite_Character.prototype.initialize;
 
    Sprite_Character.prototype.initialize = function(character) {
        _Sprite_Character_initialize.call(this, character);
	this.filters = [ new PIXI.OutlineFilter(thickness, 0xFF0000, 0.8) ];
    };
})();
zum Lesen den Text mit der Maus markieren


Wenn Du in meinem Code in Zeile 74 das "curColor.a" durch ein "0.4" ersetzt, siehst Du, das er tatsächlich die Outline zeichnen würde (hier erkennt er dann alle freien Pixel als Randpixel), aber bei der Bestimmung der Randpixel irgendwas nicht funktioniert. Ich habe aber eigentlich den FragmentShader so übernommen, wie er auf GitHub stand.

Das Problem ist der neue Shader an sich. Die für den MV bereits implementierten Shader: RGBSplitFilter, CrossHatchFilter, DotScreenFilter, ColorStepFilter, TwistFilter, SepiaFilter, InvertFilter, BlurFilter, PixelateFilter, DisplacementFilter, GrayFilter, ColorMatrixFilter und AlphaFilter sollten alle funktionieren. Habe einmal SepiaFilter ausprobiert und der hat problemlos geklappt.
Vielleicht haben noch andere Ideen. Das Problem mit GLSL-Code ist, dass er ja so wahnsinnig schwer zu debuggen ist. :-/

Pace

Ankömmling

  • »Pace« ist der Autor dieses Themas

Motto: Lass dir nie von Jemandem einreden, dass du etwas nicht kannst. Denn wenn jemand etwas nicht kann, dann versucht er dir einzureden, dass du es auch nicht kannst. Und wenn du etwas willst, dann mach es einfach.

  • Nachricht senden

3

Freitag, 5. Januar 2018, 04:39

Also ich hab mal probiert den Code vom OutlineFilter direkt in die Pixi.js vom Maker einzusetzen und dementsprechend umzuformen wie die anderen schon vorhandenen Filter.
Und dann hab ich versucht mich im Internet schlau zu machen und hab den von mir umgeformten Code versucht in einer eigenen Plugin-js-Datei umzusetzen.
Das hat dann aber auch eher gar nicht geklappt. Zu viele Fehler, die ich nicht mehr zurückverfolgen konnte.

Spoiler

(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.PIXI = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){

/**
* OutlineFilter, originally by mishaa
* ?p=69966
* pixi outline shader<br>
* ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/outline.png)
*
* @class
* @extends PIXI.Filter
* @memberof PIXI.filters
*
* @example
* someSprite.shader = new OutlineFilter(9, 0xFF0000);
*/

var OutlineFilter = function (_core$Filter) {
_inherits(OutlineFilter, _core$Filter);

/**
* @param {number} [thickness=1] The thickness of the outline. Make it 2 times more for resolution 2
* @param {number} The color of the outline
* @param {number} [quality=0.1] The quality of the outline from `0` to `1`, using a higher quality
* setting will result in slower performance and more accuracy.
*/

function OutlineFilter(thickness, color, quality) {
_classCallCheck(this, OutlineFilter);

var _this = _possibleConstructorReturn(this, _core$Filter.call(this));

const _samples = Math.max(quality * OutlineFilter.MAX_SAMPLES, OutlineFilter.MIN_SAMPLES);
const _angleStep = (Math.PI * 2 / _samples).toFixed(7);
super(vertex, fragment.replace(/\$\{_angleStep\}/, _angleStep));
_this.uniforms.thickness = new Float32Array([0, 0]);
/**
* The thickness of the outline.
* @member {number}
* @default 1
*/
_this.thickness = thickness || 1;
_this.uniforms.outlineColor = new Float32Array([0, 0, 0, 1]);
_this.color = color || 0x000000;
_this.quality = quality || 0.1;

return _this;
}

/**
* Applies the filter.
*
* @param {PIXI.FilterManager} filterManager - The manager.
* @param {PIXI.RenderTarget} input - The input target.
* @param {PIXI.RenderTarget} output - The output target.
* @param {PIXI.RenderTarget} clear - The clear target?
*/

OutlineFilter.prototype.apply = function apply(filterManager, input, output) { //,clear
this.uniforms.thickness[0] = this.thickness / input.size.width;
this.uniforms.thickness[1] = this.thickness / input.size.height;
filterManager.applyFilter(this, input, output); //,clear
};
/**
* The color of the outline.
* @member {number}
* @default 0x000000
*/
_createClass(OutlineFilter, [{
key: 'color',
get: function get() {
return PIXI.utils.rgb2hex(this.uniforms.outlineColor);
},
set: function set(value) {
PIXI.utils.hex2rgb(value, this.uniforms.outlineColor);
}
}, {

/**
* Sets the quality of outline.
*
* @member {number}
* @default 0.1
*/

key: 'quality',
get: function get() {
return this.quality;
},
set: function set(value) {
this.quality = value;
}
}]);
return OutlineFilter;
}(core.Filter);

/**
* The minimum number of samples for rendering outline.
* @static
* @member {number} MIN_SAMPLES
* @memberof PIXI.filters.OutlineFilter
* @default 1
*/
OutlineFilter.MIN_SAMPLES = 1;
/**
* The maximum number of samples for rendering outline.
* @static
* @member {number} MAX_SAMPLES
* @memberof PIXI.filters.OutlineFilter
* @default 100
*/
OutlineFilter.MAX_SAMPLES = 100;

exports.default = OutlineFilter;

},{}],16:[function(require,module,exports){ // "../../core":65,"path":25
//'use strict';

//exports.__esModule = true;



var _OutlineFilter = require('./outline/OutlineFilter');

Object.defineProperty(exports, 'OutlineFilter', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_OutlineFilter).default;
}
});

var _core = require('../../core');

var core = _interopRequireWildcard(_core);

var _path = require('path');

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }


},{"./outline/OutlineFilter":8}]},{},[16])(16)
});
zum Lesen den Text mit der Maus markieren


Das ist jetzt der Code von meinem Plugin. So ähnlich hatte ichs halt ins Pixi.js eingefügt.
Das ist aber großer Käse ^^
Und als ich es noch etwas ordentlicher im Pixi.js drinstehen hatte, kam kein Fehler, aber der Maker hat bei Spielstart nie geladen. War also die ganze Zeit Blackscreen.
Keine Ahnung, ob das jetzt näher an oder weiter weg von der Lösung war

Aber dein Lösungsansatz sieht ja auch echt interessant aus und sieht im Gegensatz zu meinem auch überragend gut aus xD
Hast auf jeden Fall schon mal mehr Ahnung als ich, so viel wie du umgeschrieben hast.
Deinen Code kriege ich bei mir aber irgendwie auch gar nicht zum laufen.
Da kommen erstmal viele Warnungen, dass der AbstractFilter in Filter umbenannt wurde.
Und dann kommt ein Pixi.js Error wegen der Shader-Initialisierung.

4

Freitag, 5. Januar 2018, 05:52

Der Code von dir ist ziemlich unübersichtlich. Kannst Du den nochmal mit [code][/code] tags drumherum posten, damit die Einrückungen nicht verloren gehen?
Mit [code=JavaScript]alert("Hallo Welt");[/code] bekommst Du noch Syntaxhighlighting dazu.

Zitat

Das ist jetzt der Code von meinem Plugin. So ähnlich hatte ichs halt ins Pixi.js eingefügt.
Falls dich das Thema Plugin an sich noch interessiert; ich habe in diesem Post mal erklärt, wie man sich eigene Plugins schreibt, die man dann im PluginManager verwenden kann: :folder-open: Tutorial-Bereich » Eigene Plugins erstellen

Zitat

Deinen Code kriege ich bei mir aber irgendwie auch gar nicht zum laufen.
Hast Du eine neue Datei "OutlineFilter.js" im Pluginordner angelegt (wichtig ist die Dateiendung .js und nicht etwa .txt) und dort den Quellcode reinkopiert?

Zitat

Da kommen erstmal viele Warnungen, dass der AbstractFilter in Filter umbenannt wurde.
Und dann kommt ein Pixi.js Error wegen der Shader-Initialisierung.
Oh, welche Pixi-Version hast Du denn? Bei mir steht im Header:

Quellcode

1
2
3
4
5
 * pixi.js - v2.2.10
 * Copyright (c) 2012-2014, Mat Groves
 * http://goodboydigital.com/
 *
 * Compiled: 2016-01-31

Aber ich habe den Maker auch nicht über Steam also vielleicht habe ich ein paar Updates verpasst und der MV benutzt inzwischen eine andere Pixi-Version? Was steht denn bei dir?

Pace

Ankömmling

  • »Pace« ist der Autor dieses Themas

Motto: Lass dir nie von Jemandem einreden, dass du etwas nicht kannst. Denn wenn jemand etwas nicht kann, dann versucht er dir einzureden, dass du es auch nicht kannst. Und wenn du etwas willst, dann mach es einfach.

  • Nachricht senden

5

Freitag, 5. Januar 2018, 14:14

Zitat

Der Code von dir ist ziemlich unübersichtlich. Kannst Du den nochmal mit code][/code tags drumherum posten, damit die Einrückungen nicht verloren gehen?
Mit code=JavaScript]alert("Hallo Welt");[/code bekommst Du noch Syntaxhighlighting dazu.

Jo stimmt, hatte ich vergessen. War schon lange nicht mehr hier aktiv^^


Hier nochmal der Code:
Spoiler

JavaScript Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.PIXI = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 
/**
 * OutlineFilter, originally by mishaa
 * http://www.html5gamedevs.com/topic/10640-outline-a-sprite-change-certain-colors/?p=69966
 * http://codepen.io/mishaa/pen/emGNRB<br>
 * ![original](../tools/screenshots/dist/original.png)![filter](../tools/screenshots/dist/outline.png)
 *
 * @class
 * @extends PIXI.Filter
 * @memberof PIXI.filters
 *
 * @example
 *  someSprite.shader = new OutlineFilter(9, 0xFF0000);
 */
 
var OutlineFilter = function (_core$Filter) {
    _inherits(OutlineFilter, _core$Filter);
 
	/**
	 * @param {number} [thickness=1] The thickness of the outline. Make it 2 times more for resolution 2
	 * @param {number} [color=0x000000] The color of the outline
	 * @param {number} [quality=0.1] The quality of the outline from `0` to `1`, using a higher quality
	 *        setting will result in slower performance and more accuracy.
	 */
 
	function OutlineFilter(thickness, color, quality) {
		_classCallCheck(this, OutlineFilter);
 
		var _this = _possibleConstructorReturn(this, _core$Filter.call(this));
 
        const _samples = Math.max(quality * OutlineFilter.MAX_SAMPLES, OutlineFilter.MIN_SAMPLES);
        const _angleStep = (Math.PI * 2 / _samples).toFixed(7);
        super(vertex, fragment.replace(/\$\{_angleStep\}/, _angleStep));
        _this.uniforms.thickness = new Float32Array([0, 0]);
        /**
         * The thickness of the outline.
         * @member {number}
         * @default 1
         */
        _this.thickness = thickness || 1;
        _this.uniforms.outlineColor = new Float32Array([0, 0, 0, 1]);
        _this.color = color || 0x000000;
        _this.quality = quality || 0.1;
 
		return _this;
	}
 
	/**
     * Applies the filter.
     *
     * @param {PIXI.FilterManager} filterManager - The manager.
     * @param {PIXI.RenderTarget} input - The input target.
     * @param {PIXI.RenderTarget} output - The output target.
	 * @param {PIXI.RenderTarget} clear - The clear target?
     */
 
    OutlineFilter.prototype.apply = function apply(filterManager, input, output) { //,clear
        this.uniforms.thickness[0] = this.thickness / input.size.width;
        this.uniforms.thickness[1] = this.thickness / input.size.height;
        filterManager.applyFilter(this, input, output); //,clear
    };
    /**
     * The color of the outline.
     * @member {number}
     * @default 0x000000
     */
	_createClass(OutlineFilter, [{
		key: 'color',
		get: function get() {
			return PIXI.utils.rgb2hex(this.uniforms.outlineColor);
		},
		set: function set(value) {
			PIXI.utils.hex2rgb(value, this.uniforms.outlineColor);
		}
	}, {
 
		/**
         * Sets the quality of outline.
         *
         * @member {number}
         * @default 0.1
         */
 
		key: 'quality',
		get: function get() {
			return this.quality;
		},
		set: function set(value) {
			this.quality = value;
		}
	}]);
	return OutlineFilter;
}(core.Filter);
 
/**
 * The minimum number of samples for rendering outline.
 * @static
 * @member {number} MIN_SAMPLES
 * @memberof PIXI.filters.OutlineFilter
 * @default 1
 */
OutlineFilter.MIN_SAMPLES = 1;
/**
 * The maximum number of samples for rendering outline.
 * @static
 * @member {number} MAX_SAMPLES
 * @memberof PIXI.filters.OutlineFilter
 * @default 100
 */
OutlineFilter.MAX_SAMPLES = 100;
 
exports.default = OutlineFilter;
 
},{}],16:[function(require,module,exports){ // "../../core":65,"path":25
//'use strict';
 
//exports.__esModule = true;
 
 
 
var _OutlineFilter = require('./outline/OutlineFilter');
 
Object.defineProperty(exports, 'OutlineFilter', {
  enumerable: true,
  get: function get() {
    return _interopRequireDefault(_OutlineFilter).default;
  }
});
 
var _core = require('../../core');
 
var core = _interopRequireWildcard(_core);
 
var _path = require('path');
 
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
 
},{"./outline/OutlineFilter":8}]},{},[16])(16)
});
zum Lesen den Text mit der Maus markieren

Der Code sieht im Übrigen nur so aus wie er aussieht, weil ich den Code von Github 1:1 übernommen habe und so wie die Filter im Pixi.js geschrieben sind ungefähr angepasst habe.



Zitat

Falls dich das Thema Plugin an sich noch interessiert; ich habe in diesem Post mal erklärt, wie man sich eigene Plugins schreibt, die man dann im PluginManager verwenden kann:

Vielen Dank für den Tipp, aber ich hab hab schon viele eigene, auch teils komplexe, Plugins geschrieben, die alle einwandfrei laufen. Kenn mich damit also bestens aus :)



Zitat

Hast Du eine neue Datei "OutlineFilter.js" im Pluginordner angelegt (wichtig ist die Dateiendung .js und nicht etwa .txt) und dort den Quellcode reinkopiert?

Das erklärt sich dann ja nun auch von selbst ;)
Aber der Name ist ja grundsätzlich egal.


Zitat

pixi.js - v2.2.10

Lol, ok das erklärt wahrscheinlich einiges. Die akutelle Pixi.js-Version vom MV ist 4.5.4

6

Samstag, 6. Januar 2018, 05:24

Zitat

Lol, ok das erklärt wahrscheinlich einiges. Die akutelle Pixi.js-Version vom MV ist 4.5.4

Bild


Hm, vielleicht sollte ich mal auf MV 1.5.0 updaten. :-x
Weißt Du, ob es möglich ist mehrere MV-Versionen paralell auf einem Computer zu betreiben, zwecks Pluginsupport?

Zitat

Der Code sieht im Übrigen nur so aus wie er aussieht, weil ich den Code von Github 1:1 übernommen habe und so wie die Filter im Pixi.js geschrieben sind ungefähr angepasst habe.
Hast Du anschließend nochmal Babel drüberlaufen lassen? Der Code sieht irgendwie komisch generiert aus.
Verlink mal die exakte Github-URL, woher der Code stammt. Ich glaube ich habe meinen aus einem anderen Branch geholt.

Und wenn Du dabei bist - kannst Du mal deine pixi.js (ohne Modifikationen) hier anhängen?

Zitat

Aber der Name ist ja grundsätzlich egal.
In RMMV Version 1.4 diente der Dateiname noch als Schlüssel für Plugin-Variablen (also wenn ich im Pluginmanager die Thickness einstellen wollte). Weiß nicht, ob das in neueren Makerversionen jetzt anders gelöst ist.

Pace

Ankömmling

  • »Pace« ist der Autor dieses Themas

Motto: Lass dir nie von Jemandem einreden, dass du etwas nicht kannst. Denn wenn jemand etwas nicht kann, dann versucht er dir einzureden, dass du es auch nicht kannst. Und wenn du etwas willst, dann mach es einfach.

  • Nachricht senden

7

Donnerstag, 11. Januar 2018, 21:58

Ich wollte schon viel früher antworten, hatte aber Probleme mich auf RPG-Studio anzumelden. Aber jetzt geht's ja wieder :)


Zitat

Weißt Du, ob es möglich ist mehrere MV-Versionen paralell auf einem Computer zu betreiben, zwecks Pluginsupport?
Hab leider keine Ahnung.


Zitat

Hast Du anschließend nochmal Babel drüberlaufen lassen? Der Code sieht irgendwie komisch generiert aus.
Verlink mal die exakte Github-URL, woher der Code stammt. Ich glaube ich habe meinen aus einem anderen Branch geholt.

Und wenn Du dabei bist - kannst Du mal deine pixi.js (ohne Modifikationen) hier anhängen?
xD nein kein Babel.
Hier der Link zur OutlineFilter.js, die ich genutzt hab: OutlineFilter.js
Meine pixi.js ist angehängt. Da sollten keine Veränderungen enthalten sein.


Zitat

In RMMV Version 1.4 diente der Dateiname noch als Schlüssel für Plugin-Variablen (also wenn ich im Pluginmanager die Thickness einstellen wollte). Weiß nicht, ob das in neueren Makerversionen jetzt anders gelöst ist.
Also bei mir nicht. Hab schon von Anfang an meine Dateien benannt, wie ich wollte. Hab auf nichts geachtet, außer dass der Name für mich entsprechend Sinn macht.
Und auf Plugin-Variablen zuzugreifen hat ja nichts mit dem Dateinamen zu tun.
Du musst dafür einfach nur entsprechende Sachen in einen Kommentar am Anfang der Datei verfassen:
Spoiler

Quellcode

1
2
3
4
5
/*:
 * @param bespielVariable
 * @desc Dieser Parameter beeinflusst nichts.
 * @default 42
 */
zum Lesen den Text mit der Maus markieren
»Pace« hat folgende Datei angehängt:
  • pixi.js (1,34 MB - 4 mal heruntergeladen - zuletzt: 29. Januar 2018, 03:04)

8

Donnerstag, 11. Januar 2018, 22:33

Zitat

hatte aber Probleme mich auf RPG-Studio anzumelden. Aber jetzt geht's ja wieder :)

Hab die Mail bekommen. :3

Zitat

Und auf Plugin-Variablen zuzugreifen hat ja nichts mit dem Dateinamen zu tun.
Du musst dafür einfach nur entsprechende Sachen in einen Kommentar am Anfang der Datei verfassen
Und wie greifst Du dann im Code auf diesen Parameter zu?

Zitat

Meine pixi.js ist angehängt.
Hm, ja die sieht schon ein bisschen anders aus. Vom kurzen Draufschauen, sollte sich der Filter-Code aber relativ einfach in 4.5-kompatible umschreiben lassen. Ich muss mal gucken, wann ich die Tage dafür Zeit finde.

Pace

Ankömmling

  • »Pace« ist der Autor dieses Themas

Motto: Lass dir nie von Jemandem einreden, dass du etwas nicht kannst. Denn wenn jemand etwas nicht kann, dann versucht er dir einzureden, dass du es auch nicht kannst. Und wenn du etwas willst, dann mach es einfach.

  • Nachricht senden

9

Samstag, 13. Januar 2018, 23:55

Zitat

Hab die Mail bekommen. :3
Ohh, cool. Danke :)
Hab schon nicht mehr dran geglaubt, dass die Mail angekommen ist^^


Zitat

Und wie greifst Du dann im Code auf diesen Parameter zu?
Ah, jetzt weiß ich was du meinst, glaub ich.
Also so greifst du darauf zu:
Spoiler

JavaScript Quellcode

1
2
var parameters = PluginManager.parameters('BeispielName');
var beispielVariable = toNumber(parameters['beispielVariable'], 42);
zum Lesen den Text mit der Maus markieren
In der ersten Zeile muss man den Namen der Datei hinschreiben. Also in dem Fall "BeispielName". Die Datei müsste dann dementsprechend "BeispielName.js" heißen. Aber dennoch kannst du die Datei ja benennen wie du willst, musst es dann nur in der Datei selbst passend umändern, falls du die Parametereingabe vom Maker nutzt.


Zitat

Hm, ja die sieht schon ein bisschen anders aus. Vom kurzen Draufschauen, sollte sich der Filter-Code aber relativ einfach in 4.5-kompatible umschreiben lassen. Ich muss mal gucken, wann ich die Tage dafür Zeit finde.
Ja, kein Stress. Ich hab Zeit :)
Danke schon mal herzlichst für deine Mühe.

Verwendete Tags

Filter, Pixi, Pixi.js, Plugin

Social Bookmarks