How to Extends / Alias / Overwrite existing class in MZ/ ES6 [Tutorial]

nio kasgami · 2020-07-09T23:34:26+0900

Hi there! As MZ is now officially confirmed to be full ES6 us programmer can now use the ES6 javascript as the official javascript coding standard. ES6? what is the differences between ES5? Well here's a quick look at how class are defined in ES5 and ES6 Code: // ES5 class function Scene_Dummy() { this.initialize.apply(this, arguments); } Scene_Dummy.prototype = Object.create(Scene_Base.prototype); Scene_Dummy.prototype.constructor = Scene_Dummy; Scene_Dummy.prototype.initialize = function(){ Scene_Base.prototype.initialize.call(this); }; Scene_Dummy.prototype.createFadeSprite = function(white){ Scene_Base.prototype.createFadeSprite.call(this, white); }; // ES6 class class Scene_Dummy extends Scene_Base { constructor(){ super(); this.initialize.apply(this,arguments); // should not be existing anymore for MZ but just in case } initialize(){ super.initialize(); } createFadeSprite(white){ super.createFadeSprite(white); } } As you can see, it's make the code WAY more clean and shortened! Although now you might ask : Do I use the same syntax when I Overwrite, Alias or extends an existing class? The short answer is : Yes and no. the longer answer is No since Class in ES6 are considerate final and can't be redeclared so if you did Code: class Something { } class Something { } It would throw an error of duplicate member. So how do you actually extends existing class then??? The short answer : The good old MV way! The long answer : ES6 is just syntactic sugar and in concept is still ES5 prototype class and still behave like ES5 just more 'stricter' and prettified. so here's the method to overwrite/ alias and extends an existing class! Code: // alias const alias = Scene_Base.prototype.createFadeSprite; Scene_Base.prototype.createFadeSprite = (white) => { // Just a shortend for 'function' alias.call(this, white); // new content }; // Overwrite Scene_Base.prototype.createFadeSprite = (white) => { // Just a shortend for 'function' // new overwritten content }; // Extends existing class. Scene_Base.prototype.newFunction = () => { // content }; From @Galenmereth He showed me how to extends existing class using ES6 syntax thanks to him! Code: // named function. class Scene_Alias extends Scene_Base { create(){ super.create(); this.something(); } something(){ } } Scene_Base = Scene_Alias; // Will do the same thing than the es5 counterpart without having a global! // anonymous class for avoid nameclashing. Scene_Base = class extends Scene_Base { constructor(){ super(); } create(){ super.create(); this.something(); } something(){ } } EXTRA NOTE : Every function from ES5 will still work so you can still declare class like how it worked in MV! On That I hope it helped you and will remove any worries you had for MZ plugin development! Happy Game dev! On a quick note : I know it's very basic ES6 programming but for people using MZ they might google : how to extends function in MZ.

● ARCHIVED · READ-ONLY

Started by nio kasgami Jul 9, 2020, 02:34 PM 113 posts Page 6 of 6 View original ↗

Hudell

#101 Aug 20, 2020, 04:25 AM Source

I'm making a core plugin for all of my plugins, but it'll also be available for anyone else who wants to use the same core.
Ossra

#102 Aug 20, 2020, 04:39 AM Source

@Hudell Aah, neatness. Kind of curious as to how the core plugin looks. :o
Tsukihime

#103 Aug 20, 2020, 05:47 AM Source

Lol imagine everyone's projects looking like

HudellCore
OssraCore
DoubleCore
NioCore
SolarCore
HimeCore

cause we all have our own preference for aliasing classes using class syntax
Ossra

#104 Aug 20, 2020, 05:58 AM Source

Yeah, basically, heh. I have whittled the framework plugin I have been tinkering on down to around a hundred lines of code, or even a bit smaller should I not need a few features. So I could cram all the code I need into each plugin, or I could toss out a framework plugin. Not certain which direction I will go. I kind of feel like cramming the code -- of any length -- into each plugin is a waste, but I am also not entirely sure I want to go the framework route ... blarg.

