foreword
In some types of games, if it is an essential function to zoom in and out of a certain part of the game scene in treasure-finding games, fault-finding games, shooting and aiming games, etc., how to achieve the effect of a magnifying glass Woolen cloth?
train of thought
The core part is the use of the camera. First of all, you need to understand the principle of the camera. Just like the camera in real life, the camera is used for shooting. In the game, it is equivalent to the human eye for observing the game world. The picture taken by the camera, the generated photo, that is, Texture, will eventually be displayed on the screen.
To realize the magnifying glass effect, it is necessary to create a separate camera to magnify the local details, and then adjust the zoom ratio of the camera to enlarge or reduce the partial details. Finally, use the Mash component to crop the extra parts, leaving only the local details we want.
extension
The camera currently provides 2 modes: ORTHO and PERSPECTIVE. ORTHO is an orthographic projection mode, also known as "parallel projection". The principle is to project images onto the screen through parallel light, which is mainly used to shoot 2D pictures. PERSPECTIVE is a perspective projection. It is a cone-shaped imaging mode. It is a perspective view obtained by projecting an object from a certain projection center onto a single projection surface. Close, mainly used for shooting 3D images.
Simply understand, when the Camera set to ORTHO mode is an orthogonal camera, that is, a 2D camera. When the Camera is set to PERSPECTIVE mode, it is a perspective camera, that is, a 3D camera.
Multiple camera content overlay? How to manage?
This needs to combine the Visibility of the Camera and the Layer of the node to determine the group rendering. When the camera is enabled, if the Layer of node A is set to UI_2D, and if UI_2D in the Visibility of camera C is checked, then this camera C will render this node A. If UI_2D in the Visibility of camera C is not checked, then this camera C will not render this node A.
Multiple camera content rendering, how to decide which camera to render first?
There is a priority attribute in the camera Camera. The smaller the value, the earlier the rendering. For example, the priority of camera A is 0, and the priority of camera B is 1. Then the rendering content of camera A will be rendered first, and then the rendering content of camera B will be rendered. But because of the drawing order, when we finally look at the drawing results, we will see that the rendering content of camera B is overlaid on the rendering content of camera A.
How to clear camera content?
The camera provides various Clear Flags settings. DONT_CLEAR is to not clear the contents of the camera. DEPTH_ONLY is to clear the depth only. SOLID_COLOR will clear the color, depth and stencil buffer. SKYBOX is to enable the skybox and only clear the depth.
If there is a clear color setting, then Clear Color will be used to clear the parts that are not rendered by the camera.
Implementation steps
- Add a magnifying glass UI, and add a Sprite component for the content display of the magnifying glass. Add a Mask component on the Sprite component to cut the redundant display content.
- Add a CameraMag dedicated to rendering the magnifier UI. Add a camera CameraBg for rendering map and magnifying glass. Why do you need 3 cameras? The Camera is used to render the terrain. Finally, we will zoom in or zoom out the content rendered by the Camera, and finally render the content rendered in the magnifying glass. CameraMag is just the UI for rendering the magnifying glass. Because we need to split the UI of the magnifying glass and the map into different layers, we let CameraMag only render the UI of the magnifying glass, and the Layer of the UI of the magnifying glass is set to a separate magnifier.
- by code
initCamera (){
const visibleRect = view.getVisibleSize();
let rendertex = new RenderTexture();
rendertex.initialize({
width: visibleRect.width, height:visibleRect.height });
let sp = new SpriteFrame();
this.cameraNode.getComponent(Camera)!.targetTexture = rendertex;
sp.texture = rendertex;
this.spriteNode.getComponent(Sprite)!.spriteFrame = sp;
this.spriteNode.setScale(this.scaleFactor, this.scaleFactor, 1);
}
By creating a new RenderTexture, and then setting the RenderTexture to the targetTexture of the camera, all the rendering content of the camera will be rendered to the RenderTexture. Then we mount the RenderTexture to the Sprite component of the magnifying glass for display.
- Add some progress bars to adjust the multiple.
Summarize
The effect of the magnifying glass is not easy to grasp. The main thing is to understand the principle of the camera, RenderTexture and group rendering.
reference example
https://gitee.com/yeshao2069/CocosCreatorDemos/tree/v3.7.x/demo/2d/Creator3.7.0_2D_Magnifier