首页 > 代码库 > 【v2.x OGE教程 15】 布局相关

【v2.x OGE教程 15】 布局相关


1.父与子关系

我们可以在Entity类看到很多parent(父)与child(子)这样的字眼,这是游戏引擎中常有的概念,简单而言是一种has-a的关系

对应代码:

B.attachChild(A);

B.attachChild(C);

C.attachChild(D);

从代码和图片可以看出

B没有父

B的子是AC

AC的父都是B

C的子是D

D的父是C


2.实体的相对布局

Entity方法中,Entity常用相对布局来实现界面效果,而且可以利用相对布局达到适配的效果。

private void initRectangle() {

        // white_rect对象在当前Scene中居中摆放

        Rectangle white_rect=new Rectangle(0,0,100,100,

                        this.getVertexBufferObjectManager());

        white_rect.setCentrePosition(TestScene.this.getCameraWidth() /2,

                        TestScene.this.getCameraHeight() /2);

        // white_rect对象添加至场景TestScene

        TestScene.this.attachChild(white_rect);

 

        // green_rect默认坐标 0,0 宽、高为50的矩形

        green_rect=new Rectangle(0,0,50,50,this.getVertexBufferObjectManager());

        // white_rect的顶部Y值将设置在white_rect的底部

        green_rect.setTopPositionY(white_rect.getBottomY());

        // green_rect的中心Xwhite_rect的中心X一致

        green_rect.setCentrePositionX(white_rect.getCentreX());

        green_rect.setColor(Color.GREEN);

        // green_rect对象添加至场景TestScene

        TestScene.this.attachChild(green_rect);

}



3.Layer

图层的基类是Entity,图层是逐个叠加的,类似于制作卡通动画时所用的赛璐珞。图层用来对场景中的Sprite等实体进行管理控制,以便在同一场景使用不同的图层达到表现效果。

如天天酷跑,有了图层,我们可以将RPG游戏中的按钮,状态放在一个场景中,游戏内容可以放到另一个图层中,这样就不会相互干扰了。


4.ZIndex的使用

有时候因为需求,需要将原本在底部的Entity置顶,那么就需要用到ZIndex这个参数,两者对比,ZIndex较大的Entity在上面,所以设置好ZIndex的值后,用sortChildren对其重新排序。


5.IEntityGroup

只有实现这个接口的类才可以进行这样的操作,这种嵌套方式可以让开发自行定义游戏层级结构

LayerA.attachChild(layerB);

LayerB.attachChild(layerC);


6.适配原理(多分辨率支持策略和原理)

游戏设计分辨率:

我们自己定义游戏的分辨率是多少(例如800×480),然后UI根据这个分辨率来进行绘图

手机屏幕分辨率:手机自身屏幕的分辨率

 

期望分辨率=游戏设计分辨率

实际分辨率=手机屏幕分辨率

 

首先确定是横屏游戏还是竖屏游戏,假设手机是320×480,是竖屏游戏,并且游戏设计分辨率是480×800

举例:以保持宽不变,高适配。假设UI给的图是480×800

 

屏幕宽高比=实际分辨率宽(320)/实际分辨率高(480)=期望分辨率宽(480)/期望分辨率高

 

我们可以得到期望分辨率高等于720,因为UI 给图的高是800,那么空出来那80=800-720部分就是图中没有阴影的那一部分。

在手机显示效果图

1. @Override

2. protectedPixelPerfectEngineOptions onCreatePixelPerfectEngineOptions() {

3.     PixelPerfectEngineOptionspixelPerfectEngineOptions = new PixelPerfectEngineOptions(this,ZoomCamera.class);

4.     pixelPerfectEngineOptions.setDesiredSize(480);

5.     pixelPerfectEngineOptions.setScreenOrientation(ScreenOrientation.PORTRAIT_FIXED);

6.     pixelPerfectEngineOptions.setPixelPerfectMode(PixelPerfectMode.CHANGE_HEIGHT);

7.     returnpixelPerfectEngineOptions;

8. }

复制代码

 

对应源码

public EngineOptions createEngineOptions() {

    float[] screenSize = this.getScreenSize();

    float screenWidth = screenSize[0];

    float screenHeight = screenSize[1];

    float screenRatio = screenWidth / screenHeight;

    float cameraWidth = this.mDesiredSize;

    float cameraHeight = this.mDesiredSize;

    if (this.mPixelPerfectMode == PixelPerfectMode.CHANGE_WIDTH) {

        cameraWidth = this.mDesiredSize * screenRatio;

    } else if (this.mPixelPerfectMode == PixelPerfectMode.CHANGE_HEIGHT) {

        cameraHeight = this.mDesiredSize / screenRatio;

    }

    Class<?>[] parameterTypes = { float.class, float.class, float.class,float.class };

    Object[] argParam = { 0.0f, 0.0f, cameraWidth, cameraHeight };

    Camera camera = ReflectionUtils.newInstance(this.mCameraCls, parameterTypes, argParam);

    EngineOptions engineOptions = new EngineOptions(true, this.mScreenOrientation, new FillResolutionPolicy(), camera);

    engineOptions.getTouchOptions().setNeedsMultiTouch(true);

    engineOptions.getAudioOptions().setNeedsSound(true);

    engineOptions.getAudioOptions().setNeedsMusic(true);

    engineOptions.getRenderOptions().setDithering(true);

    return engineOptions;

}

 

 

 

 

【v2.x OGE教程 15】 布局相关