Is there a script about responsive html5 game ?

Discussion in 'Javascript/Plugin Support' started by Freank, Oct 18, 2016.

  1. Freank

    Freank Veteran Veteran

    Messages:
    369
    Likes Received:
    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 :


    [​IMG]


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


    [​IMG]
     
    #1
  2. Freank

    Freank Veteran Veteran

    Messages:
    369
    Likes Received:
    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));
     
    #2

Share This Page