nio kasgami

#105 Aug 20, 2020, 06:12 AM Source

afterseing the Cyclone engine that Hudell was working on. I was like : wow his plugins does everything my core do but better. So my idea will be to use the Cyclone Engine for those technical aspect but also add my own Core engine.

Gemstone engine have mostly Common function I reuse often such as :

Code:

    /**
     * Convert a value to a percent.
     *
     * @export
     * @param {number} a
     * @param {number} b
     * @return {number}
     */
    export function PercentOf(a: number, b: number, large: boolean = false): number {
        return a / b * (large ? 100 : 1);
    }

    /**
     * Convert a value to a rounded percent.
     *
     * @export
     * @param {number} a The value to convert
     * @param {number} b The target max value
     * @param {boolean} large convert the percent to a small value (0 ~ 1) or a large value (0 ~ 100)
     * @return {number}
     */
    export function RoundedPercentOf(a: number, b: number, large: boolean = false): number {
        return Math.round(PercentOf(a, b, large));
    }

// ...

I think having a common framework for those thing is fine but also having our own framework for our own useful common method is always nice.

Hudell

#106 Aug 20, 2020, 06:14 AM Source

I'm usually against cores too, but this time I gave up the fight and joined the enemy. At least the core is doing a little more than just adding a way to patch classes.

I wrote a small documentation of it here:

MakerDevs.com
DoubleX

#107 Aug 20, 2020, 06:19 AM Source

My consideration on this is the size of the duplicated codes, the number of duplication, and their rate of changes.
In general, the larger they are, the more duplication are there and the more frequently they change, the more reasons for me to extract those codes into something like a core plugin.
Also, if the core plugin doesn't have any breaking change, it'd be a great bonus for me :)
Ossra

#108 Aug 20, 2020, 07:09 AM Source

Dah, Cyclone does look rather neat. Makes the framework I had been working on look silly.
Hudell

#109 Aug 20, 2020, 02:34 PM Source

The code for the `patchClass` function would be super simple if all you want to support is methods. It got a bit more complex to include support for properties, then a little more to automatically copy old properties to the $super object and then even more to copy inherited old properties to the $super object.
I don't know if anyone has ever needed to alias an object property though, so I may be overkilling it there. Just wanted to ensure it was compatible with anything. I can make a simple `patchClass` function without property aliasing if anyone wants to copy it into their own plugins.
Solar_Flare

#110 Aug 22, 2020, 06:23 AM Source

Tsukihime said:
Lol imagine everyone's projects looking like

HudellCore
OssraCore
DoubleCore
NioCore
SolarCore
HimeCore
There won't be a SolarCore anytime soon, as I currently have no plans to buy MZ. Even in MV the SFG_Utils plugin isn't anything so elaborate as a core plugin - it's literally what it says, just a few utility plugins.

Tsukihime said:
cause we all have our own preference for aliasing classes using class syntax
My preference is, don't do that and just alias functions in the ES5 way. I basically just don't use the class syntax for anything.
Dr.Yami

#111 Aug 22, 2020, 05:15 PM Source

Do the whole engine in a single js file, problem solved :rheh:
Nekohime1989

#112 Aug 22, 2020, 06:21 PM Source

Now I just need to figure out how to load the meta... -_-
Jonforum

#113 Dec 28, 2020, 12:32 PM Source

Lol wait ! be sure your are using at least Babel to compile code to ES5 if your use `super` !
`super` work fine and are support by all browser now, but have terrible performance :mad:.
I made for your a bench to see why you should never use super without Babel to transpile to es5.
Sure ,for a app or webpage is fine, but for a game engine is not good idea!
Or at least avoid placing '.super' in the game loop.

JSBench.me - JavaScript performance benchmarking playground and we are not talking about a small difference!

Babel is over there:

Babel