tutorial Dx Studio 2 1

Dx Studio

2.1

Generated by Foxit PDF Creator © Foxit Softwarehttp://www.foxitsoftware.com For evaluation only.

Tutorial 1 Este é o 1º de uma série de tutorias traduzidos do Help do Dx Studio e

implementados/modificados por mim, Bruno H. Marchese para uma melhor

compreensão e agilidade no aprendizado de quem esta pensando em começar a

programar jogos e aplicações 3d iterativas, tanto apara apresentação em tempo real

como para Web e aplicativos do Office (porque o DX Studio tem essa integração).

O Dx Studio é uma nova engine que trás efeitos de iluminação e sombra em

tempo real com um mínimo de programação possível, você poderá desenvolver toda a

programação em Java Script. Ela tem como função controlar todos os aspectos da cena

tanto 2 d como 3 d. Também suporta Activex/COM interface.

Também efeitos de pós produção como: Bloom, fuzzy TV, câmera shake, sépia.

Trabalha com as seguintes extensões: X, 3DS, ASC, PRJ, DXF, IOB, TS, LWO, LP, RTG,

RBS, RWX, SCENE, STL, COA, COB, GEO, WRL, OBJ, XGL, ZGL, XYZ.

Ela foi desenvolvida sob a plataforma do DirectX 9.0 com suporte a pixel and vertex

shader effects.

A versão que nos podermos usar de graça é a Freeware que tem algumas limitações

como no quadro abaixo. Existem ainda a Standard Edition e a Pro Edition.

Feature Freeware Edition

Standard Edition

Pro Edition

Editing capabilities

Visual development environment with docking window support

Integrated scene, mesh, bitmap and sound editors

Context sensitive JavaScript source editor

Instant preview

Player plug-in support with full access to the DirectX interfaces

Pixel and vertex shader effects

Unlimited complexity*

Compatibility

Import common 2D/3D media formats (including X,


3DS, OBJ)

Compressed wave file support (WAV, OGG, MP3)

Streaming video support (MPG, AVI)

Export models to other packages

Link to other players over a network

Integrated database client

Publishing

Fast C++ based player in both EXE and DLL forms

Embed DX Studio documents in a web page, Office document or Visual Studio application

Royalty free distribution

Ability to customize and rebrand player

Support

Installation/bug support

Premium technical support with personal help on coding/using the product and priority feature requests.

* Freeware Edition is limited to 10 mesh/bitmap definitions per scene, 10 objects in the physics engine, and 1000 vertices in the model editor.

Building a Porfolio Application


Aprendizado alcançado:

Embora este seja o 1º tutorial e muito simples ele vem a ser

importantíssimo. Pelo fato de que quando terminarmos estaremos aptos a:

1. Dominar toda a Interface do Dx Studio.

2. Trabalhar com cenas 2d e 3d.

3. Trabalhar com Luzes e mudança de Câmera

4. Carregar um mesh 3D.

5. Mudar a Textura do Mesh 3D.

6. Girar o Mesh 3D

7. Trabalhar com Botões 2D.

8. Básico de Scripts.

Neste tutorial iremos criar um portfólio 3d interativo, onde ira mostrar um modelo

com skin de um personagem do Chris Ollis,embora você possa usar qualquer modelo que você

queira.

Durante este tutorial você vai precisar de diversos modelos do Dxstudio Online. Para

isto você tem que estar conectado com a internet ou baixe estes arquivos em outro

computador e grave para o seu.

Clique abaixo para obter estes arquivos:

Click here to install the tutorial resources in your library

Setting the scene

1. Para começar. Inicie seu Dx Studio e na tela que aparece escolha NEW 3D scene. (Uma nova cena 3d) e clique em Ok.

2. Assim que o Dx Studio construir uma cena padrão 3d com uma luz e uma câmera você deve clicar em: 'Add Mesh' button. E escolher Character, na biblioteca de modelos 3d que ira aparecer.


http://www.dxstudio.com/wikifiles/f2b2afd9-2b4d-458a-9e7d-53f7bf2e215b.dxlibrary

3. Assim que você carregar o modelo 3d ele ira aparecer no meio da tela, dentro da cena 3d. Então você pode apertar F12 que o programa ira Copilar. Após Copilar você poderá navegar pela cena 3d apertando WSDA.

4. Agora vamos adicionar mais objetos 3d na cena. Do lado esquerdo do botão Add Meshes existe o botão Add Enviroment. Então você adicionara um Environment na cena, que se chama choose 'hills_and_blue_sky_1024.dxenv'. Este será o Backgorund.


5. Encontre a janela Objects, ele esta no lado esquerdo da tela, acima, é onde estão listados todos os objetos da cena, que devem ser Câmera, Luz e Character. Ate agora são 3.

