Efeito paralaxe (parallax) com 4 camadas para Construct2 Free edition

1

Index

Taggé

Fichiers attachés

Les fichiers suivants ont été attachés à ce tutoriel:

.png
.png

event-variable-dialog.png

Télécharger maintenant 39.22 KB
.rar

Contributeurs

Statistiques

22,978 visites, 31,430 vues

Outils

Partager

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 28 Mar, 2017. Last updated 25 Feb, 2019

Parâmetros do Paralaxe (Parallax)

No lado esquerdo da tela podemos ver as propriedades de todos os objetos que escolhemos, você precisa selecionar e editar os parâmetros sobre o efeito de paralaxe para cada layer, você pode fazer isso antes ou depois de adicionar os backgrounds, não importa a ordem.

BG1-----0,0

BG2-----15,15

BG3-----100,100

Para se ter um efeito legal, você precisa definir a cor de fundo de suas imagens como sem cor ou como transparente quando editá-las, nos arquivos que eu disponibilizei você pode ver isso.

Também no painel de propriedades, você precisa mudar o parâmetro "transparent" para YES, apenas para o layer 1 e 2.

Outra dica, você nunca vê as imagens de backgrounds nas camadas diferentes.

Sinta-se livre para mudar os valores de parallax como desejar, para ver uma exibição do mesmo, apenas clique em Editor Properties que está abaixo da seção Layer properties, e escolha yes para a opção Parallax in editor* para a camada do BG3.

Em seguida, role a barra horizontal e você verá alguma coisa como isso:

Como você moveu a barra horizontal, as imagens de background movem em velocidades diferentes, para o efeito completo com nossas imagens, precisamos ajustar as imagens do BG2 e BG3 para width: 6000, como é plano de fundo (tiled Background) que vai repetir infinitamente.

NOTA: Quando tentamos adicionar uma imagem ou gráfico maior que 1024 pixels, o Construct 2 irá nos enviar um aviso sobre performance de browser, então sugiro para você, tomar cuidado quando desenhar seus gráficos.

  • 0 Comments

Want to leave a comment? Login or Register an account!