Question

回答

置顶Canvas的大小和真机实际的屏幕显示范围不一致。精选热门

2018-08-224114浏览问题模块： Bug反馈

框架类型	问题类型	操作系统	工具版本
小游戏	Bug	Windows	1.02.1808101

我创建了一个小游戏项目，在canvas.height、canvas.width得到的值和window.innerHeight、window.innerWidth、SystemInfo.windowHeight、SystemInfo.windowWidth是一样的，但是这些方法获得的屏幕尺寸和真机上的实际屏幕值不一致。，我用的是HuaWei M9 手机，真实屏幕尺寸是1920:1080，但是在小游戏环境下的到的永远是768:732，而且在Canvas上绘制东西显示的东西右侧和下侧面会被裁剪，这是为什么？但在模拟器中屏幕大小和选定的模拟器是一样的，也不会出现裁剪现象。

babylon.min.js可以在wx5952a4b12e404513这小程序的提交目录下得到。

import BABYLON from './libs/babylon.min'

// import Music from './runtime/music'

import GameInfo from './runtime/gameinfo'

var self;

/**

* 游戏主函数

*/

export default class Main {

;

scene;

engine;

camera;

touchInput;

gameinfo;

dirCount;

constructor() {

self = this;

var red, green, blue, yellow;

var width = canvas.width;

var height = canvas.height;

console.log('canvas size:' + height + ' ' + width);

console.log('window size:' + window.innerHeight + ' ' + window.innerWidth);

var SystemInfo = wx.getSystemInfoSync();

console.log('SystemInfo:' + SystemInfo);

console.log(' .SDKVersion:' + SystemInfo.SDKVersion);

console.log(' .batteryLevel:' + SystemInfo.batteryLevel);

console.log(' .benchmarkLevel:' + SystemInfo.benchmarkLevel);

console.log(' .brand:' + SystemInfo.brand);

console.log(' .devicePixelRatio:' + SystemInfo.devicePixelRatio);

console.log(' .fontSizeSetting:' + SystemInfo.fontSizeSetting);

console.log(' .language:' + SystemInfo.language);

console.log(' .model:' + SystemInfo.model);

console.log(' .pixelRatio:' + SystemInfo.pixelRatio);

console.log(' .platform:' + SystemInfo.platform);

console.log(' .screenHeight:' + SystemInfo.screenHeight);

console.log(' .screenWidth:' + SystemInfo.screenWidth);

console.log(' .statusBarHeight:' + SystemInfo.statusBarHeight);

console.log(' .system:' + SystemInfo.system);

console.log(' .version:' + SystemInfo.version);

console.log(' .windowHeight:' + SystemInfo.windowHeight);

console.log(' .windowWidth:' + SystemInfo.windowWidth);

//创建2DCanvas和2D上下文

var canvas_2d = wx.createCanvas('canvas_2d');

var ctx = canvas_2d.getContext('2d');

//加载巴比伦3D引擎（使用默认的Canvas）

var engine = self.engine = new BABYLON.Engine(canvas, true);

canvas.width = width;

canvas.height = height;

canvas_2d.width = width;

canvas_2d.height = height;

console.log('canvas_2d size:' + canvas_2d.height + ' ' + canvas_2d.width);

// 通过引擎创建基本场景

var scene = self.scene = new BABYLON.Scene(engine);

scene.clearColor = new BABYLON.Color3(0.5, 0.8, 0.9);

//设置场景的动力(G重力, 基于Y轴)

scene.gravity = new BABYLON.Vector3(0, -0.9, 0);

//设置场景碰撞

scene.collisionsEnabled = true;

var gameinfo = self.gameinfo = new GameInfo();

// var music = new Music();

//创建天空盒（其实就是个box）

var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);

var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);

skybox.material = skyboxMaterial;

skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("https://www.babylonjs.com/assets/skybox/nebula", scene);

//设置图片的坐标类型（天空盒）

skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;

//diffuseColor:漫反射颜色

skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);

//specularColor:镜面反射颜色

skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);

//不接受灯光渲染

skyboxMaterial.disableLighting = true;

//反而不剔除

skyboxMaterial.backFaceCulling = false;

// BABYLON.SceneLoader.Append("https://www.babylonjs.com/Assets/DamagedHelmet/glTF/", "DamagedHelmet.gltf", scene, function (meshes) {

// });

// 参数：名字，位置，所属场景

var camera = self.camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, -10), scene);

//给相机的目标设置特定的位置（相机总是朝向它的目标），在这个例子中设置为场景的原点

camera.setTarget(BABYLON.Vector3.Zero());

var touchInput = self.touchInput = new BABYLON.FreeCameraTouchInput();

camera.inputs.add(touchInput);

touchInput.attachControl(canvas, true);

//将相机和画布关联

// camera.attachControl(canvas, true);

// 创建基本光源, 目标位于 x:0,y:1,z:0 -(由天空出现)

var light = new BABYLON.DirectionalLight('light1', new BABYLON.Vector3(-5, -5, 5), scene);

// // 创建一个内置的“球”的形状,它的构造函数包括5个参数:名称、宽度、深度、细分,场景(例子中仅4个参数)