Abaixo dela existe o botão verde ADD 3D Object. Você deve clicar nele que adicionar uma nova Câmera. (Add Câmera) faça isso 2 vezes. Daí você terá 3 câmeras na cena.

6. Quando você seleciona uma câmera, você poderá mexer com algumas propriedades dela. Selecione a câmera e clique em P e Z. Para meser no Zoom e no Pan. Você agora devera selecionar a câmera 1 e mudar ela de local. Pois todas as 3 câmeras estão no mesmo local. Cada uma deve estar em um local diferente.


The 2D overlay

7. Acima da Janela Objects existem duas Abas. A Primeira Aba é o gerenciamneto das cenas e a segunda aba é onde você edita e constrói seu mundo 3d.

8. Iremos agora para a 1º aba e criar um nova cena. E essa cena será 2D. Faça isso. Para criar uma nova cena é fácil. Basta clicar no botão verde que fica no canto inferior direito da tela e adicionar uma nova cena 2d.


9. Você agora devera adicionar um arquivo PNG. Que se chama 'paneloverlay.png' este arquivo esta junto com os outros que foram baixados no link fornecido neste tutorial.

Click here to install the tutorial resources in your library

Ele agora ira aparecer na sua lista de bitmaps.

10. Você devera repetir esta operação com TODOS os bitmaps disponíveis que estão no arquivo baixado. Se você estiver com a versão Free, poderá ter no máximo 8 objedos na cena.


http://www.dxstudio.com/wikifiles/f2b2afd9-2b4d-458a-9e7d-53f7bf2e215b.dxlibrary

11. Você devera posicionar os objetos na cena da forma correta, como abaixo. Note que se você tem a versão Free você não vai poder usar todos estes objetos porque nesta cena tem bem mais que 8 objetos.

Scripting

12 e 13. Agora é hora de fazer esses botões funcionarem. Selecione o botão ( bitmap ) referente a Câmera 1 e clique em Edit Script. É só apertar o botão direito do mouse e selecionar a opção desejada.


14. Quando abrir a edição de Script de 2 cliques com o mouse em OnClick: Copie e cole este script.

scenes.scene_1.script.nextCamera();

Salve o script. Porem, ainda não estará funcionando.

15. Va para a edição de cena 3d. e Abra o script geral da cena 3d. É um botão amarelo que se chama “Edit Script”. Logo acima da janela Objects.

Cole este script: 'scene_1_script.txt'

Ele esta junto com os arquivos que você baixou deste tutorial.

Salve o script.


16. Aperte F12 e você vera que cada vez que clica com o mouse na figura da câmera vera que muda a câmera selecionada e você vê o objeto de diferentes ângulos.

17. Clique na Aba de gerenciamento de cenas. Onde mostras as cenas e os Layers e na janela de propriedades dos layers (a direita) mude a posição e o tamanho para, respectivamente:15,12 e 535x578.


18. Agora saia dessa aba e vá para a cena3d. Clique em propriedades da cena, que é aquele botão acima da janela objects. Clique em properties e va até Size, do scene properties e clique em “Auto adjust aspect.”

Adding functionality

19. Vamos voltar para a cena2d. Clique na aba correspondente. Nos iremos editar os scripts dos botões laterais (panelbutton).

Selecione o botão e entre na edição de scripts. Clique em “OnClick”.


20. Dentro do Onclick digite o codigo:

scenes.scene_1.objects.character_1.animation="cheer";

E faça o mesmo para os outros botões. Mas mude a animação para: lookaround, hitgut e "wait”.

Você também poderá adicionar textos e colocar dentro de cada botão para indicar o que eles fazem.

21. Para adicionarmos os scripts para as setas basta fazer o mesmo procedimento.

Selecione a seta esquerda e copie este script. Dentro da função Onclick.

scenes.scene_1.script.turnLeft=true;

Quando você clicar na seta o objeto ficara girando na tela.


22.Agora iremos editar os botões Good e Evil para o personagem trocar de textura.

Você deve deixar apenas 2 botões (apague os outros) o: good_on_1 e o evil_of_1.

Agora terá que renomear esses 2 botões. O good_on_1 renomeie para good_button.

O evil_of_1 renomeie para evil_button.

23. Agora vamos editar o script para esses botões.

Você deve copiar e colar o script que veio pronto junto com o tutorial. Tem um escript para colar no Good_button e um script no evil_button.

Após isto ainda devemos abrir a janela Resources. Que ainda não foi aberta por nós neste tutorial.

É a única aba, que fica embaixo com uma pasta amarela desenhada. Quando clicar nela aparece o botão Add resources e então devemos adicionar 2 texturas:

'Body_02.jpg' e 'Head_02.jpg'


24. Aperte F12 e esta feito nosso 1º Tutorial Completo.


tutorial Dx Studio 2 1

Documents

Transcript of tutorial Dx Studio 2 1