Freank

Veteran
Veteran
Joined
Nov 6, 2013
Messages
381
Reaction score
158
Primarily Uses
N/A
Hi guys,


is there a script to make a responsive game ?


With MV I saw several games playable online.


But I can play it only in this way :


BoeHb8S.png



Is there a script to make a responsive html game and play it also in this way ?


idCRwgz.png
 

Freank

Veteran
Veteran
Joined
Nov 6, 2013
Messages
381
Reaction score
158
Primarily Uses
N/A
A good start. Made by David Wendt

Code:
/*jslint nomen:true*/
/*global console*/

/*:
 * @author David Wendt (fantranslation.org)
 * @plugindesc Makes your game responsive. v0.3.0
 * 
 * @param ArtScale
 * @desc The intended scale of your art assets. (RPG Maker MV default: 1.5)
 * @default 1.5
 * 
 * @param MinWidth
 * @desc The minimum width of the playfield, in virtual pixel units.
 * @default 544
 * 
 * @param MinHeight
 * @desc The minimum height of the playfield, in virtual pixel units.
 * @default 416
 * 
 * @param MaxWidth
 * @desc The maximum width of the playfield, in virtual pixel units.
 * @default 816
 * 
 * @param MaxHeight
 * @desc The maximum height of the playfield, in virtual pixel units.
 * @default 624
 * 
 * @param DesignFPS
 * @desc FPS that the game was originally designed for.
 * @default 60
 *
 * @param UpdateFrameCap
 * @desc Maximum number of updates to run per animation frame.
 * @default 4
 *
 * @param EnableResolutionIndependence
 * @desc Render the game at the resolution of your display & scale assets up.
 * @default true
 *
 * @param DebugFPS
 * @desc FPS that the game should run at, for debugging purposes.
 * @default undefined
 *
 * @param DebugBreakOnNonadaptive
 * @desc If "true", execution will halt on nonadaptive code.
 * @default false
 *
 * @param DebugLogMessages
 * @desc If "true", log classes containing legacy code needing to be updated.
 * @default false
 *
 * @help
 * 
 *      Adjusts various aspects of an RPG Maker MV game engine to improve
 * flexibility in different ways. Adjusts viewport size, window sizing, and
 * update frequency to ensure various the game adapts to various corner cases.
 * For example, this plugin can adjust your game's playfield to fit the screen
 * viewport it has, such that there are no letterboxing bars and the scale of
 * rendered art assets corresponds to some physical quantity.
 *
 *  = Adaptive Viewport =
 * 
 *      This plugin's main advantage is that you can design games with detailed
 * art for high-density displays without forcing players on lower-density
 * monitors to view excessively large sprites. Art is scaled up or down as
 * needed such that the final result is at a visually appropriate size for any
 * monitor.
 * 
 *      You can also define a minimum size for your playfield. Viewports smaller
 * than this will have their art assets shrunk further to ensure a minimum
 * amount of virtual screen space is available to the user interface.
 * Additionally, a maximum size can also be defined to prevent assets from
 * becoming too small and the playfield too large. If these two parameters are
 * in conflict, the maximum size will override the minimum size. (Such a
 * situation may happen if the viewport is not tall enough for the minimum
 * height, but wide enough to exceed maximum width.)
 * 
 *      Maximum and minimum size defaults are set to the sizes of the default
 * RPG Maker MV and VX Ace viewports, respectively. You may wish to adjust them
 * based on your target platform. In that case, please keep in mind that the
 * units for these parameters are specified in virtual units, so if you increase
 * your ArtScale, the sizes specified here do not need to be increased. Or, if
 * you reduce ArtScale (say if you liked MV's larger sprites), you don't need to
 * change these either.
 *
 *      Please take caution when setting ArtScale as it increases or decreases
 * the size of the whole game. Settings above 1.5 are highly discouraged unless
 * you have already made the necessary code and design changes to increase the
 * size of UI elements and text before using this plugin. Please do not make
 * those changes, however, if you have not already, as we have a better approach
 * involving true high-resolution support.
 *
 *      This plugin unlocks the high-resolution support built into PIXI.js, the
 * 2D graphics library used by RPG Maker MV. What this means is that the actual
 * viewport presented to the user will match the resolution of their device, and
 * existing low-resolution assets will be scaled to the selected art asset size.
 * The only practical effect of this, however, is that text will render at
 * higher resolution when needed. An additional plugin is required to support
 * high-resolution or vector art asset loading.
 * 
 *      (Note that "high resolution" does not mean "larger physical size" as RPG
 * Maker tends to assume.)
 *
 *      In the event that the high-resolution support is causing a bug in your
 * game, you may disable it by setting EnableResolutionIndependence to false,
 * which will refrain from increasing the WebGL/canvas resolution. Note that
 * this setting is independent from the ArtScale setting which is used to
 * calculate viewport resolution.
 * 
 *      This plugin creates a new method for Scenes and Windows called layout.
 * This method is called to force the target object to adjust it's contents to
 * fit a different screen size. Default implementations for the base game's
 * scenes and windows will be created. Additional scenes and windows in other
 * plugins or your own code should have layout methods created for them if the
 * defaults are unsuitable. The default implementations will use existing layout
 * properties where available. Developers of custom Window or Scene classes
 * should take a look at what this plugin does to ensure nothing breaks when it
 * is enabled.
 *
 *  = Adaptive Framerate =
 *
 *      The plugin additionally supports adjusting the speed of game logic to
 * be framerate independent. As RPG Maker MV was not designed for this at all,
 * we accomplish this by firing multiple update calls to catch up with where
 * the game should be. Effectively, frames are reinterpreted as a physical unit
 * of time equal to the reciprocal of the DesignFPS rate, or 1/60 seconds.
 *
 *      This facility is limited by the UpdateFrameCap, which prevents the game
 * from running ridiculous numbers of updates in situations where the game
 * hasn't been running at all. (According to web standards, the browser is
 * permitted to ramp down framerates or even cease updates for an arbitrary
 * amount of time.) It sets an effective minimum FPS floor equal to the
 * DesignFPS divided by the UpdateFrameCap.
 *
 *      Please note that this functionality does not allow us to update at a
 * faster clip than 60 FPS, even if your monitor supports it. We cannot update
 * half a frame's worth of time with the standard RPG Maker MV codebase.
 * However, we can modify existing update functions to support adaptive update
 * rates.
 *
 *      To do this, you must alter the relevant update functions to accept a
 * numerical parameter indicating how many updates are intended to be processed
 * at once. This parameter MUST be allowed to be provided as a fraction and
 * your update function must scale all animations by that amount. Because we
 * provide frame counts as a multiple of the design framerate, you do not need
 * to adjust your existing design parameters to match - e.g. if you set a
 * character to move 10 pixels across the viewport per frame, and you designed
 * and tested this existing functionality at 60FPS, you merely need to multiply
 * by the provided number to get the number of pixels that the character should
 * move.
 *
 *      Alongside accepting a frame count as a parameter, your update function
 * should also return the amount of frames actually consumed. This is used to
 * allow update functions to control the actual flow of update calls over time.
 *
 *      Note that your code should not attempt to call other functions that
 * advance the flow of time on it's own. Instead, this module exports a
 * function called "force_frame_adaptive" which accepts the current frameCount,
 * the desired update function, and the object it's to be called on. It will
 * then call that function, either once for frame_adaptive code, or multiple
 * times for legacy code, to ensure that the flow of time remains consistent.
 *
 *      You can find this function in SixLoves_Responsive; if not present, you
 * should not provide your own code. If your plugin is intended to run in both
 * environments - repsonsive and non-responsive - then you should, in the case
 * where the plugin is missing, use a fallback function that merely calls the
 * code without any special legacy handling. You should not attempt to
 * duplicate the legacy code handling in this plugin as it is subject to change
 * and fairly complex.
 *
 *      Legacy autodetect relies on properly marking frame-adaptive update
 * functions by use of a special variable on the function object, like so:
 *
 *      MySceneClass.prototype.update.frame_adaptive = true
 *
 *      This necessitates writing frame-adaptive code in a flexible manner that
 * supports being called from non-frame-adaptive code. Look at the source code
 * of this plugin for an example of this style.
 *
 *      Please note that this property is only inherited in the case where the
 * function is unchanged from parent to child class. Overriding the function,
 * either by declaring a new one on the child class's prototype or replacing
 * the existing one on the parent class's prototype, will erase this property.
 * Update functions must individually opt-in to this scheme. If you override a
 * frame_adaptive function, you must also redeclare your frame_adaptive-ness.
 *
 *      For testing your own code, you may want to change DebugFPS to something
 * other than the default "undefined", which will lock the game to an arbitrary
 * FPS of your choosing. This will cause it to explicitly run faster or slower.
 * For example, on a 60fps monitor, a DebugFPS of 30 should run half as fast
 * and a DebugFPS of 120 should run twice as fast.
 *
 *      In exceptionally rare cases the design FPS may have been altered from
 * the stock 60FPS. For example, a developer who already adjusted their code to
 * work on faster or slower monitors may need to use this plugin. In this case
 * you may change the DesignFPS to speed up or slow down the game at all
 * possible refresh rates. Please note that you should probably not do this.
 */

