<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Abrindo o Jogo &#187; Tutorial</title>
	<atom:link href="http://www.abrindoojogo.com.br/category/tecnico/tutorial/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.abrindoojogo.com.br</link>
	<description>Abrindo o Jogo</description>
	<lastBuildDate>Thu, 29 Jul 2010 01:40:22 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Tutorial Pixel Art &#8211; Parte 1</title>
		<link>http://www.abrindoojogo.com.br/2010/02/07/tutorial-pixel-art-parte-1/</link>
		<comments>http://www.abrindoojogo.com.br/2010/02/07/tutorial-pixel-art-parte-1/#comments</comments>
		<pubDate>Sun, 07 Feb 2010 17:20:53 +0000</pubDate>
		<dc:creator>everton</dc:creator>
				<category><![CDATA[Game Arte]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Técnico]]></category>

		<guid isPermaLink="false">http://blog.abrindoojogo.com.br/?p=1327</guid>
		<description><![CDATA[Olá pessoal, hoje o nosso artista de plantão estréia seu primeiro tutorial aqui no Abrindo o Jogo. Samuel descreve quais seriam os primeiros passos para quem deseja começar a produzir Pixel Art.  No módulo 1, você conhecerá as ferramentas e suas funções, além de uma das maneiras mais utilizadas de criar linhas para a Pixel [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://aoj.ramspaiva.com/wp-content/uploads/2010/02/pixellogo.jpg"><img class="alignleft size-full wp-image-1333" title="pixelLogo" src="http://aoj.ramspaiva.com/wp-content/uploads/2010/02/pixellogo.jpg" alt="" width="158" height="169" /></a>Olá pessoal, hoje o nosso artista de plantão estréia seu primeiro tutorial aqui no Abrindo o Jogo. Samuel descreve quais seriam os primeiros passos para quem deseja começar a produzir Pixel Art.  No módulo 1, você conhecerá as ferramentas e suas funções, além de uma das maneiras mais utilizadas de criar linhas para a Pixel Art.</p>
<p>Não deixem de conferir esta primeira parte, está muito legal.</p>
<p><a href="http://wp.me/PkJJ1-ls">Tutorial Pixel Art &#8211; Parte 1</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.abrindoojogo.com.br/2010/02/07/tutorial-pixel-art-parte-1/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Tutorial Game Maker: Olá Mundo &quot;Interativo&quot;</title>
		<link>http://www.abrindoojogo.com.br/2009/10/12/tutorial-game-maker-ola-mundo-interativo/</link>
		<comments>http://www.abrindoojogo.com.br/2009/10/12/tutorial-game-maker-ola-mundo-interativo/#comments</comments>
		<pubDate>Mon, 12 Oct 2009 19:19:15 +0000</pubDate>
		<dc:creator>everton</dc:creator>
				<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Técnico]]></category>

		<guid isPermaLink="false">http://blog.abrindoojogo.com.br/?p=886</guid>
		<description><![CDATA[Olá pessoal, é com grande prazer que contamos com a primeira participação de um leitor aqui no Abrindo o Jogo. O Luis Otávio nos enviou um tutorial base sobre o Game Maker. Muito interessante para quem quer iniciar no desenvolvimento de jogos de uma maneira fácil e intuitiva. Vamos conferir.

Olá pessoal, meu nome é Luis [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/gamemakerlogo.gif"><img class="alignleft size-full wp-image-910" title="GameMakerLogo" src="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/gamemakerlogo.gif" alt="GameMakerLogo" width="200" height="161" /></a>Olá pessoal, é com grande prazer que contamos com a primeira participação de um leitor aqui no Abrindo o Jogo. O Luis Otávio nos enviou um tutorial base sobre o Game Maker. Muito interessante para quem quer iniciar no desenvolvimento de jogos de uma maneira fácil e intuitiva. Vamos conferir.</p>
<p><span id="more-886"></span></p>
<p>Olá pessoal, meu nome é Luis Otávio e trago este artigo onde mostrarei como começar na programação de jogos usando o Game Maker. O Game Maker é um motor (Engine) desenvolvido para facilitar a criação de jogos de qualquer tipo. Com ele podemos fazer um Pac-Man ou até um Mega Man. Este motor também permite a criação de  jogos 3D simples, porém para criar jogos mais complexos, como Age of Empires, você precisará dominar a linguagem do motor,  denominada <strong>GML </strong>(Game Maker Language), não abordada neste meu primeiro tutorial por motivos didáticos.</p>
<p>Inicialmente vocês criarão jogos usando o sistema Drag and Drop (Arraste e Solte) que o Game Maker oferece.</p>
<p>Bom, para começar você precisa fazer o download do programa, ele pode ser baixado no endereço <a href="http://www.yoyogames.com">yoyogames.com</a>. A instalação é bem simples, utilize a versão gratuita, apesar de possuir algumas limitações, nos possibilitará fazer jogos bem interessantes. A tela inicial do programa é mostrada abaixo:</p>
<div id="attachment_888" class="wp-caption aligncenter" style="width: 478px"><a href="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/a.png"><img class="size-full wp-image-888" title="Tela Inicial" src="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/a.png" alt="Tela Inicial do Game Maker" width="468" height="318" /></a><p class="wp-caption-text">Tela Inicial do Game Maker</p></div>
<p>Eu farei uma rápida introdução sobre a interface do programa, falando apenas sobre o necessário para  o entendimento básico do Game Maker.</p>
<ul>
<li><strong>Sprites</strong>
<ul>
<li>Nesta pasta você colocaráa as imagens dos personagens, itens e qualquer outra imagem que representara algo interativo no jogo.</li>
</ul>
</li>
<li><strong>Sounds</strong>
<ul>
<li>Aqui irá os sons e musicas do jogo.</li>
</ul>
</li>
<li><strong>Backgrounds</strong>
<ul>
<li>Nesta pasta você carregará os fundos de cenários e imagens que não são interativas no jogo, tais como logos, fundos de menus etc.</li>
</ul>
</li>
<li><strong>Fonts</strong>
<ul>
<li>Nesta pasta você poderá colocar as fontes (tipos de letras) que serão usadas em seu jogo.</li>
</ul>
</li>
<li><strong>Objects</strong>
<ul>
<li>Esta é sem duvidas uma das pastas mais importantes, é nela que fica tudo que for interativo no jogo é aqui que fica o funcionamento do jogo.</li>
</ul>
</li>
<li><strong>Rooms</strong>
<ul>
<li>Aqui é onde ficam as salas do jogo, isso pode ser entendido como o local onde ficam a fase, a tela de game over ou a tela de título.</li>
</ul>
</li>
</ul>
<p>Para adicionar algum dos itens listados acima,  você deve clicar com o botão direito sobre a pasta e selecionar <em>Create</em>. Vamos começar por <em>Create Sprite</em>.</p>
<div id="attachment_889" class="wp-caption aligncenter" style="width: 478px"><a href="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/b.png"><img class="size-full wp-image-889" title="createSprite" src="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/b.png" alt="Create Sprite" width="468" height="319" /></a><p class="wp-caption-text">Create Sprite</p></div>
<p>Logo surgirá a tela <em>Sprite Properties</em> (Propriedades do Sprite) como mostra a figura abaixo.</p>
<div id="attachment_890" class="wp-caption aligncenter" style="width: 477px"><a href="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/c.png"><img class="size-full wp-image-890" title="loadsprite" src="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/c.png" alt="Load Sprite" width="467" height="281" /></a><p class="wp-caption-text">Load Sprite</p></div>
<p>Por enquanto não entrarei em detalhes sobre as propriedades do sprite, isto será abordado em um outro artigo. Vamos apenas clicar em <em>Load Sprite</em>, abrirá então uma janela de seleção de arquivos, selecione uma imagem qualquer para representar um personagem do jogo. Após selecionada a imagem, clique em ok. Repita o processo para selecionar um sprite que represente um obstáculo em nosso jogo, pode ser um cubo ou qualquer imagem que você preferir. Se você fez tudo certinho, veremos uma tela como a demonstrada abaixo.</p>
<div id="attachment_891" class="wp-caption aligncenter" style="width: 477px"><a href="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/d.png"><img class="size-full wp-image-891" title="createObject" src="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/d.png" alt="Create Object" width="467" height="282" /></a><p class="wp-caption-text">Create Object</p></div>
<p>Por enquanto estes sprites não são nada além de imagens, ou seja, eles ainda não representam nada dentro do jogo, são apenas imagens que serão enviadas para a memória assim que o jogo iniciar. Para dar vida a nosso personagem, devemos criar um novo <em>Object</em>, utilizando o mesmo procedimento anterior, um clique com o botão direito sobre a pasta Objects. Ao selecionar <em>Create Object</em>, a janela abaixo será apresentada.</p>
<div id="attachment_892" class="wp-caption aligncenter" style="width: 478px"><a href="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/e.png"><img class="size-full wp-image-892" title="objectProperties" src="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/e.png" alt="Propriedades do Objeto" width="468" height="276" /></a><p class="wp-caption-text">Propriedades do Objeto</p></div>
<p>Na janela de propriedades do objeto, você pode perceber que existem vários botões e abas, mas não se assuste, não será necessários ver todos eles neste momento. Bom, seguindo com a criação do personagem, na janela de propriedades do objeto, clique no botão na parte superior esquerda, referente a <em>Sprite </em>(marcado com um círculo verde), em seguida, selecione o que corresponde ao personagem. Agora temos um objeto com aparência, porém sem ação alguma. Para inserir movimento em nosso personagem, devemos clicar no botão <em>Add Event</em>, destacado na imagem acima com um círculo vermelho. As opções de ações serão apresentadas em uma nova janela, demonstrada abaixo.</p>
<div id="attachment_893" class="wp-caption aligncenter" style="width: 478px"><a href="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/f.png"><img class="size-full wp-image-893" title="seletorEventos" src="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/f.png" alt="Seletor de Eventos" width="468" height="293" /></a><p class="wp-caption-text">Seletor de Eventos</p></div>
<p>Novamente não se assuste com a quantidade de ações, vamos nos deter apenas na opção <em>Keyboard</em>. Com isto, estaremos adicionando um evento que verificará se uma respectiva tecla está sendo pressionada. Quando você clicar no botão keyboard surgirá uma lista de teclas que podem ser verificadas, como na imagem abaixo.</p>
<div id="attachment_894" class="wp-caption aligncenter" style="width: 478px"><a href="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/g.png"><img class="size-full wp-image-894" title="listaTeclas" src="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/g.png" alt="Lista de Teclas" width="468" height="293" /></a><p class="wp-caption-text">Lista de Teclas</p></div>
<p>Selecione a opção <em>&lt;Left&gt;</em> (seta para a esquerda), desta forma, você adiciona um evento que ouvirá quando tecla for pressionada. Agora devemos vincular uma ação a este evento. Para isto, observe no canto superior direito da janela propriedades do objeto, na área que corresponde a movimento (<em>Move</em>), o primeiro botão (destacado em vermelho). Arraste-o para a parte em branco, correspondente a actions, marcada com um retângulo vermelho na figura abaixo.</p>
<div id="attachment_895" class="wp-caption aligncenter" style="width: 477px"><a href="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/h.png"><img class="size-full wp-image-895" title="propriedadeObjeto" src="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/h.png" alt="Propriedades do Objeto" width="467" height="293" /></a><p class="wp-caption-text">Propriedades do Objeto</p></div>
<p>Assim que você soltar a ação selecionada, surgirá uma janela como a mostrada na imagem abaixo.</p>
<p style="text-align:center;">
<div id="attachment_897" class="wp-caption aligncenter" style="width: 478px"><a href="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/i.png"><img class="size-full wp-image-897" title="movedFixed" src="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/i.png" alt="Moved Fixed" width="468" height="294" /></a><p class="wp-caption-text">Move Fixed</p></div>
<p>Esta janela correspondente a ação Move Fixed. Esta ação faz com que o objeto se mova na direção e velocidade definidas nos campos correspondentes.</p>
<p>A próxima etapa será criar uma sala para testar o nosso objeto. Clique na pasta <em>Rooms </em>com o botão direito e selecione <em>Create Room</em> para criar uma nova sala, acionando a janela <em>Room Properties</em>, como demonstrado na imagem abaixo.</p>
<div id="attachment_898" class="wp-caption aligncenter" style="width: 478px"><a href="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/j1.png"><img class="size-full wp-image-898" title="createRoom" src="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/j1.png" alt="Create Room" width="468" height="393" /></a><p class="wp-caption-text">Create Room</p></div>
<p>Na janela propriedades da Room, você pode visualizar várias abas na parte superior esquerda, mas não entrarei em detalhes sobre todas,  apenas a Objects. Clique no botão destacado para selecionar o objeto atual que será adicionado a sala. O próximo passo será adicionar seu personagem no mapa, para isto clique com o mouse sobre o local desejado na grade. Pronto, agora é só testar!</p>
<p>Para publicar/compilar seu jogos, basta clicar no botão de play verde na parte superior da interface.</p>
<div id="attachment_899" class="wp-caption aligncenter" style="width: 478px"><a href="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/l.png"><img class="size-full wp-image-899" title="publicar" src="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/l.png" alt="Publicar/Compilar seu jogo" width="468" height="52" /></a><p class="wp-caption-text">Publicar/Compilar seu jogo</p></div>
<p>Assim que seu pseudo jogo começar, você poderá teclar seta para a esquerda e perceber o personagem movendo-se. Caso ocorra algum problema, revise o artigo até esta etapa. Se tudo funcionar direitinho, é horas de exercitar um pouco, faça seu personagem se movimentar também para as direções Direita &lt;<em>Right</em>&gt;, Cima &lt;<em>Up</em>&gt; e Baixo &lt;<em>Down</em>&gt;.</p>
<p>Conseguiu? Então vamos adicionar agora algum obstáculo para o personagem, clique com o botão direito sobre a pasta <em>Objects </em>e crie um novo objeto, marque-o para usar o Sprite correspondente ao obstáculo. Desta vez , marque a opção Solid , isso fará com que o objeto seja sólido.</p>
<div id="attachment_901" class="wp-caption aligncenter" style="width: 478px"><a href="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/m.png"><img class="size-full wp-image-901" title="propriedadeObjeto2" src="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/m.png" alt="Propriedades do Objeto Obstáculo" width="468" height="286" /></a><p class="wp-caption-text">Propriedades do Objeto Obstáculo</p></div>
<p>Apesar de estar marcado como sólido, o objeto ainda não representa um obstáculo para o personagem, isto ocorre porque não há ninguém detectando (ouvindo) a colisão. Sendo assim, precisamos adicionar um evento que verifica se objetos colidiram. Para isto, abra novamente seu personagem, adicione um novo evento clicando em <em>Add Event</em> e selecione <em>Collision</em>. Como demonstrado na imagem abaixo, surgirá uma lista com os objetos, marque o <em>object1</em>, referente ao obstáculo.</p>
<div id="attachment_902" class="wp-caption aligncenter" style="width: 477px"><a href="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/n.png"><img class="size-full wp-image-902" title="collision" src="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/n.png" alt="Adicionando Colisão" width="467" height="289" /></a><p class="wp-caption-text">Adicionando Colisão</p></div>
<p>Após o evento de colisão ser adicionado, temos que vincular uma ação a ele. O processo será bem similar aos anteriores, porém ao invés de selecionar uma direção, você deve clicar no centro do direcional, além de configurar a velocidade para zero, observe na imagem abaixo.</p>
<div id="attachment_903" class="wp-caption aligncenter" style="width: 478px"><a href="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/o.png"><img class="size-full wp-image-903" title="collision2" src="http://aoj.ramspaiva.com/wp-content/uploads/2009/10/o.png" alt="Colisão com o obstáculo" width="468" height="322" /></a><p class="wp-caption-text">Colisão com o obstáculo</p></div>
<p>Com isso você já tem um ambiente bem simples,  monte um pequeno cenário, com o personagem no centro e vários obstáculos para experimentar. Após a sala criada, é só clicar no play para ver o resultado.</p>
<p>Bom, por enquanto é só, tente fazer outras modificações em seu pseudo jogo e vá tentando entendê-lo aos poucos, não tente fazer coisas muito complicadas sem primeiro entender o simples. Se você pretende ser um desenvolvedor de jogos, precisará aprender que só se pode passar para coisas mais complexas quando as simples estiverem completamente dominadas, falando em linguagem de games, jogue primeiro no Easy para depois experimentar o Hard <img src='http://www.abrindoojogo.com.br/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> .</p>
<p>Um grande abraço a todos do Abrindo o Jogo.</p>
<p>Luis Otávio</p>
]]></content:encoded>
			<wfw:commentRss>http://www.abrindoojogo.com.br/2009/10/12/tutorial-game-maker-ola-mundo-interativo/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
