[RPG-MAKER.FR] Oniromancie: tout l'univers de RPG Maker en français - Les forums - [RMMV] Le Bon Matin, la Laitue, et la Tomate

Rebonjour!

Donc je reviens avec de petites mises à jour!

On a paufiné un peu plus le 2e chapitre - Le combat avec le Windô a maintenant droit à sa propre musique, et on a enregistré les voix pour toutes les lignes.

Je commence tranquillement le troisième chapitre, et j'en profite pour faire quelques ajouts à l'engin qui me semblent sympathiques!

Si ça peut vous intéresser, je mets tout dans un script pêle-mêle.

Quand j'ai commencé à enregistrer les voix originellement j'ai vite réalisé que dans le mix c'était un peu trop difficile à comprendre les dialogues - on entendait typiquement très mal les voix sans descendre la musique à mort, ou sans booster les effets sonores de manière désagréable.

J'avais d'abord introduit que ça modélise le volume des voix séparément du reste du volume en profitant que je préfixe tout les fichiers de voix avec "_", mais c'était quand même pas idéal parce que le niveau confortable de la musique durant les dialogues était trop bas à mon goût par rapport au niveau confortable durant le gameplay.
J'ai donc rajouté une détection dans le playback des SEs pour compter si y'a des voix qui jouent, et alors le volume de la musique quand les dialogues commencent et le remonter quand plus personne ne parle - ça fait un genre de "dip" à 25% du volume et ça a pas mal aidé.

Il se trouve en fait que le pipeline audio de RPG Maker MV est en webaudio, et récemment ça m'a fait cliquer que ça implique que je peux rajouter des effets sonores en post!

Donc là je me suis rajouté un meta tag sur les cartes <bgmFilter> qui supporte deux valeurs pour l'instant:

* <bgmFilter:insideAway> qui applique un gros lowpass sur la musique pour sonner comme si on était dans la pièce d'à côté
* <bgmFilter:farAway> qui applique un peu de lowpass et pas mal de reverb et qui donne donc l'impression d'être très loin

Un exemple de ce que ça donne:

Donc dans un override de la lecture des fichiers, sur la prop "bgm" j'ajoute le filtre désigné dans le meta -

override(DataManager,
    function onLoad(onLoad, object) {
        onLoad.call(DataManager, object);
        switch (object) {
            case $dataMap:
                $dataMap.bgm.filters = ($dataMap.meta.bgmFilter || "").split(",").filter(i => i);
                break;
        }
    });

