如何实现横屏游戏

[fanmingfei]

          你好，我想问问，那个横屏的话，要怎么设置，我旋转了canvas过去，不过事件点击看着不对。

Originally posted by @zhiqiuyiye in #140 (comment)

[fanmingfei]

https://github.com/eva-engine/FlashArrowMan
首先，确保手机不自动旋转屏幕，可以提示用户关闭手机自动旋转功能。

主动旋转游戏容器
调用 makeHorizental

[fanmingfei]

@zhiqiuyiye

[zhiqiuyiye]

我搬了代码过来，不过我在屏幕的点击事件还是没有触发到最终的gameobject上来。
下面就是我主要的代码了：
body,html{
margin: 0;
padding: 0;
}
body {
position: fixed;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
@media screen and (orientation: portrait) {
html,body{
min-height: 100vh;
background-size : 100vw 100vh;
}
.wrap {
width: 100vh;
height: 100vw;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
transform-origin: 50vw center;
}
}

	@media screen and (orientation: landscape) {
		.wrap {
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
		}
	}

</style> <script src="//cdn.bootcdn.net/ajax/libs/eventemitter3/3.1.2/index.min.js"></script> <script src="./main.js"></script>

然后我创建game就是这个样：
let canvas = document.querySelector('#canvas');
makeHorizental(canvas);

const rendererSystem = new RendererSystem({
canvas: canvas,
width: 1792,//横屏
height: 750,//
// width: 750,//竖屏
// height: 1792,//
antialias: true,
transparent:true,
// resolution: window.devicePixelRatio/2,
// backgroundColor: 0x101010,
enableScroll: false, // 允许页面滚动
});

const game = new Game({
autoStart:true,//游戏是否自动开始
systems: [
rendererSystem,
new ImgSystem(),
new TransitionSystem(),
new SpriteAnimationSystem(),
new RenderSystem(),
new EventSystem(),
new GraphicsSystem(),
new TextSystem(),
new NinePatchSystem(),
],
});
不知哪里有问题？
我在那个makeHorizental里面打印过log，我看了里面的坐标转换，看着也没有错，不过又没有触发到我的gameobject上来。

[zhiqiuyiye]

@fanmingfei 就是canvas转过去没有错，事件没有触发到。

[zhiqiuyiye]

@fanmingfei 就是canvas转过去没有错，事件没有触发到。

我的问题是没有触发tap跟touchend，那个touchstart跟move就正常。奇怪。

[fanmingfei]

手机设置竖排方向锁定。你加我微信maydayfantast

[fanmingfei]

因为 makeHorizental 方法使用了new TouchEvent 没有办法设置 TouchEvent 的target属性，PixiJS 里面用了 TouchEvent.target 属性去判断当前有没有outside，导致touchend没有被触发。

可以通过以下手段解决。
重写了一下PixiJS里面的这个方法，但可能会遇到一些问题，暂时没有验证。

export const fixPIXI = (game: Game) => {
  game.getSystem(RendererSystem).application.renderer.plugins.interaction.onPointerComplete = function onPointerComplete(originalEvent, cancelled, func) {
    var events = this.normalizeToPointerData(originalEvent);

    var eventLen = events.length;

    // if the event wasn't targeting our canvas, then consider it to be pointerupoutside
    // in all cases (unless it was a pointercancel)
    // var eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : '';
    // 这里不加outside了
    var eventAppend = '';

    for (var i = 0; i < eventLen; i++) {
      var event = events[i];

      var interactionData = this.getInteractionDataForPointerId(event);

      var interactionEvent = this.configureInteractionEventForDOMEvent(this.eventData, event, interactionData);

      interactionEvent.data.originalEvent = originalEvent;

      // perform hit testing for events targeting our canvas or cancel events
      this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, func, cancelled || !eventAppend);

      this.emit(cancelled ? 'pointercancel' : 'pointerup' + eventAppend, interactionEvent);

      if (event.pointerType === 'mouse' || event.pointerType === 'pen') {
        var isRightButton = event.button === 2;

        this.emit(isRightButton ? 'rightup' + eventAppend : 'mouseup' + eventAppend, interactionEvent);
      } else if (event.pointerType === 'touch') {
        this.emit(cancelled ? 'touchcancel' : 'touchend' + eventAppend, interactionEvent);
        this.releaseInteractionDataForPointerId(event.pointerId, interactionData);
      }
    }
  };
}