How to use the pixi-viewport.Viewport function in pixi-viewport

To help you get started, we’ve selected a few pixi-viewport examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github davidfig / pixi-scrollbox / dist / scrollbox.es.js View on Github external
constructor(options={})
    {
        super();
        this.options = Object.assign({}, scrollboxOptions, options);
        if (options.overflow) {
            this.options.overflowX = this.options.overflowY = options.overflow;
        }
        this.ease = typeof this.options.fadeScrollboxEase === 'function' ? this.options.fadeScrollboxEase : penner[this.options.fadeScrollboxEase];

        /**
         * content in placed in here
         * you can use any function from pixi-viewport on content to manually move the content (see https://davidfig.github.io/pixi-viewport/jsdoc/)
         * @type {Viewport}
         */
        this.content = this.addChild(new Viewport({ passiveWheel: this.options.passiveWheel, stopPropagation: this.options.stopPropagation, screenWidth: this.options.boxWidth, screenHeight: this.options.boxHeight }));
        this.content
            .decelerate()
            .on('moved', () => this._drawScrollbars());

        // needed to pull this out of viewportOptions because of pixi.js v4 support (which changed from PIXI.ticker.shared to PIXI.Ticker.shared...sigh)
        if (options.ticker)
        {
            this.options.ticker = options.ticker;
        }
        else
        {
            // to avoid Rollup transforming our import, save pixi namespace in a variable
            // from here: https://github.com/pixijs/pixi.js/issues/5757
            let ticker;
            const pixiNS = PIXI;
            if (parseInt(/^(\d+)\./.exec(VERSION)[1]) < 5)
github davidfig / pixi-scrollbox / src / scrollbox.js View on Github external
constructor(options={})
    {
        super()
        this.options = Object.assign({}, scrollboxOptions, options)
        if (options.overflow) {
            this.options.overflowX = this.options.overflowY = options.overflow
        }
        this.ease = typeof this.options.fadeScrollboxEase === 'function' ? this.options.fadeScrollboxEase : Penner[this.options.fadeScrollboxEase]

        /**
         * content in placed in here
         * you can use any function from pixi-viewport on content to manually move the content (see https://davidfig.github.io/pixi-viewport/jsdoc/)
         * @type {Viewport}
         */
        this.content = this.addChild(new Viewport({ passiveWheel: this.options.passiveWheel, stopPropagation: this.options.stopPropagation, screenWidth: this.options.boxWidth, screenHeight: this.options.boxHeight }))
        this.content
            .decelerate()
            .on('moved', () => this._drawScrollbars())

        // needed to pull this out of viewportOptions because of pixi.js v4 support (which changed from PIXI.ticker.shared to PIXI.Ticker.shared...sigh)
        if (options.ticker)
        {
            this.options.ticker = options.ticker
        }
        else
        {
            // to avoid Rollup transforming our import, save pixi namespace in a variable
            // from here: https://github.com/pixijs/pixi.js/issues/5757
            let ticker
            const pixiNS = PIXI
            if (parseInt(/^(\d+)\./.exec(PIXI.VERSION)[1]) < 5)
github halftheopposite / tosios / packages / client / src / managers / GameManager.ts View on Github external
onActionSend: any,
  ) {

    // App
    this.app = new Application({
      width: screenWidth,
      height: screenHeight,
      antialias: false,
      backgroundColor: utils.string2hex(Constants.BACKGROUND_COLOR),
    });

    // Map
    this.map = new Entities.Map(0, 0);

    // Viewport
    this.viewport = new Viewport({
      screenWidth,
      screenHeight,
    });
    this.app.stage.addChild(this.viewport);

    // Walls R-Tree
    this.walls = new Collisions.TreeCollider();

    // HUD
    this.hudManager = new HUDManager(
      screenWidth,
      screenHeight,
      utils.isMobile.any,
      false,
    );
    this.app.stage.addChild(this.hudManager);
github itsezc / CycloneIO / packages / client / Habbo.ts View on Github external
throw `${parent} is not an element.`
		}

		this.socketManager.init(socket)

		const config = {
			width: window.innerWidth,
			height: window.innerHeight,
			resolution: window.devicePixelRatio || 1,
			resizeTo: window
		}

		PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST
		PIXI.settings.ROUND_PIXELS = true

		this.viewport = new Viewport()
		this.application = new PIXI.Application(config)

		this.application.stage.addChild(this.viewport)

		this.viewport.drag({
			wheel: false,
			mouseButtons: 'left'
		})

		this.viewport.setZoom(5)

		this.cullManager.setViewport(this.viewport)

		this.resizeEvents()

		this.addDefaultRoom()

pixi-viewport

A highly configurable viewport/2D camera designed to work with pixi.js. Features include dragging, pinch-to-zoom, mouse wheel zooming, decelerated dragging, follow target, snap to point, snap to zoom, clamping, bouncing on edges, and move on mouse edges.

MIT
Latest version published 25 days ago

Package Health Score

80 / 100
Full package analysis

Popular pixi-viewport functions