[100 Cocos-Beispiele] Realisieren Sie den Modellanzeigeeffekt beim Rendern von 3D-Modellen in Peace Elite auf der 2D-Schnittstelle

Einführung

Der Modellanzeigeeffekt beim Rendern des 3D-Modells auf der 2D-Schnittstelle

Bei der Spieleentwicklung ist es häufig erforderlich, ein 3D-Modell auf der Benutzeroberfläche anzuzeigen , z. B. die Anzeige von Charakterwechseln auf der Modeoberfläche , die Anzeige der Bossauswahl auf der Benutzeroberfläche für Bossherausforderungen usw.

In diesem Artikel wird der Modellanzeigeeffekt beim Rendern des 3D-Modells in Peace Elite auf die 2D-Schnittstelle in der Cocos- Spieleentwicklung vorgestellt .

Das Quellprojekt dieses Artikels finden Sie am Ende des Artikels. Freunde können selbst dorthin gehen.

Wissenspunkte in dieser Ausgabe

1.RenderTexture

Die Rendering-Map ist das Rendering- Zielobjekt der Kamera- oder Canvas- Komponente , und die Rendering-Pipeline verwendet ihr RenderWindow als Rendering- Zielfenster .

Wir können das Kamerabild darauf rendern und dann die Texturressource des Sprites darauf einstellen.

2.Kamera

Das Kameraobjekt in der Rendering- Szene wird von der Kamera auf der Projektebene verwaltet .

Wir können damit die Rendering- AusgabezielkartetargetTexture dieser Kamera angeben . Die Standardeinstellung ist leer und wird direkt auf dem Bildschirm gerendert .

3.SpriteFrame

Sprite-Frame -Ressource.

Wir legen die Texturobjektressource über SpriteFrame fest, das vom Typ sein kann .textureTextureBase

Lassen Sie uns ohne weitere Umschweife ein Beispiel geben.

Beispiel für die Darstellung eines 3D-Modells in eine 2D-Schnittstelle

Als Nächstes werden wir den Modellanzeigeeffekt des Renderns des 3D-Modells auf der 2D-Schnittstelle in Peace Elite Schritt für Schritt implementieren .

1. Umwelt

Engine-Version : Cocos Creator 3.8.1

Programmiersprache : TypeScript

2. Ressourcenvorbereitung

Um ein neues Projekt zu erstellen , habe ich 3.8.2 verwendet , um es zu erleben, und jeder kann 3.8.1 verwenden , um das Projekt zu öffnen .

Stellen Sie die Benutzeroberfläche gemäß der folgenden Struktur zusammen . Cocos ist das Hintergrundbild , ModelSprite ist das Ziel-Sprite , das gerendert wird , und Camera ist die Kamera , die das Modell aufnimmt .

Dann nehmen Sie die Hühner aus dem Einkaufszentrum und machen daraus Fertighäuser zum Ausleihen.

3. Code schreiben

Erstellen Sie eine neue ModelRttKomponente und ziehen Sie sie nach ModelSprite . Es enthält mehrere Eigenschaften.

• modelUrl,Der Pfad des Modells wird direkt geladen resources.load.
• modelOffsetY,Der Offset des Modells wird verwendet, um die Position der Modellanzeige anzupassen.
• orthoHeightDie orthogonale Sichthöhe der Kamera wird verwendet, um die Größe des Modells anzupassen.
• modelSprite, Ziel-Sprite.

export class ModelRtt extends Component {
    
    
    @property(CCString)
    modelUrl: string = "";
    @property(CCFloat)
    modelOffsetY: number = 0;
    @property(CCFloat)
    orthoHeight: number = 0;
    modelSprite: Sprite = null;
}

Schreiben Sie dann loadPrefabdie Methode zum resources.loadLaden des Modells.

loadPrefab() {
    
    
    if (!this.modelUrl || !this.modelSprite) {
    
    
        error('Please provide a valid prefab path and target sprite.');
        return;
    }

    resources.load(this.modelUrl, Prefab, (err, prefab) => {
    
    
        if (err) {
    
    
            error('Failed to load the prefab:', err);
            return;
        }

        this.createModel(prefab);
    });
}

