Posts Tagged ‘framework’

Flixel Game Engine – ActionScript 3

No Comments
Postado em 05 nov 2009
Categoria(s) ActionScript, Flash, Flixel, Game, Jogo, Lab

É uma biblioteca Actionscript (Flash) livre, destinada para uma grande variedade de jogos em Flash. Inclui ganchos para gravidade e profundidade. Já possui métodos prontos para trabalhar com:

  • Rápida renderização (+5000 sprites em computadores modernos);
  • Tilemaps;
  • Sistema de partículas;
  • Controle de volume, com teclas de atalho;
  • Parallax scrolling (multi-direcional);
  • Colisão de sprites;
  • Renderização de textos;
  • Renderização retro com opções de 2x pixels, 3x pixels, etc;
  • Não precisa da IDE do Flash, trabalha melhor com ferramentas livres como FlashDevelop;
  • Organização das classes por estados do jogo;
  • Botões simples;
  • Utilitários para loop de música e tocar som;
  • Efeitos especiais simples.

Facilidade de uso

É bem simples de ser usada, já possui com um conjunto de classes com vários métodos que facilitam bastante o trabalho com sprites, tilemaps, colisões e sons.

Licença envolvida

Está disponível através da licença MIT.

Linguagem

Actionscript 3.

Plataformas

Roda em cima do Flash Player, dessa forma funciona em qualquer plataforma Windows, Linux, Mac OS e Web.

Performance em 2D

Possui um ótima performance para ambientes em 2D, segundo testes do autor da game engine ela consegue trabalhar com mais 5000+ objetos na tela do jogo.

Performance em 3D

Não consegue trabalhar com o ambiente 3D.

Carregamento de modelos 2D e 3D

Consegue trabalhar com imagens em 2D e fazer o seu carregamento de forma muito simples. Não trabalha com carregamento de modelos 3D.

Facilidade de instalação

Para construir os jogos em Flixel é recomendado usar a IDE FlashDevelop, para realizar a instalação e configurar o ambiente siga os passos abaixo:

Contribuição para a comunidade

Flixel possui uma comunidade bastante ativa, com vários jogos já desenvolvidos, é possível fazer parte e interagir com a comunidade no endereço: http://flixel.org/forums/.

Testes

Para realizar o teste foi seguido um tutorial de jogo disponível em: http://flixel.org/forums/index.php?topic=226.0 e o código fonte está disponível no Github no endereço: http://github.com/patrickespake/Flixel-Ninja.

Basta efetuar dois cliques no arquivo Ninja.as3proj e ele já será carregado no Flash Develop, no diretório bin do projeto existe o arquivo chamado index.html, basta abrir esse arquivo no navegador e ver o jogo rodando.

A tecla X pula, a tecla C atira estrela e os direcionais movimentam para esquerda e direita.

  • Share/Bookmark
Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Ruby on Rails usando o jQuery ao invés do Prototype

3 Comments
Postado em 09 jun 2009
Categoria(s) Ruby on Rails, jQuery

Eu gosto mais do jQuery acho ele mais leve, mais funcional e com efeitos melhores.

Vou mostrar como substituir o Prototype e colocar o jQuery no seu lugar.

Instalação do plugin jRails:

ruby script/plugin install http://ennerchi.googlecode.com/svn/trunk/plugins/jrails

No layout da sua aplicação remova o uso do Prototype, remova a linha abaixo, caso ela exista:

<%= javascript_include_tag :defaults %>

Agora adicionei as bibliotecas javascripts entre as tags heads:

...
  <head>
    ...
    <%= javascript_include_tag "jquery" %>
    <%= javascript_include_tag "jquery-ui" %>
    <%= javascript_include_tag "jrails" %>
  </head>
...

Pronto! Fazendo isso o jQuery está disponível e compatível com o Ruby on Rails, ou seja, todos os helpers javascript usarão agora o jQuery como framework javascript.

O plugin jRails sobrescreve os helpers javascript para usar o jQuery.

Se você gostou desse texto e acha que ajudou você, me recomende: Recommend Me.

  • Share/Bookmark
Tags: , , , , , , , , , , , , , , , , , , , , , , , ,

Comunidade Ruby on Rails Brasil

6 Comments
Postado em 02 jun 2009
Categoria(s) Ruby, Ruby on Rails

Visando contribuir e ampliar os horizontes da comunidade Ruby on Rails no Brasil, eu criei o site http://railsbrasil.ning.com.

Caso você tenha interesse, faça o seu cadastro, participe, colabore e vamos todos juntos divulgar esse maravilhoso framework.

  • Share/Bookmark
Tags: , , , , , , , , ,

Criando menu drop down em javascript usando o framework Prototype

No Comments
Postado em 16 jan 2009
Categoria(s) JavaScript, Prototype

Hoje eu precisei construir um menu drop down em javascript. Procurei na internet vários tipos de menus, encontrei alguns que só funcionavam com ul e li, outros eram complexos demais e na verdade o que eu queria e colocar o mouse em cima de um link e fazer aparecer um div com os itens do menu :-). Acabei decidindo por implementar o meu próprio sistema de menu com a ajuda desse artigo: http://javascript-array.com/scripts/simple_drop_down_menu/.

