• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

Support for gyroscope function in canvas on mobile.

Explorer ,
Feb 21, 2024 Feb 21, 2024

Copy link to clipboard

Copied

I have a problem and I need help. The gyroscope function works properly. There is a strange scaling of "anim", "Object". The black frame should be all over. If I correct the frame, the gyroscope does not work. I can not deal with it. Please help.

https://reklamy.serwisyregionalne.pl/2023/testy/zyroskop2.html

 

// Inicjalizacja sceny
var stage = new createjs.Stage("canvas");

// Size of the "Object" symbol
var objectWidth = 300;
var objectHeight = 600;

// We add the "Object" symbol to the scene
var movableObject = new lib.Object(); // Here "lib" is the name of the library that contains the "Object" symbol
movableObject.setBounds(0, 0, objectWidth, objectHeight); // Set the boundaries of the object
stage.addChild(movableObject);

// Size of the "Anim" symbol
var animWidth = 300;
var animHeight = 600;


// Starting position of objects
//staticAnimSymbol.x = 0;
//staticAnimSymbol.y = 0;
//movableObject.x = 0;
//movableObject.y = 0;

// We add the "Anim" symbol to the scene
var staticAnimSymbol = new lib.anim(); // Here "lib" is the name of the library that contains the "Anim" symbol
staticAnimSymbol.setBounds(0, 0, animWidth, animHeight); // Set the boundaries of the object
staticAnimSymbol.x = 0; // Alignment on the X axis
staticAnimSymbol.y = 0; // Position on the Y axis
stage.addChild(staticAnimSymbol);

// Listen to the device event
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', handleOrientation);
} else {
console.log("Your device does not support gyroscope.");
}
stage.update();

// Function handling device movement
function handleOrientation(event) {
// We get the rotation angles from the device
var beta = event.beta; //Rotation angle in the X plane
var gamma = event.gamma; //Rotation angle in the Y plane

// We update the position of the "Object" symbol
movableObject.x = canvas.width / 2 + (gamma * 5);
movableObject.y = canvas.height / 2 + (beta * 5);

// We limit the offset so that the object does not go out of bounds
movableObject.x = Math.max(0, Math.min(canvas.width - objectWidth, movableObject.x));
movableObject.y = Math.max(0, Math.min(canvas.height - objectHeight, movableObject.y));

// We refresh the scene
stage.update();
}

// Start the Animation
createjs.Ticker.addEventListener("tick", function() {
stage.update();
});
createjs.Ticker.framerate = 60; // Set the number of frames per second (FPS)

TOPICS
ActionScript , Ad development , Code , Error

Views

46

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
no replies

Have something to add?

Join the conversation