Abschließend wird das 3D-Modell durch die folgenden Schritte auf die 2D-Schnittstelle gerendert .

• Erstellen RenderTexturewird eine Größe von 512 , 1024 oder 2048 empfohlen .

const size = this.node.getComponent(UITransform).contentSize;
const modelRtt = new RenderTexture();
modelRtt.reset({
    
    
    width: size.width,
    height: size.height
});

• Erstellen Sie das Modell und legen Sie den Offset fest .

const newNode = new Node();
newNode.parent = find("/");
const modelNode: Node = instantiate(prefab);
modelNode.parent = newNode;
modelNode.setPosition(new Vec3(0, this.modelOffsetY, 0));

• Überwachen Sie Drag-Ereignisse und implementieren Sie die Modelldrehung .

let flag = false;
this.node.on(NodeEventType.TOUCH_START, () => {
    
     flag = true; }, this);
this.node.on(NodeEventType.TOUCH_END, () => {
    
     flag = true; }, this);
this.node.on(NodeEventType.TOUCH_MOVE, (event: EventTouch) => {
    
    
    if (flag) {
    
    
        modelNode.eulerAngles = new Vec3(0, modelNode.eulerAngles.y + event.getDeltaX(), 0);
    }
}, this);

• Holen Sie sich die von uns erstellte Kamera in die Szene und legen Sie einige zugehörige Parameter fest . (Die dynamisch hinzugefügte Kamera wird nicht dynamisch gerendert, daher werden wir sie vorerst nicht untersuchen .)

// const camera = new Node("Camera").addComponent(Camera); //todo：动态添加的Camera模型不会动 
const camera = this.node.getComponentInChildren(Camera);
camera.clearFlags = Camera.ClearFlag.SOLID_COLOR; //设置缓冲清楚标志位
camera.projection = renderer.scene.CameraProjection.ORTHO; //设置相机投影类型
camera.orthoHeight = this.orthoHeight; //设置正交视角高度
camera.clearColor = new Color(0, 0, 0, 0); //设置透明
camera.targetTexture = modelRtt; //设置目标RenderTexture
camera.node.parent = newNode;
camera.node.position = new Vec3(0, 0, 10);

• Legt den Sprite-Frame des Ziel-Sprites fest .

const spriteFrame = new SpriteFrame();
spriteFrame.texture = modelRtt;
spriteFrame.flipUVY = true;
this.modelSprite.spriteFrame = spriteFrame;

4. Wirkungsdemonstration

Damit ist das heutige Programm abgeschlossen. Bitte helfen Sie mit, den Artikel weiterzuleiten. Raus aus dem Unterricht ist vorbei!

Abschluss

Das Quellprojekt dieses Artikels kann durch Senden von CocosModelRTT per privater Nachricht erhalten werden .

Weitere praktische Quellcodes wurden im Cocos Store bereitgestellt . Sie können den Originaltext lesen, um ihn anzuzeigen. Bezahlen ist nicht nur der Erwerb von Wissen , sondern auch die Unterstützung und Anerkennung des Autors . Vielen Dank!

Ich bin ein „Milliarden-Dollar-Programmierer“, ein Programmierer mit 8 Jahren Erfahrung in der Spielebranche. Bei der Spieleentwicklung hoffe ich, Ihnen helfen zu können, und ich hoffe, dass ich durch Sie allen helfen kann.

ANZEIGE: Sie können selbst auf die Online-Minispiele des Autors „Snake Handheld Classic“, „Gravity Maze Ball“ und „Coloring Journey“ klicken und suchen.

Ehrlich gesagt möchte ich es mögen und sehen ! Bitte teilen Sie diesen Artikel mit anderen Freunden, von denen Sie glauben, dass sie ihn brauchen. Danke!

Empfohlene Spalten:

Wissen Sie, wie Honor of Kings den Skill-Range-Indikator implementiert?

8 Jahre Erfahrung im schrittweisen Aufbau des unabhängigen Cocos-Spieleentwicklungs-Frameworks

Lernen Sie Designmuster mit einem 8-jährigen Game-Master-Programmierer

Entwickeln Sie das Snake-Minispiel von Grund auf zu einer Online-Serie