Para fazer o menu eu usei o framework JavaScript Prototype (http://www.prototypejs.org/).

Mãos a obra!

Carregue na página o framework Prototype:

1

<script src="/javascripts/prototype.js" type="text/javascript"></script>

Eu montei o menu e submenu com a seguinte estrutura HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

<!-- begin: menu -->
<div id="menu">
<ul>
	<li class="item1" id="menu1"><a href="#">INFORMA&Ccedil;&Atilde;O</a></li>
	<li class="item2" id="menu2"><a href="#">CAPACITA&Ccedil;&Atilde;O E APERFEI&Ccedil;OAMENTO</a></li>
	<li class="item3" id="menu3"><a href="#">EDITORA</a></li>
</ul>
</div>
<!-- end: menu -->
 
<!-- begin: submenu -->
<div id="submenu">
  <!-- begin: submenu 1 -->
<div id="submenu1" class="submenu" style="display:none;">
<ul class="column1">
	<li><a href="#" class="item111">Institucional</a></li>
	<li><a href="#" class="item112">Produtos</a></li>
	<li><a href="#" class="item113">Trabalhe Conosco</a></li>
	<li><a href="#" class="item114">Receba nosso news</a></li>
	<li><a href="#" class="item115">Contato</a></li>
</ul>
<ul class="column2">
	<li><a href="#">Podcasts</a></li>
	<li><a href="#">RSS</a></li>
	<li><a href="#">E-commerce</a></li>
	<li><a href="#">TV</a></li>
	<li><a href="#">Vantagens</a></li>
</ul>
<ul class="column3">
	<li><a href="#" class="item131">Artigos</a></li>
	<li><a href="#" class="item132">Calend&aacute;rio de Cursos</a></li>
</ul>
</div>
<!-- end: submenu 1 -->
  <!-- begin: submenu 2 -->
<div id="submenu2" class="submenu" style="display:none;">
<ul class="column1">
	<li><a href="#" class="item211">Institucional</a></li>
	<li><a href="#" class="item212">Produtos</a></li>
	<li><a href="#" class="item213">Trabalhe Conosco</a></li>
	<li><a href="#" class="item214">Receba nosso news</a></li>
	<li><a href="#" class="item215">Contato</a></li>
</ul>
<ul class="column2">
	<li><a href="#">Podcasts</a></li>
	<li><a href="#">RSS</a></li>
	<li><a href="#">E-commerce</a></li>
	<li><a href="#">TV</a></li>
	<li><a href="#">Vantagens</a></li>
</ul>
<ul class="column3">
	<li><a href="#" class="item231">Artigos</a></li>
	<li><a href="#" class="item232">Calend&aacute;rio de Cursos</a></li>
</ul>
</div>
<!-- end: submenu 2 -->
  <!-- begin: submenu 3 -->
<div id="submenu3" class="submenu" style="display:none;">
<ul class="column1">
	<li><a href="#" class="item311">Institucional</a></li>
	<li><a href="#" class="item312">Produtos</a></li>
	<li><a href="#" class="item313">Trabalhe Conosco</a></li>
	<li><a href="#" class="item314">Receba nosso news</a></li>
	<li><a href="#" class="item315">Contato</a></li>
</ul>
<ul class="column2">
	<li><a href="#">Podcasts</a></li>
	<li><a href="#">RSS</a></li>
	<li><a href="#">E-commerce</a></li>
	<li><a href="#">TV</a></li>
	<li><a href="#">Vantagens</a></li>
</ul>
<ul class="column3">
	<li><a href="#" class="item331">Artigos</a></li>
	<li><a href="#" class="item332">Calend&aacute;rio de Cursos</a></li>
</ul>
</div>
<!-- end: submenu 3 --></div>
<!-- end: submenu -->

Implementei o seguinte JavaScript que faz o menu drop down funcionar:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

Event.observe(window, 'load', initMenuSystem);
 
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
 
function initMenuSystem() {
  configMenuItem('menu1', 'submenu1');
  configMenuItem('menu2', 'submenu2');
  configMenuItem('menu3', 'submenu3');
}
 
function configMenuItem(menu, submenu) {
  $(menu).observe('mouseover', function() {
    mopen(submenu)
  });
 
  $(menu).observe('mouseout', function() {
    mclosetime();
  });
 
  $(submenu).observe('mouseover', function() {
    mcancelclosetime();
  });
 
  $(submenu).observe('mouseout', function() {
    mclosetime();
  });
}
 
function mopen(id) {
  mcancelclosetime();
 
  if (ddmenuitem) {
    ddmenuitem.hide();
  }
 
  ddmenuitem = $(id);
  ddmenuitem.show();
}
 
function mclosetime() {
  closetimer = window.setTimeout(mclose, timeout);
}
 
function mclose() {
  if (ddmenuitem) {
    ddmenuitem.hide();
  }
}
 
function mcancelclosetime() {
  if (closetimer) {
    window.clearTimeout(closetimer);
    closetimer = null;
  }
}

Pronto! Ufaaa!

  • Share/Bookmark
Tags: , , , , , , , , , , , , , , , , , , , , , , , ,

Ext JS por uma web mais amigável

No Comments
Postado em 13 jan 2009
Categoria(s) JavaScript, Web 2.0

Um dos maiores desafios atualmente é fazer o ambiente web ser mais amigável e as aplicações mais funcionais.

Pensando nos argumentos acima, recentemente eu comecei a usar o Framework Ext JS, ele permite criar aplicações bem mais agradáveis para o usuário, com uma grande variedade de componentes visuais.

Nesse endereço: http://www.extjs.com/products/extjs/ você pode encontrar alguns exemplos, documentação e fazer o download do framework.

Como todo o framework existe uma curva de aprendizado, em alguns momentos essa curva será mais acentuado e complicada, mas nesse momento você não deve desistir, procure o fórum: http://extjs.com/forum/ e a comunidade nacional: http://extjs.com.br/forum/ para tirar as suas dúvidas.

Se a sua dúvida estiver dentro dos meus conhecimentos, também posso ajudar.

  • Share/Bookmark
Tags: , , , , , , , , , , , ,
← Previous Entries