Auto-scale a scene?

[InterGeek]

Sorry for my english, i hope you understand my question/problem

Is there any way to auto scale the render scene, like ScaleManager in phaser.js? ( http://phaser.io/docs/2.4.4/Phaser.ScaleManager.html )? Here is a example what i mean
code: http://pastebin.com/Au4PJEzb
game: http://www.intergeek.de/blocks/blocks.html

This example has a 400px x 600px resolution and automatic scale to any other highter or lower resolution. Is this possible in SpiderBasic?I think Pixi.js can resize the output.

[Fred]

For now it's not possible directly with SB internal commands, but it's a great idea for addition, considering all different output available.

[InterGeek]

Hi Fred, thanks.

For now it's not possible directly with SB internal commands

and direct with JavaScript in SB code? SB use pixi.js for graphics and pixi.js have the function stage.scale and renderer.resize. Any way to use it?

Code: Select all

// Example for PIXI.JS

function resize() {

        // Determine which screen dimension is most constrained
        ratio = XXXX

        // Scale the view appropriately to fill that dimension
        stage.scale.x = stage.scale.y = ratio;

        // Update the renderer dimensions
        renderer.resize(Math.ceil(GAME_WIDTH * ratio),
                        Math.ceil(GAME_HEIGHT * ratio));
}

source http://rocketshipgames.com/tmp/20150908-pixi-scaling/

[falsam]

Hi InterGeek.

■ Small demonstration
http://purebasic.chat/sb.factory/resizescreen.html

■ Insert this code.

Code: Select all

Procedure resizeScreen(Center.b = #False)
   !var canvas = document.getElementsByTagName("CANVAS")[0];
   !var canvasRatio = canvas.height / canvas.width;
   !var windowRatio = window.innerHeight / window.innerWidth;
   !var width;
   !var height;

   !if (windowRatio < canvasRatio) {
   !    height = window.innerHeight;
   !    width = height / canvasRatio;
   !} else {
   !    width = window.innerWidth;
   !    height = width * canvasRatio;
   !}

   !canvas.style.width = width + 'px';
   !canvas.style.height = height + 'px';
   
   If Center = #True
   !    var style = canvas.style;
   !    style.marginLeft = "auto";
   !    style.marginRight = "auto";
   !    var parentStyle = canvas.parentElement.style;
   !    parentStyle.textAlign = "center";
   !    parentStyle.width = "100%";
	 EndIf
EndProcedure

■ And after ?
Insert resizeScreen(#True) or resizeScreen(#False) into your game loop.

■ Bonus.
-If you want to remove the blue background
!$('html').css('background-image', 'none');

-If you want to Change background color
!$('html').css('background-color', '#E2C29E');

■ Sample code of this awful demonstration.

Code: Select all

Declare loadAssets()
Declare onLoadSuccess()
Declare onLoadError()
Declare gameLoop()
Declare resizeScreen(Center.b = #False)

Structure newSprite
  id.i
  x.i
  y.i
  vy.i 
EndStructure

Global ball.newSprite

Global background, demo

OpenScreen(400, 600, 32, "")

;If you want to remove the blue background 
!$('html').css('background-image', 'none');

;If you want to Change background color
!$('html').css('background-color', '#E2C29E');

BindEvent(#PB_Event_Loading, @onLoadSuccess())
BindEvent(#PB_Event_LoadingError, @onLoadError())
BindEvent(#PB_Event_RenderFrame, @gameLoop())
loadAssets()

Procedure loadAssets()
  background = LoadSprite(#PB_Any, "assets/sprites/background.png", #PB_Sprite_AlphaBlending)
  demo = LoadSprite(#PB_Any, "assets/sprites/demo.png", #PB_Sprite_AlphaBlending)
  ball\id = LoadSprite(#PB_Any, "assets/sprites/ball.png", #PB_Sprite_AlphaBlending)  
EndProcedure

Procedure onLoadSuccess()
  Static CountElement
  
  CountElement + 1
  
  If IsSprite(ball\id)
    With Ball
      \x = 200
      \y = 150
      \vy = 3
    EndWith
  EndIf
  
  If IsSprite(demo)
    RotateSprite(demo, -15, #PB_Absolute)
  EndIf
  
  If CountElement = 3
    FlipBuffers()
  EndIf
EndProcedure

Procedure onLoadError()
EndProcedure

Procedure gameLoop()
  resizeScreen(#True)
  
  ClearScreen(RGB(205, 92, 92))
  DisplayTransparentSprite(background, 0, 0)
  DisplayTransparentSprite(demo, 10, 20)
  RotateSprite(ball\id, 1, #PB_Relative)
  DisplayTransparentSprite(ball\id, ball\x, ball\y) 

  With ball
    \y + \vy
    If \y < 0 Or \y > ScreenHeight() - 100
      \vy * -1
    EndIf
  EndWith
  
  FlipBuffers()
EndProcedure

Procedure resizeScreen(Center.b = #False)
   !var canvas = document.getElementsByTagName("CANVAS")[0];
   !var canvasRatio = canvas.height / canvas.width;
   !var windowRatio = window.innerHeight / window.innerWidth;
   !var width;
   !var height;

   !if (windowRatio < canvasRatio) {
   !    height = window.innerHeight;
   !    width = height / canvasRatio;
   !} else {
   !    width = window.innerWidth;
   !    height = width * canvasRatio;
   !}

   !canvas.style.width = width + 'px';
   !canvas.style.height = height + 'px';
   
   If Center = #True
   !    var style = canvas.style;
   !    style.marginLeft = "auto";
   !    style.marginRight = "auto";
   !    var parentStyle = canvas.parentElement.style;
   !    parentStyle.textAlign = "center";
   !    parentStyle.width = "100%";
	 EndIf
EndProcedure

■ Code and assets.
https://github.com/falsam/SpiderBasic-R ... master.zip

[InterGeek]

@falsam

Thank you!!!