Is there a script about responsive html5 game ?

Freank

Veteran
Veteran
Joined
Nov 6, 2013
Messages
371
Reaction score
146
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 :





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


 

Freank

Veteran
Veteran
Joined
Nov 6, 2013
Messages
371
Reaction score
146
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 sheep */
        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));
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Latest Threads

Latest Profile Posts

Yeseylon wrote on CrowStorm's profile.
All Hail Storm Crow, the Blue Eyes White Dragon of MtG!
I love these real life Oblivion videos:
I'm playing DQ:XI DE in 2d mode with the synthesized soundtrack, the only way a RPGMAKER creator should play it. :D
:/ it really get on my nerves reading stuff about how to write a resume and they say things like "turn your failures into wins!!!" ... no interview Ive ever had cared to hear anything about my failures, and why would they :( ?
"Huh? You haven't backed up yet? *menacing stare* "

Forum statistics

Threads
93,642
Messages
914,203
Members
123,233
Latest member
yngbe
Top