Puis elle est récupérée lorsque AudioManager mets à jour les options du buffer (qui est le machin qui s'occupe du playback et qui contient le pipeline webaudio) -

override(AudioManager,
    function updateBufferParameters(updateBufferParameters, buffer, configVolume, audio) {
        updateBufferParameters.call(this, buffer, configVolume, audio);
        if (buffer && audio) {
            buffer.filters = audio.filters || null;
        }
    },
    function updateCurrentBgm(updateCurrentBgm, bgm, pos) {
        updateCurrentBgm.call(this, bgm, pos);
        this._currentBgm.filters = bgm.filters;
    },
    function saveBgm(saveBgm) {
        const bgm = saveBgm.call(this);
        this._currentBgm && (bgm.filters = this._currentBgm.filters);
        return bgm;
    });

Et donc dans le buffer WebAudio je modélise si c'est un bgm, et dans le traitement des noeuds je rajoute le lowpass, le reverb, et des gains pour contrôller le wet/dry -

override(WebAudio,
    function _createContext(_createContext) {
        _createContext.call(this);
 
        impulseResponse = ( duration, decay, reverse ) => {
            let sampleRate = this._context.sampleRate;
            let length = sampleRate * duration;
            let impulse = this._context.createBuffer(2, length, sampleRate);
            let impulseL = impulse.getChannelData(0);
            let impulseR = impulse.getChannelData(1);
 
            if (!decay)
                decay = 2.0;
            for (let i = 0; i < length; i++){
                let n = reverse ? length - i : i;
                impulseL[i] = (Math.random() * 2 - 1) * Math.pow(1 - n / length, decay);
                impulseR[i] = (Math.random() * 2 - 1) * Math.pow(1 - n / length, decay);
            }
            return impulse;
        };
        this._convolverBuffer = impulseResponse(1, 1, false);
 
        this.filters = {
            insideAway: {
                _lowpass: { wet: 1 },
                _reverb: { wet: 0, dry: 1 }
            },
            farAway: {
                _lowpass: { wet: 0.5 },
                _reverb: { wet: 1, dry: 0.5 }
            },
            default: {
                _lowpass: { wet: 0 },
                _reverb: { wet: 0, dry: 1 }
            }
        }
    });
 
override(WebAudio.prototype,
    function _startPlaying(_startPlaying, loop, offset) {
        this._isBgm = !!url.match(bgmRegexp);
        return _startPlaying.call(this, loop, offset);
    },
    function _createNodes(_createNodes) {
        if (!this._isBgm) {
            return _createNodes.call(this);
        }
 
        _createNodes.call(this);
 
        const context = WebAudio._context;
 
        this._lowpassNode = context.createBiquadFilter();
        this._lowpassNode.type = "lowpass";
        this._lowpassDry = context.createGain();
        this._lowpassWet = context.createGain();
        this._reverbNode = context.createConvolver();
        this._reverbNode.buffer = WebAudio._convolverBuffer;
        this._reverbDry = context.createGain();
        this._reverbWet = context.createGain();
 
        this._updateFilters(false);
    },
    function _connectNodes(_connectNodes) {
        if (!this._isBgm) {
            return _connectNodes.call(this);
        }
 
        this._gainNode.connect(this._pannerNode);
        this._pannerNode.connect(this._reverbDry);
        this._pannerNode.connect(this._reverbNode);
        this._reverbNode.connect(this._reverbWet);
        this._reverbDry.connect(this._lowpassDry);
        this._reverbDry.connect(this._lowpassNode);
        this._reverbWet.connect(this._lowpassDry);
        this._reverbWet.connect(this._lowpassNode);
        this._lowpassNode.connect(this._lowpassWet);
        this._lowpassDry.connect(WebAudio._masterGainNode);
        this._lowpassWet.connect(WebAudio._masterGainNode);
    },
    function _removeNodes(_removeNodes) {
        if (!this._isBgm) {
            return _removeNodes.call(this);
        }
 
        _removeNodes.call(this);
 
        this._lowpassNode = null;
        this._lowpassDry = null;
        this._lowpassWet = null;
        this._reverbNode = null;
        this._reverbDry = null;
        this._reverbWet = null;
    },
    function _updateFilters(ramp) {
        const context = WebAudio._context;
        const rampTime = ramp ? 1 : 0;
        if (this._lowpassDry) {
            this._lowpassDry.gain.linearRampToValueAtTime(1 - this._lowpass.wet, context.currentTime + rampTime);
            this._lowpassWet.gain.linearRampToValueAtTime(this._lowpass.wet, context.currentTime + rampTime);
        }
        if (this._reverbDry) {
            this._reverbDry.gain.linearRampToValueAtTime(this._reverb.dry, context.currentTime + rampTime);
            this._reverbWet.gain.linearRampToValueAtTime(this._reverb.wet, context.currentTime + rampTime);
        }
    });
 
Object.defineProperty(WebAudio.prototype, "filters", {
    get() {
        return this._filters;
    },
    set(filters) {
        this._filters = this._filters;
        const filter = filters && filters[0] || null;
        const toApply = WebAudio.filters[filter] || WebAudio.filters.default;
        for (const key in toApply) {
            this[key] = toApply[key];
        }
        this._updateFilters(true);
    }
});

Sur le coup j'étais pas trop sûr de l'API exact de noeuds webaudio, mais c'est assez direct en fait - quand on fait "X.connect(Y)" ça dit que l'output de X va aller dans Y.

Donc si on cherche à peu près le diagramme

1	source -> reverb -> lowpass -> output

1 2	source -> reverb -> reverbWet (gain) v> lowpass -> lowpassWet (gain) > output -> reverbDry (gain) ^> lowpassDry (gain) ^

Le wet va dans les deux noeuds du prochain effet, et même chose pour le dry - Il faut juste faire attention parce que si wet et dry sont au max ça "double" le volume.

Sinon un autre ajout que j'ai fait récemment est de remplacer les fade-to-black des transfers pour des crossfade. Je taponnais un peu dans RPG Maker XP cette semaine et ça m'a rappeler qu'à l'époque c'était des crossfade plutôt, et personnellement je trouve ça plus agréable.
On peut le voir un peu dans le deux vidéo plus haut - Le seul truc qui m'agace c'est que des fois ça stutter, mais bon en général la performance de RPG Maker Mv est plutôt conceptuelle.

Au final c'était pas trop difficile à faire - le jeu supporte déjà de prendre des clips pour le fond du menu, et le fade-to-black c'est un sprite qui est mis par dessus la scène, alors j'ai bidouillé que les fade de transfers utilise un sprite alternatif qui est un clip de la scène -

// Transitiooooons
(function () {
    const CROSSFADE = 0;
    let crossfadeSprite;
    let crossfadeBitmap;
    let crossfadeRenderTexture;
    override(Graphics,
        function initialize(initialize, width, height, type) {
            initialize.call(this, width, height, type);
 
            crossfadeBitmap = new Bitmap(width, height);
            crossfadeRenderTexture = PIXI.RenderTexture.create(width, height);
            crossfadeSprite = new Sprite();
            crossfadeSprite.bitmap = crossfadeBitmap;
        })
    override(Scene_Map.prototype,
        function createCrossfadeSprite(_, fadein) {
            if (this._fadeSprite !== crossfadeSprite) {
                if (this._fadeSprite) {
                    this.removeChild(this._fadeSprite);
                }
                this._fadeSprite = crossfadeSprite;
                this.addChild(this._fadeSprite);
            }
            if (!fadein) {
                Graphics._renderer.render(this._spriteset, crossfadeRenderTexture);
                this.worldTransform.identity();
                let canvas = Graphics._renderer.extract.canvas(crossfadeRenderTexture);
                crossfadeBitmap._context.drawImage(canvas, 0, 0);
                crossfadeBitmap._setDirty();
            }
        },
        function createFadeSprite(createFadeSprite, white) {
            if (this._fadeSprite === crossfadeSprite) {
                this.removeChild(crossfadeSprite);
                delete this._fadeSprite;
            }
            createFadeSprite.call(this);
        },
        function startFadeIn(startFadeIn, duration, type) {
            if (type === CROSSFADE) {
                this.createCrossfadeSprite(true);
                this._fadeSign = 1;
                this._fadeDuration = duration || 30;
                this._fadeSprite.opacity = 255;
            } else {
                startFadeIn.call(this, duration, type);
            }
        },
        function startFadeOut(startFadeOut, duration, type) {
            if (type === CROSSFADE) {
                this.createCrossfadeSprite(false);
                this._fadeDuration = -1;
                this._fadeSprite.opacity = 0;
            } else {
                startFadeOut.call(this, duration, type);
            }
        },
        function fadeInForTransfer() {
            this.startFadeIn(this.fadeSpeed(), CROSSFADE);
        },
        function fadeOutForTransfer() {
            this.startFadeOut(-1, CROSSFADE);
        });
})();

J'ai pas directement utilisé le Bitmap.snap de l'engin par contre parce que je voulais éviter d'avoir à instancier un nouveau buffer à chaque fois... c'est le genre de chose qui cause du stutter et que l'engin fait incroyablement pas attention à éviter x)