introdução
O efeito de exibição do modelo ao renderizar o modelo 3D na interface 2D
No desenvolvimento de jogos , muitas vezes é necessário exibir um modelo 3D na interface da interface do usuário , como exibição de mudança de personagem na interface de moda , exibição de seleção de chefe na interface de desafio de chefe , etc.
Este artigo apresentará o efeito de exibição do modelo de renderização do modelo 3D no Peace Elite para a interface 2D no desenvolvimento do jogo Cocos .
O projeto fonte deste artigo é obtido no final do artigo, os amigos podem ir por conta própria.
Pontos de conhecimento nesta edição
1.RenderTextura
O mapa de renderização é o objeto de destino de renderização do componente Camera ou Canvas , e o pipeline de renderização usará seu RenderWindow como janela de destino de renderização .
Podemos renderizar a imagem da câmera nele e então definir o recurso de textura do sprite para ele.
2.Câmera
O objeto de câmera na cena de renderização é gerenciado pela Câmera na camada do projeto .
Através dele podemos targetTextureespecificar o mapa de destino de saída de renderização desta câmera . O padrão é vazio e é renderizado diretamente na tela .
3.SpriteFrame
Recurso de quadro Sprite .
Definimos o recurso do objeto de textura por meio de SpriteFrame , que pode ser do tipo.textureTextureBase
Sem mais delongas, vamos dar um exemplo.
Exemplo de renderização de modelo 3D para interface 2D
A seguir, implementaremos passo a passo o efeito de exibição do modelo de renderização do modelo 3D para a interface 2D no Peace Elite .
1. Meio Ambiente
Versão do motor : Cocos Creator 3.8.1
Linguagem de programação : TypeScript
2. Preparação de recursos
Para criar um novo projeto , usei o 3.8.2 para experimentá-lo, e todos podem usar o 3.8.1 para abrir o projeto .
Monte a UI de acordo com a seguinte estrutura . Cocos é a imagem de fundo , ModelSprite é o sprite alvo que é renderizado e Camera é a câmera que captura o modelo .
Em seguida, pegue as galinhas do shopping e transforme-as em pré-fabricadas para emprestar.
3. Escreva o código
Crie um novo ModelRttcomponente e arraste-o para ModelSprite . Ele contém diversas propriedades.
modelUrl,O caminho do modelo é carregado diretamenteresources.load.modelOffsetY,O deslocamento do modelo é usado para ajustar a posição da exibição do modelo.orthoHeight,A altura de visão ortogonal da câmera é usada para ajustar o tamanho do modelo.modelSprite, ator alvo.
export class ModelRtt extends Component {
@property(CCString)
modelUrl: string = "";
@property(CCFloat)
modelOffsetY: number = 0;
@property(CCFloat)
orthoHeight: number = 0;
modelSprite: Sprite = null;
}
Em seguida, escreva loadPrefabo método para resources.loadcarregar o modelo.
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);
});
}
Finalmente, o modelo 3D é renderizado na interface 2D através das etapas a seguir .
- Create
RenderTexture, o tamanho recomendado é 512 , 1024 ou 2048 .
const size = this.node.getComponent(UITransform).contentSize;
const modelRtt = new RenderTexture();
modelRtt.reset({
width: size.width,
height: size.height
});
- Crie o modelo e defina o deslocamento .
const newNode = new Node();
newNode.parent = find("/");
const modelNode: Node = instantiate(prefab);
modelNode.parent = newNode;
modelNode.setPosition(new Vec3(0, this.modelOffsetY, 0));
- Monitore eventos de arrastar e implemente a rotação do modelo .
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);
- Coloque a câmera que criamos na cena e defina alguns parâmetros relacionados . (A câmera adicionada dinamicamente não será renderizada dinamicamente, portanto não a estudaremos por enquanto ).
// 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);
- Define o sprite frame do sprite alvo .
const spriteFrame = new SpriteFrame();
spriteFrame.texture = modelRtt;
spriteFrame.flipUVY = true;
this.modelSprite.spriteFrame = spriteFrame;
4. Demonstração de efeito
Isso conclui o programa de hoje. Por favor, ajude a encaminhar o artigo. A aula acabou!
Conclusão
O projeto fonte deste artigo pode ser obtido enviando CocosModelRTT via mensagem privada .
Códigos-fonte mais práticos foram colocados na Cocos Store . Você pode ler o texto original para ver. Pagar não é apenas a aquisição de conhecimento , mas também o apoio e reconhecimento do autor . Obrigado!
Sou um "Programador de Bilhões de Dólares", um programador com 8 anos de experiência na indústria de jogos. No desenvolvimento de jogos, espero poder ajudá-los e espero que através de vocês eu possa ajudar a todos.
AD: Você pode clicar e pesquisar os minijogos online do autor "Snake Handheld Classic", "Gravity Maze Ball" e "Coloring Journey" por conta própria.
Para ser sincero, quero curtir e assistir ! Por favor , compartilhe este artigo com outros amigos que você acha que precisam dele. Obrigado!
Colunas recomendadas:
Você sabe como Honor of Kings implementa o indicador de alcance de habilidade?
Aprenda padrões de design com um programador mestre de jogos de 8 anos