Dicas & Tutoriais

Usando a mesa gráfica Wacom no Blender

Há uns três meses eu comprei uma mesa gráfica Wacom (modelo Bamboo Connect) e não poderia estar mais satisfeito: se antes eu sofria com as dores e limitações do mouse, tudo isso foi embora com o uso da mesa digitalizadora.

No entanto, ninguém é perfeito. Alguns softwares “empacam” com a mesa, não reconhecendo os cliques, como é o caso do programa TexturePacker (em que tenho que usar o mouse ou o botão do touchpad para os cliques – note que estou me referindo à versão Windows, não testei em outros sistemas).

Dicas & Tutoriais · Game design · Software

Usando o Inkscape como Level Editor

No post sobre o meu projeto de jogo atual eu mencionei que iria deixar de lado o Level Editor in-game para usar uma forma mais ágil de criar as fases do jogo. A solução então que já tinha na cabeça foi a de adotar o Inkscape para isso.

Não poderia ter sido mais feliz. Com o Inkscape, além de tornar a edição dos níveis mais robusta, fácil e agradável, o esquema da programação se tornou extremamente simples, ao contrário do complicado e limitado (em boa parte pelo tamanho da janela do game em Flash) editor in-game.

ActionScript · Dicas & Tutoriais · Flash

Detectando quais teclas estão pressionadas em ActionScript 3

É simples você saber qual tecla foi pressionada em ActionScript. Um pouco mais complicado é saber qual conjunto de teclas estão sendo pressionadas simultaneamente. Isto pode ser necessário em caso de games, como num de corrida, em que o usuário pressionará várias teclas ao mesmo tempo, como um botão para acelerar, outro para direcionar o carro, e assim vai.

Algumas bibliotecas oferecem esse recurso, como o CASALib. No entanto basta um código simples para isso. A seguir, segue um exemplo em que são mostradas num campo de texto as teclas que estão sendo pressionadas num momento. No campo de texto será exibido os valores keyCode (a representação da tecla em número da tabela ASCII) das teclas.

[as3]
// campo de texto informativo
var output:TextField = new TextField();

// as teclas pressionadas
var arr_teclas:Array = new Array();

// listeners que detectarão o pressionamento de teclas
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown);
stage.addEventListener(KeyboardEvent.KEY_UP, keyUp);

// tamanho do texto e adicionando ao stage
output.text = “Teclas pressionadas: “;
output.scaleY = output.scaleX = 2;
output.width = 300;
addChild(output);

function keyDown(evt:KeyboardEvent):void {
/* se não houver nenhuma tecla na array que
* corresponda à tecla pressionada,
* adiciona a atual à array */

if (arr_teclas.indexOf(evt.keyCode) < 0) { arr_teclas.push(evt.keyCode); } // exibe as teclas pressionadas atualmente output.text = "Teclas pressionadas: " + arr_teclas.join(); }function keyUp(evt:KeyboardEvent):void { /* Se a tecla deixou de ser pressionada, * busca ela na array e a remove */ if (arr_teclas.indexOf(evt.keyCode) >= 0) {
arr_teclas = arr_teclas.splice(0, arr_teclas.indexOf(evt.keyCode));
}

// exibe as teclas pressionadas atualmente
output.text = “Teclas pressionadas: ” + arr_teclas.join();
}
[/as3]

Veja o resultado a seguir, pressionando teclas (dê foco ao SWF clicando no quadro abaixo):

ActionScript · Dicas & Tutoriais

Criando um sistema de partículas simples com ActionScript 3.0

Há várias maneiras de como se criar partículas em Flash. Há desde bibliotecas que facilitam o trabalho e permitem criar efeitos excelentes (é o caso da Tweensy e a sua parte – ainda em beta – FX) até os tutoriais dificílimos disponíveis na Web, que geralmente envolvem muita matemática – e que são muito bons -, de sites como o Flash & Math.

No entanto, até que não é muito complicado criar efeitos simples usando bibliotecas como a TweenMax. Com uma quantidade enxuta de linhas é possível fazer efeitos interessantes.

A seguir, posto um exemplo bem simples, mas que serve para ilustrar que usar métodos e métodos para controle de tempo e criação de efeitos são desnecessários usando TweenMax:

[as3]
package
{
import flash.display.*;
import flash.events.*;
import com.greensock.*;

/**
* …
* @author Francisco Prado
*/
public class Main extends MovieClip
{
private var volume:int = 0;
private var particulas:Array = new Array();

public function Main():void
{
// inicia (ou desenha mais) “partículas”
desenharParticula();
}

private function desenharParticula():void {
var mc:MovieClip = new MovieClip();
mc.graphics.beginFill(Math.round(Math.random()*0x6666ff));
mc.graphics.drawCircle(0, 0, 5);
mc.graphics.endFill();

mc.x = 200;
mc.y = 300;

addChild(mc);

// fazendo as “partículas” subirem e desaparecerem
TweenMax.to(mc, Math.random() + 1,
{ bezier: [
{ x: mc.x, y: mc.y },
{ x: (Math.random() * 50) + mc.x, y: 250 },
{ x: (Math.random() * -50) + mc.x, y: 180 },
{ x: mc.x, y: 80 }],
orientToBezier:true, blurFilter: { blurX: 10, blurY: 10 }, alpha: 0, motionBlur:true,
onComplete: function removendo():void {
removeChild(mc);
mc = null;
}
});

// chama o método para adicionar novas partículas à cena
TweenMax.to(this, 0, { delay: 0.05, onComplete: desenharParticula } );
}
}
}
[/as3]

O código fará o efeito seguinte:

A ideia aqui não é mostrar necessariamente como fazer um sistema bonitinho de particulas, mas sim demonstrar que com uma linha do TweenMax é possível fazer um método para tempo e efeitos de cores e luz.

Usando ActionScript “puro” seria necessário apelar para uma variável Timer, uma outra linha para iniciar a contagem e uma função para manipular eventos no AS (TimerEvent).

Já com uma linha (no caso, a 48 do exemplo anterior) do TweenMax é possível fazer uma contagem (usando a propriedade de atraso delay) é possível fazer todas as coisas: o tempo e a chamada da função (no atributo onComplete é chamado o método que adicionará mais partículas).

A mesma situação na linha que fazem as partículas subirem e sumirem. Com o parâmetro bezier da TweenMax é possível fazer animações em curvas. Você pode conhecer mais efeitos testando nesta página, na seção Plugins.

Enfim, com um punhado de linhas é possível fazer efeitos bem interessantes, dispensando assim volumosos códigos chatos para caramba.

Acredito que, em se trantando de Flash – largamente utilizado na publicidade -, quanto menos linhas de código melhor, pois os prazos nem sempre são generosos (geralmente tudo é “pra ontem” 🙂 ) e eficiência é sempre fundamental.

Dicas & Tutoriais · Padrões Web

Editores de texto em JavaScript/HTML para uso no seu site

Editor de Texto em JavaScriptNesta postagem rápida falarei de editores de texto feitos em JavaScript de código aberto, para uso em sites, blogs, entre outros.

A maioria funciona de modos parecidos: basta você adicionar uma área de texto em HTML (<textarea></textarea>), ligar o arquivo JavaScript da biblioteca – podendo definir algumas características – e pronto.

Via Google são fáceis de encontrar, mas aqui vou aproveitar para falar a respeito de dois deles com quem já lidei: o TinyMCE e o NicEdit.

TinyMCE – provavelmente o mais popular, utilizado inclusive pelo WordPress, Joomla, entre outros. Talvez seja o que conheça melhor, não por ter usado em algum trabalho, mas por curiosidade (fucei sua documentação e experimentei criar plugin, entre outros). Gostei muito: bem completo, integrado com jQuery (permite usar código desta biblioteca sem grande conflito), fácil de usar, boa documentação, entre outros.

CKEditor – nunca usei, mas parece ser tão bom quanto o TinyMCE. A barra de ferramentas é bem completa, a interface é linda, além de já vir com versão em português. Só tenho dúvidas com relação à documentação: procurei e não encontrei. Além de tudo, ao que parece, vários recursos são pagos (?). Enfim, vale ficar de olho.

NicEdit – já usei este, na seção de comentários deste blog, até um tempo atrás. Retirei ele por “comer” as quebras de linha (as tags <br /> – o texto do comentarista ficava todo colado). Acho-o muito limitado, mas talvez seja o mais simples de se integrar. Para quem não quer lidar com muito código, talvez seja a melhor solução.

Enfim, acredito que podemos resumir assim: caso queira um editor completo e precise personalizá-lo, o TinyMCE é para você. Se você quer um editor bonitão, vá de CKEditor. Agora, se você não entende muito de Javascript nem de HTML, experimente o NicEdit.

E este é o fim da postagem. E caso queira sair, aperte o botão de “Fechar” do seu navegador! 😀