var sphere1 = BABYLON.Mesh.CreateSphere('sphere1', 16, 1, scene);

red = new BABYLON.StandardMaterial("red", scene);

red.diffuseColor = new BABYLON.Color3(1, 0, 0); //红

sphere1.material = red;

var points = [];

for (var i = 0; i < 1000; i++) {

var point = new BABYLON.Vector3();

point.x = 5 * Math.cos(i * 0.01 * 2 * Math.PI);

point.y = 1 * Math.cos(i * 0.05 * 2 * Math.PI);

point.z = 3 * Math.cos(i * 0.1 * 2 * Math.PI);

points.push(point);

}

var lines = BABYLON.Mesh.CreateLines("lines", points, scene);

lines.color = new BABYLON.Color3(1, 0, 0); //红

wx.onTouchStart(this.onTouchStart);

wx.onTouchEnd(this.onTouchEnd);

//一个特殊的顶点着色，没有任务矩阵变换

BABYLON.Effect.ShadersStore["hudVertexShader"] = `

#ifdef GL_ES

precision highp float;

#endif

// Attributes

attribute vec3 position;

attribute vec2 uv;

// Normal

varying vec2 vUV;

void main(void) {

gl_Position = vec4(position, 1.0);

vUV = uv;

}

`;

//最普通片元着色器，只有一个2D采样

BABYLON.Effect.ShadersStore["hudFragmentShader"] = `

#ifdef GL_ES

precision highp float;

#endif

varying vec2 vUV;

// Refs

uniform sampler2D textureSampler;

void main(void) {

gl_FragColor = texture2D(textureSampler, vUV);

}

`;

var hudMaterial = new BABYLON.ShaderMaterial("hud", scene, {

vertexElement: "hud",

fragmentElement: "hud"

},

{

needAlphaBlending: true,

attributes: ["position", "uv"],

samplers: ["textureSampler"]

});

var planeVertexData = BABYLON.VertexData.CreatePlane({ size: 2 });//从-1，-1 到 1,1的简单平面覆盖整个3D空间

// delete planeVertexData.normals;

var hud = new BABYLON.Mesh("Hud", scene);//HUD网格对象

planeVertexData.applyToMesh(hud);

//贴图大小和2D屏幕大小一致

var hudTexture = new BABYLON.DynamicTexture("dynamic texture", { width: canvas_2d.width, height: canvas_2d.height }, scene, true);

var textureContext = hudTexture.getContext();//贴图的绘制上下文

hud.material = hudMaterial;

hudMaterial.setTexture("textureSampler", hudTexture);

hudMaterial.backFaceCulling = false; //关闭背面裁剪

hudMaterial.disableDepthWrite = true;//关闭写深度缓存

hudTexture.update();//贴图更新

window.onresize = (window, event)=>{

console.log('window:' + window );

console.log('event:' + event );

};

// //在引擎中循环运行这个场景

var isUp = true;

// var count = 0;

// var hitCount = 0;

// self.dirCount = 0;

engine.runRenderLoop(function () {

// console.log('window size:' + window.innerHeight + ' ' + window.innerWidth);

// //在2DCanvas上绘制两个矩形

if (isUp){

ctx.clearRect(0, 0, canvas_2d.width, canvas_2d.height);

ctx.fillStyle = 'blue';

ctx.fillRect(0, 0, 100, 100);

ctx.fillStyle = 'red';

ctx.fillRect(canvas_2d.width - 100, canvas_2d.height - 100, 100, 100);

// //将2DCanvas绘制贴图的上下文

textureContext.drawImage(canvas_2d, 0, 0);

//贴图更新

hudTexture.update();

//保证每一帧HUD都在

hud.position = new BABYLON.Vector3(camera._currentTarget.x, camera._currentTarget.y, camera._currentTarget.z);

}

isUp = !isUp;

scene.render();

});

}

offsetX;

offsetY;

onTouchStart(event) {

console.log(event);

let lastTouchPoint = event.changedTouches[0];

self.offsetX = lastTouchPoint.screenX;

self.offsetY = lastTouchPoint.screenY;

let x = event.touches[0].clientX

let y = event.touches[0].clientY

// let area = self.gameinfo.btnArea

// if (x >= area.startX

// && x <= area.endX

// && y >= area.startY

// && y <= area.endY)

// self.dirCount = 0;

}

onTouchEnd(event) {

console.log(event);

let lastTouchPoint = event.changedTouches[0];

self.offsetX = lastTouchPoint.screenX - self.offsetX;

self.offsetY = lastTouchPoint.screenY - self.offsetY;

self.camera.inputs.attached.touch._offsetX = self.offsetX;

self.camera.inputs.attached.touch._offsetY = self.offsetY;

self.camera.inputs.attached.touch.touchAngularSensibility = 50000;

self.camera.inputs.attached.touch.touchMoveSensibility = 250;

// var target = camera.getTarget();

// target.x += this.offsetX;

// target.y += this.offsetY;

// camera.setTarget(target);

}

置顶Canvas的大小和真机实际的屏幕显示范围不一致。精选热门

请选择投诉理由

删除当前帖子

删除后帖子内容及评论将一并被删除，且不可恢复。

关注“微信开放社区”公众号

反馈

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

关注“微信开放社区”公众号