this.SixLoves_Responsive = this.SixLoves_Responsive || {};

(function (root, module) {
    "use strict";
    
    var parameters = root.PluginManager.parameters('SixLoves_Responsive'),
        enableResolutionIndependence = parameters.EnableResolutionIndependence === "false" ? false : true,
        artScale = Number(parameters.ArtScale || 1.5),
        minWidth = Number(parameters.MinWidth || 544),
        minHeight = Number(parameters.MinHeight || 416),
        maxWidth = Number(parameters.MaxWidth || 816),
        maxHeight = Number(parameters.MaxHeight || 624),
        
        designFPS = Number(parameters.DesignFPS || 60),

        /* Debug **** */
        debugFPS = (parameters.DebugFPS !== undefined &&
                    parameters.DebugFPS !== "undefined") ? Number(parameters.DebugFPS) : undefined,
        debugBreakOnNonAdaptive = (parameters.DebugBreakOnNonadaptive === undefined ||
                                   parameters.DebugBreakOnNonadaptive === "false") ? false : true,
        debugLogMessages = (parameters.DebugLogMessages === undefined ||
                            parameters.DebugLogMessages === "false") ? false : true,
        updateFrameCap = Number(parameters.UpdateFrameCap || 3),

        nonAdaptive = [],
        nonResponsive = [],

        /* Preceding implementations of patched code. */
        _SceneManager_initGraphics = root.SceneManager.initGraphics,
        _Graphics_centerElement = root.Graphics._centerElement,

        /* The additional zoom factor from ArtScale pixels to physical pixels.
         * So, for example...
         *
         *     DPI scale            ArtScale            pixelScaleDiscrepancy
         *     1x                   1x                  1x
         *     1x                   1.5x                0.6666x
         *     1.5x                 1.5x                1x
         *     2x                   1.5x                1.3333x
         */
        pixelScaleDiscrepancy;
    
    if (debugFPS !== undefined) {
        console.warn("Debugging framerate is on. You should turn this off if you are not testing update logic.");
    }

    /* == DEBUG TOOLS == */

    /* Given an object, name it.
     */
    function name_of(an_object) {
        if (an_object.constructor.name === "Function") {
            return an_object.name;
        }

        return an_object.constructor.name;
    }

    /* == FRAME-RATE ADAPTIVE GAME LOGIC == */

    /* Helper function that repeatedly executes an update callback to emulate
     * adaptive behavior.
     */
    function force_frame_adaptive(frameCount, updateCallback, updateThis) {
        var framesExecuted = 0,
            constructorName;

        if (updateCallback.frame_adaptive === true) {
            framesExecuted = updateCallback.apply(updateThis, [frameCount]);

            //For whatever reason, a particular bit of code may not actually
            //contain any frame-scalable effects but we still want to avoid
            //running it multiple times. This bit here lets us mark code as
            //frame-adaptive without changing it if we want.
            if (framesExecuted === undefined) {
                return frameCount;
            }

            return framesExecuted;
        } else {
            if (debugBreakOnNonAdaptive) {
                debugger;
            }

            if (nonAdaptive.indexOf(name_of(updateThis)) === -1) {
                nonAdaptive.push(name_of(updateThis));
            }
        }

        frameCount = Math.ceil(frameCount);

        while (framesExecuted < frameCount) {
            framesExecuted += 1;
            updateCallback.apply(updateThis);
        }

        return framesExecuted;
    }

    /* Returns the number of physical pixels per ArtScale pixel.
     *
     * Exposed as SixLoves_Responsive.get_artscale_pixel_ratio
     */
    function get_artscale_pixel_ratio() {
        return pixelScaleDiscrepancy;
    }

    /* Code which adjusts the gameloop to run at the same physical speed
     * regardless of the rate at which the browser fires animation frames.
     */
    root.SceneManager.update = function (timeStamp) {
        var frameSkip,
            actualFrameSkip = 0;

        //Clear the debugging list of nonadaptive functions.
        nonAdaptive = [];

        //Ensure we have a timestamp to compare to.
        //We can't run any adaptive code until we have a delta.
        if (this.lastTimeStamp === undefined) {
            this.lastTimeStamp = timeStamp;
            return this.requestUpdate();
        }

        //accumulatedExcessTime is used to keep track of time that hasn't
        //been consumed by the underlying frame update functions.
        if (this.accumulatedExcessTime === undefined) {
            this.accumulatedExcessTime = 0;
        }

        //This tells us how many updates need to run since the last run.
        frameSkip = (timeStamp - this.lastTimeStamp) / 1000 * designFPS;

        //Also, add in any excess time not accounted for by the previous update
        //and apply our update cap.
        frameSkip = Math.min(frameSkip + this.accumulatedExcessTime,
                             module.updateFrameCap);

        if (debugFPS !== undefined) {
            frameSkip = designFPS / debugFPS;
        }

        try {
            this.tickStart();
            //Removed in RPG MV 1.1
            //this.updateInputData();

            actualFrameSkip = force_frame_adaptive(frameSkip, this.updateMain, this);

            this.tickEnd();
        } catch (e) {
            this.catchException(e);
        }

        if (nonAdaptive.length > 0 && debugLogMessages) {
            console.warn("Please update classes " + nonAdaptive.join(", ") + " to support frame adaptive code.");
        }

        //Store any frame time that the update function didn't use.
        this.accumulatedExcessTime = Math.max(frameSkip - actualFrameSkip, 0);
        this.lastTimeStamp = timeStamp;
    };

    root.SceneManager.update.frame_adaptive = true;

    /* Adjust updateMain to also support frame_adaptive behavior.
     *
     * Note that if this function is NOT frame_adaptive, it WILL cause the game
     * to constantly spin and request more and more animation frames, making
     * the game spin out of control and die very quickly.
     */
    root.SceneManager.updateMain = function (frameCount) {
        if (frameCount === undefined) {
            frameCount = 1;
        }

        this.updateInputData();
        this.changeScene();
        frameCount = force_frame_adaptive(frameCount, this.updateScene, this);
        this.renderScene();
        this.requestUpdate();

        return frameCount;
    };

    root.SceneManager.updateMain.frame_adaptive = true;

    /* Adjust updateScene to support frame_adaptive scenes.
     *
     * This also changes the scene starting logic a bit: scene starting always
     * takes one update call regardless of how many frames actually passed.
     */
    root.SceneManager.updateScene = function (frameCount) {
        if (frameCount === undefined) {
            frameCount = 1;
        }

        if (this._scene) {
            if (!this._sceneStarted && this._scene.isReady()) {
                this._scene.start();
                this._sceneStarted = true;
                this.onSceneStart();
            }
            if (this.isCurrentSceneStarted()) {
                frameCount = force_frame_adaptive(frameCount, this._scene.update, this._scene);
            }
        }

        return frameCount;
    };

    root.SceneManager.updateScene.frame_adaptive = true;

    /* == RESPONSIVE VIEWPORT LOGIC == */

    /* Code which resizes the Graphics viewport to match the screen, and scale
     * art assets down to their appropriate physical size.
     * (e.g. it allows high-DPI assets to be high-DPI when needed)
     */
    function adapt_to_viewport() {
        var finalScale = artScale,
            displayScale = window.devicePixelRatio || 1,
            cssWidth = window.innerWidth,
            cssHeight = window.innerHeight;
        
        if (cssWidth < minWidth || cssHeight < minHeight) {
            finalScale = artScale / Math.min(cssWidth / minWidth,
                                             cssHeight / minHeight);
        }
        
        if (cssWidth > maxWidth || cssHeight > maxHeight) {
            finalScale = artScale / Math.max(cssWidth / maxWidth,
                                             cssHeight / maxHeight);
        }

        //Allow turning off full DPI support
        if (enableResolutionIndependence) {
            //We do not allow the pixel scale to go below 1, otherwise PIXI chokes
            pixelScaleDiscrepancy = Math.max(displayScale / finalScale, 1);
        } else {
            pixelScaleDiscrepancy = 1;
        }

        root.Graphics.width = Math.round(cssWidth * finalScale);
        root.Graphics.height = Math.round(cssHeight * finalScale);
        root.Graphics.boxWidth = Math.round(cssWidth * finalScale);
        root.Graphics.boxHeight = Math.round(cssHeight * finalScale);
        root.Graphics.scale = 1 / finalScale;

        nonResponsive = [];

        if (root.SceneManager._scene) {
            if (root.SceneManager._scene.layout) {
                root.SceneManager._scene.layout();

                if (nonResponsive.length > 0 && debugLogMessages) {
                    console.warn("Classes " + nonResponsive.join(", ") + " do not have a .layout method; some portions of the current scene may not render properly until the next scene transition.");
                }
            } else {
                if (debugLogMessages) {
                    console.warn("The current scene " + name_of(root.SceneManager._scene) + " does not have a .layout method; the game will not render properly until the next scene transition.");
                }
            }
        }
    }
    
    /* Monkey-patch the Scene Manager to fill the screen.
     */
    root.SceneManager.initGraphics = function () {
        _SceneManager_initGraphics.apply(this);
        
        adapt_to_viewport();
    };
    
    window.addEventListener("resize", adapt_to_viewport);
    
    function layout_all(children) {
        var i;
        
        for (i = 0; i < children.length; i += 1) {
            if (children[i].layout) {
                children[i].layout();
            } else {
                if (nonResponsive.indexOf(name_of(children[i])) === -1) {
                    nonResponsive.push(name_of(children[i]));
                }
            }
        }
    }

    /* ...after these patches to Bitmap which will reframe literally all window
     * drawing operations in terms of virtual/CSS pixels instead of physical
     * pixels.
     */
    root.Bitmap.prototype.initialize = (function (old_impl) {
        return function (width, height, drawingScale) {
            var childArgs = Array.prototype.concat.call(arguments);

            if (drawingScale === undefined) {
                drawingScale = 1;
            }

            childArgs[0] = Math.floor(width * drawingScale);
            childArgs[1] = Math.floor(height * drawingScale);

            old_impl.apply(this, childArgs);

            this._context.setTransform(drawingScale, 0, 0, drawingScale, 0, 0);
            this._baseTexture.resolution = drawingScale;
        };
    }(root.Bitmap.prototype.initialize));

    /* Oh, and we also have to catch anyone resizing bitmaps, too. */
    root.Bitmap.prototype.resize = function (width, height, drawingScale) {
        if (drawingScale === undefined) {
            drawingScale = 1;
        }

        width = Math.floor(Math.max(width || 0, 1) * drawingScale);
        height = Math.floor(Math.max(height || 0, 1) * drawingScale);

        this._canvas.width = width;
        this._canvas.height = height;
        this._baseTexture.width = width;
        this._baseTexture.height = height;
        this._baseTexture.resolution = drawingScale;

        this._context.setTransform(drawingScale, 0, 0, drawingScale, 0, 0);
    };

    /* Lie about our size to the outside world. */
    Object.defineProperty(root.Bitmap.prototype, 'width', {
        get: function () {
            return this._isLoading ? 0 : Math.round(this._canvas.width / this._baseTexture.resolution);
        },
        configurable: true
    });

    Object.defineProperty(root.Bitmap.prototype, 'height', {
        get: function () {
            return this._isLoading ? 0 : Math.round(this._canvas.height / this._baseTexture.resolution);
        },
        configurable: true
    });

    /* If someone tries to draw on us with high-resolution imagery, we have to
     * catch that, too. Gee, lying can be a pain sometimes
     */
    root.Bitmap.prototype.blt = function (source, sx, sy, sw, sh, dx, dy, dw, dh) {
        var source_res = 1;

        if (source._baseTexture !== undefined && source._baseTexture.resolution !== undefined) {
            source_res = source._baseTexture.resolution;
        }

        //Some functions don't fill out destination width or height,
        //expecting not to scale things.
        //Of course, now that we support true high-res, every blit is also a
        //potential scale.
        if (dw === undefined) {
            dw = sw;
        }

        if (dh === undefined) {
            dh = sh;
        }

        sx = Math.floor(sx * source_res);
        sy = Math.floor(sy * source_res);
        sw = Math.floor(sw * source_res);
        sh = Math.floor(sh * source_res);

        if (sx >= 0 && sy >= 0 && sw > 0 && sh > 0 && dw > 0 && dh > 0 &&
                sx + sw <= source._canvas.width && sy + sh <= source._canvas.height) {
            this._context.globalCompositeOperation = 'source-over';
            this._context.drawImage(source._canvas, sx, sy, sw, sh, dx, dy, dw, dh);
            this._setDirty();
        }
    };

    /* There's what I -think- is a bug in PIXI where setFrame
     * sets the texture crop without taking resolution into
     * account, so let's update the crop ourselves.
     *
     * Unfortunately the 2.x versions of PIXI are no longer updated so this is
     * just gonna be our little secret. Also, I'm fairly sure this is not what
     * PIXI upstream would prefer we do but I stopped caring.
     */
    root.PIXI.Texture.prototype.setFrame = function (frame) {
        this.noFrame = false;

        this.frame = frame;
        this.width = frame.width;
        this.height = frame.height;

        this.crop.x = frame.x;
        this.crop.y = frame.y;
        this.crop.width = frame.width;
        this.crop.height = frame.height;

        if (!this.trim && (frame.x + frame.width > this.baseTexture.width || frame.y + frame.height > this.baseTexture.height)) {
            throw new Error('Texture Error: frame does not fit inside the base Texture dimensions ' + this);
        }

        //It's only -after- that check that we can do this:
        this.frame.x *= this.baseTexture.resolution;
        this.frame.y *= this.baseTexture.resolution;
        this.frame.width *= this.baseTexture.resolution;
        this.frame.height *= this.baseTexture.resolution;

        this.crop.x *= this.baseTexture.resolution;
        this.crop.y *= this.baseTexture.resolution;
        this.crop.width *= this.baseTexture.resolution;
        this.crop.height *= this.baseTexture.resolution;

        this.valid = frame && frame.width && frame.height && this.baseTexture.source && this.baseTexture.hasLoaded;

        if (this.trim) {
            this.width = this.trim.width;
            this.height = this.trim.height;
            this.frame.width = this.trim.width;
            this.frame.height = this.trim.height;
        }

        if (this.valid) {
            this._updateUvs();
        }
    };
    
    /* Here's what is DEFINITELY a bug in PIXI: no high-res filtering.
     * Unfortunately the fix is v3 only, and as the v2 branch has never been
     * updated, here we are.
     */
    root.PIXI.WebGLFilterManager.prototype.pushFilter = function (filterBlock) {
        var gl = this.gl;

        var projection = this.renderSession.projection;
        var offset = this.renderSession.offset;

        filterBlock._filterArea = filterBlock.target.filterArea || filterBlock.target.getBounds();

        // filter program
        // OPTIMISATION - the first filter is free if its a simple color change?
        this.filterStack.push(filterBlock);

        var filter = filterBlock.filterPasses[0];

        this.offsetX += filterBlock._filterArea.x;
        this.offsetY += filterBlock._filterArea.y;

        var texture = this.texturePool.pop();
        if(!texture)
        {
            texture = new PIXI.FilterTexture(this.gl, this.width * this.renderSession.resolution, this.height * this.renderSession.resolution);
        }
        else
        {
            texture.resize(this.width * this.renderSession.resolution, this.height * this.renderSession.resolution);
        }

        gl.bindTexture(gl.TEXTURE_2D,  texture.texture);

        var filterArea = filterBlock._filterArea;// filterBlock.target.getBounds();///filterBlock.target.filterArea;

        var padding = filter.padding;
        filterArea.x -= padding;
        filterArea.y -= padding;
        filterArea.width += padding * 2;
        filterArea.height += padding * 2;

        // cap filter to screen size..
        if(filterArea.x < 0)filterArea.x = 0;
        if(filterArea.width > this.width)filterArea.width = this.width;
        if(filterArea.y < 0)filterArea.y = 0;
        if(filterArea.height > this.height)filterArea.height = this.height;

        //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA,  filterArea.width, filterArea.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
        gl.bindFramebuffer(gl.FRAMEBUFFER, texture.frameBuffer);

        // set view port
        gl.viewport(0, 0, filterArea.width * this.renderSession.resolution, filterArea.height * this.renderSession.resolution);

        projection.x = filterArea.width/2;
        projection.y = -filterArea.height/2;

        offset.x = -filterArea.x;
        offset.y = -filterArea.y;

        // update projection
        // now restore the regular shader..
        // this.renderSession.shaderManager.setShader(this.defaultShader);
        //gl.uniform2f(this.defaultShader.projectionVector, filterArea.width/2, -filterArea.height/2);
        //gl.uniform2f(this.defaultShader.offsetVector, -filterArea.x, -filterArea.y);

        gl.colorMask(true, true, true, true);
        gl.clearColor(0,0,0, 0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        filterBlock._glFilterTexture = texture;

    };

    /**
    * Removes the last filter from the filter stack and doesn't return it.
    *
    * @method popFilter
    */
    root.PIXI.WebGLFilterManager.prototype.popFilter = function() {
        var gl = this.gl;
        var filterBlock = this.filterStack.pop();
        var filterArea = filterBlock._filterArea;
        var texture = filterBlock._glFilterTexture;
        var projection = this.renderSession.projection;
        var offset = this.renderSession.offset;

        if(filterBlock.filterPasses.length > 1)
        {
            gl.viewport(0, 0, filterArea.width * this.renderSession.resolution, filterArea.height * this.renderSession.resolution);

            gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);

            this.vertexArray[0] = 0;
            this.vertexArray[1] = filterArea.height * this.renderSession.resolution;

            this.vertexArray[2] = filterArea.width * this.renderSession.resolution;
            this.vertexArray[3] = filterArea.height * this.renderSession.resolution;

            this.vertexArray[4] = 0;
            this.vertexArray[5] = 0;

            this.vertexArray[6] = filterArea.width * this.renderSession.resolution;
            this.vertexArray[7] = 0;

            gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray);

            gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);
            // now set the uvs..
            this.uvArray[2] = filterArea.width/this.width;
            this.uvArray[5] = filterArea.height/this.height;
            this.uvArray[6] = filterArea.width/this.width;
            this.uvArray[7] = filterArea.height/this.height;

            gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray);

            var inputTexture = texture;
            var outputTexture = this.texturePool.pop();
            if(!outputTexture)outputTexture = new PIXI.FilterTexture(this.gl, this.width * this.renderSession.resolution, this.height * this.renderSession.resolution);
            outputTexture.resize(this.width * this.renderSession.resolution, this.height * this.renderSession.resolution);

            // need to clear this FBO as it may have some left over elements from a previous filter.
            gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer );
            gl.clear(gl.COLOR_BUFFER_BIT);

            gl.disable(gl.BLEND);

            for (var i = 0; i < filterBlock.filterPasses.length-1; i++)
            {
                var filterPass = filterBlock.filterPasses[i];

                gl.bindFramebuffer(gl.FRAMEBUFFER, outputTexture.frameBuffer );

                // set texture
                gl.activeTexture(gl.TEXTURE0);
                gl.bindTexture(gl.TEXTURE_2D, inputTexture.texture);

                // draw texture..
                //filterPass.applyFilterPass(filterArea.width, filterArea.height);
                this.applyFilterPass(filterPass, filterArea, filterArea.width * this.renderSession.resolution, filterArea.height * this.renderSession.resolution);

                // swap the textures..
                var temp = inputTexture;
                inputTexture = outputTexture;
                outputTexture = temp;
            }

            gl.enable(gl.BLEND);

            texture = inputTexture;
            this.texturePool.push(outputTexture);
        }

        var filter = filterBlock.filterPasses[filterBlock.filterPasses.length-1];

        this.offsetX -= filterArea.x;
        this.offsetY -= filterArea.y;

        var sizeX = this.width;
        var sizeY = this.height;

        var offsetX = 0;
        var offsetY = 0;

        var buffer = this.buffer;

        // time to render the filters texture to the previous scene
        if(this.filterStack.length === 0)
        {
            gl.colorMask(true, true, true, true);//this.transparent);
        }
        else
        {
            var currentFilter = this.filterStack[this.filterStack.length-1];
            filterArea = currentFilter._filterArea;

            sizeX = filterArea.width;
            sizeY = filterArea.height;

            offsetX = filterArea.x;
            offsetY = filterArea.y;

            buffer =  currentFilter._glFilterTexture.frameBuffer;
        }

        // TODO need to remove these global elements..
        projection.x = sizeX/2;
        projection.y = -sizeY/2;

        offset.x = offsetX;
        offset.y = offsetY;

        filterArea = filterBlock._filterArea;

        var x = filterArea.x-offsetX;
        var y = filterArea.y-offsetY;

        // update the buffers..
        // make sure to flip the y!
        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);

        //Apparantly adding the resolution multiplier here breaks things
        this.vertexArray[0] = x;
        this.vertexArray[1] = y + filterArea.height;

        this.vertexArray[2] = x + filterArea.width;
        this.vertexArray[3] = y + filterArea.height;

        this.vertexArray[4] = x;
        this.vertexArray[5] = y;

        this.vertexArray[6] = x + filterArea.width;
        this.vertexArray[7] = y;

        gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.vertexArray);

        gl.bindBuffer(gl.ARRAY_BUFFER, this.uvBuffer);

        this.uvArray[2] = filterArea.width/this.width;
        this.uvArray[5] = filterArea.height/this.height;
        this.uvArray[6] = filterArea.width/this.width;
        this.uvArray[7] = filterArea.height/this.height;

        gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.uvArray);

        gl.viewport(0, 0, sizeX * this.renderSession.resolution, sizeY * this.renderSession.resolution);

        // bind the buffer
        gl.bindFramebuffer(gl.FRAMEBUFFER, buffer );

        // set the blend mode!
        //gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA)

        // set texture
        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, texture.texture);

        // apply!
        this.applyFilterPass(filter, filterArea, sizeX, sizeY);

        // now restore the regular shader.. should happen automatically now..
        // this.renderSession.shaderManager.setShader(this.defaultShader);
        // gl.uniform2f(this.defaultShader.projectionVector, sizeX/2, -sizeY/2);
        // gl.uniform2f(this.defaultShader.offsetVector, -offsetX, -offsetY);

        // return the texture to the pool
        this.texturePool.push(texture);
        filterBlock._glFilterTexture = null;
    };

    root.PIXI.DisplayObjectContainer.prototype.layout = function () {
        layout_all(this.children);
    };

    /* Finally, we have to configure our rendering canvas to be the physical
     * resolution of the viewport, and not artscale units
     *
     * Also because high-DPI never really crossed canvas's mind we have to add
     * some CSS to force the browser to shrink the canvas back down (or up, if
     * ArtScale is larger than the actual pixel ratio)
     */
    root.Graphics._updateCanvas = function () {
        var psd = pixelScaleDiscrepancy !== undefined ? pixelScaleDiscrepancy : 1;

        this._canvas.width = this._width * psd;
        this._canvas.height = this._height * psd;
        this._canvas.style.zIndex = 1;
        this._canvas.style.maxWidth = "100%";
        this._canvas.style.maxHeight = "100%";
        this._canvas.style.minWidth = "100%";
        this._canvas.style.minHeight = "100%";

        //this._centerElement(this._canvas);
        //Our lies are incompatible with this API

        this._canvas.style.position = 'absolute';
        this._canvas.style.margin = 'auto';
        this._canvas.style.top = 0;
        this._canvas.style.left = 0;
        this._canvas.style.right = 0;
        this._canvas.style.bottom = 0;
    };

    /* Tell the PIXI renderer about the pixel scale discrepancy so that it uses
     * the extra resolution we've given/taken to/from it
     */
    root.Graphics._updateRenderer = function () {
        var psd = pixelScaleDiscrepancy !== undefined ? pixelScaleDiscrepancy : 1;

        if (this._renderer) {
            this._renderer.resolution = psd;
            this._renderer.renderSession.resolution = psd;
            this._renderer.resize(this._width, this._height);
        }
    };

    module.layout_all = layout_all;
    module.force_frame_adaptive = force_frame_adaptive;
    module.get_artscale_pixel_ratio = get_artscale_pixel_ratio;
    
    module.updateFrameCap = updateFrameCap;
    
    module.status = "loaded";
    module.version = "0.3.0";
}(this, this.SixLoves_Responsive));
 

Latest Threads

Latest Profile Posts

Frostorm wrote on Pharonix's profile.
Hey bro, hmu if you're around...I really need your help. >.<
Working hard to keep master @ImaginaryVillain 's sparkles on stock! :kaodes:
A3lgj8H.jpg

Hopefully this will please him enough to give us our beds back...
My mom is finally coming home tonight! In the meantime, Wishful Wanda is back in production.
SA51K_SHADER_IDLE.gifZombie is not the only thing people turned into in this town. There is also something else here. Something has many different names in history, the plague, the black oil, the purity, the filth. And now, it's called the shade.
(Maybe too much X-File reference. :kaojoy:)
Thanks, google for putting together a random pixel art Olympics game in your logo that puts everything I've ever done to shame in pretty much every aspect. ;)

Forum statistics

Threads
113,618
Messages
1,076,257
Members
147,632
Latest member
lfxfire2
Top