Criação de jogo infantil

[Sylvio Leonel 1]

Bom dia galera.

Eu preciso fazer um jogo e gostaria da dica e dos conselhos de vocês.

 

Preciso criar um jogo de colorir. Será apenas um desenho sem cores, e ao passar o mouse o desenho vai colorindo. Não precisa clicar, ou escolher a cor, somente passar o mouse.

 

Eu sou novato em flash e gostaria de conselhos de como seria a melhor maneira para fazer isso.

 

Obrigado

[Daniel o rei 14]

Você pode usar mascaras.

 

Você cria um mc só com as linhas do desenho.

 

Depois um mc com o desenho completo com as cores.

 

Depois você cria um Shape.

 

A cada frame você adiciona um circulo à esse Shape.

 

E crie uma mascara.

 

desenho_mc.mask =

 

 

http://www.flashandmath.com/howtos/mask/

[Sylvio Leonel 1]

eu pensei em fazer dessa maneira..., mas não consegui pensar em como fazer para ir "apagando" a mascara com o mover do mouse

[Daniel o rei 14]

eu pensei em fazer dessa maneira..., mas não consegui pensar em como fazer para ir "apagando" a mascara com o mover do mouse

 

Você não vai apagar, é uma mascara, cada circulo que você desenhar vai ser tipo um buraco.

 

Crie um movieclip qualquer, pode até ter imagens, fotos.

 

Instancie-o de xx.

 

E cole o script no primeiro frame

 

import flash.events.MouseEvent;
import flash.display.Shape;
var shp:Shape = new Shape();


var tamanhoPincel:int = 30 ;
stage.addEventListener(MouseEvent.MOUSE_MOVE, mMove);

function mMove(e:MouseEvent):void{

shp.graphics.lineStyle();
shp.graphics.beginFill(0xFFFFFF,1);
xx.mask = shp;
shp.graphics.drawCircle(e.localX, e.localY, tamanhoPincel/2);
shp.graphics.endFill();
}

[Sylvio Leonel 1]

Daniel, tua dica foi ótima!!!

 

fiz apenas uma alteração, pois estavam aparecendo dois "pinceis"

import flash.events.MouseEvent;
import flash.display.Shape;

var shp:Shape = new Shape();

var tamanhoPincel:int = 100;
stage.addEventListener(MouseEvent.MOUSE_MOVE, mMove);

function mMove(e:MouseEvent):void{
       shp.graphics.lineStyle();
       shp.graphics.beginFill(0xFFFFFF, 0.5);
       xx.mask = shp;
       shp.graphics.drawCircle(mouseX, mouseY, tamanhoPincel/2);
       shp.graphics.endFill();
}

 

Mais uma dúvida...

como posso fazer para que a mascara seja uma imagem não colorida?

tentei sem sucesso fazer usando "beginBitmapFill", da seguinte maneira:

import flash.events.MouseEvent;
import flash.display.Shape;

import flash.display.BitmapData;
import flash.display.Bitmap;

var shp:Shape = new Shape();
//shp.graphics.beginFill(0xFFFFFF, 1);
//xx.mask = shp;

var pDef:Class = getDefinitionByName("img.jpg") as Class;
var _image:BitmapData = new pDef(1000, 1000);

var tamanhoPincel:int = 100;
stage.addEventListener(MouseEvent.MOUSE_MOVE, mMove);

function mMove(e:MouseEvent):void{
       shp.graphics.lineStyle();
shp.graphics.beginBitmapFill(_image);
       //shp.graphics.beginFill(0xFFFFFF, 1);
       xx.mask = shp;
       shp.graphics.drawCircle(mouseX, mouseY, tamanhoPincel/2);
       shp.graphics.endFill();
}

 

Obrigado

[Daniel o rei 14]

Daniel, tua dica foi ótima!!!

 

fiz apenas uma alteração, pois estavam aparecendo dois "pinceis"

import flash.events.MouseEvent;
import flash.display.Shape;

var shp:Shape = new Shape();

var tamanhoPincel:int = 100;
stage.addEventListener(MouseEvent.MOUSE_MOVE, mMove);

function mMove(e:MouseEvent):void{
       shp.graphics.lineStyle();
       shp.graphics.beginFill(0xFFFFFF, 0.5);
       xx.mask = shp;
       shp.graphics.drawCircle(mouseX, mouseY, tamanhoPincel/2);
       shp.graphics.endFill();
}

 

Mais uma dúvida...

como posso fazer para que a mascara seja uma imagem não colorida?

tentei sem sucesso fazer usando "beginBitmapFill", da seguinte maneira:

import flash.events.MouseEvent;
import flash.display.Shape;

import flash.display.BitmapData;
import flash.display.Bitmap;

var shp:Shape = new Shape();
//shp.graphics.beginFill(0xFFFFFF, 1);
//xx.mask = shp;

var pDef:Class = getDefinitionByName("img.jpg") as Class;
var _image:BitmapData = new pDef(1000, 1000);

var tamanhoPincel:int = 100;
stage.addEventListener(MouseEvent.MOUSE_MOVE, mMove);

function mMove(e:MouseEvent):void{
       shp.graphics.lineStyle();
shp.graphics.beginBitmapFill(_image);
       //shp.graphics.beginFill(0xFFFFFF, 1);
       xx.mask = shp;
       shp.graphics.drawCircle(mouseX, mouseY, tamanhoPincel/2);
       shp.graphics.endFill();
}

 

Obrigado

 

Você pode colocar uma imagem só com as linhas para aparecer atras do xx

[Sylvio Leonel 1]

Boa tarde amigo!

cara, suas dicas estão sendo ótimas pra mim, muito obrigado!

 

dessa maneira que você me ajudou, ou consigo identificar quando a mascara foi completamento "removida"? para que entre um novo desenho para colorir

 

obrigado cara, espero não estar abusando da sua boa vontade ou atrapalhando!

[Daniel o rei 14]

Desculpe pela demora.

 

Eu tava pensando, esse exemplo de mascara, criando vários circulos é meio lento.

 

Então tentei fazer com linhas.

 

import flash.geom.Rectangle;
import flash.events.MouseEvent;
import flash.display.Shape;
import flash.display.Sprite;
var retangulo:Rectangle = new Rectangle(100,100,390,211);
var mT:Boolean = true;
var sp:Sprite = new Sprite();
addChild(sp);

sp.graphics.lineStyle(10, 0xFF0000, 1);
sp.graphics.moveTo(100,100);
sp.graphics.lineTo(200,200);

xx.mask = sp;
stage.addEventListener(MouseEvent.MOUSE_MOVE, mMove);

function mMove(e:MouseEvent):void{
if(  retangulo.containsPoint(new Point(mouseX,mouseY))  ){
	if(mT){
		sp.graphics.moveTo(mouseX,mouseY);
		mT = false;
		trace("moveTo");
	}else{
		sp.graphics.lineTo(mouseX,mouseY);
		trace("lineTo");
		xx.mask = sp;
	}

}else{
	mT = true;
	trace("mT true");
}


}

Só que parece que o flash não pode usar linhas na mascara, então esse script não funciona..

Mas funciona criando as linhas.

Se você tentar exibir essas linhas funciona desenhando linhas.

Mas mascara não.

 

 

Então tentei achar na internet algo para fazer mascaras com linhas e achei isso:

 

http://www.wastedpotential.com/flash-as3-dynamically-draw-a-mask-with-lines/

 

Nesse exemplo é clicando, mas o que importa é ver o script e saber como funciona.

 

Ele parece que cria um bitmap, e com esse bitmap faz a mascara.

 

Só que agora a sua pergunta.

 

fazendo do jeito antigo teria que tentar verificar se há algum lugar não preenchido.

 

Mas se a mascara for um bitmap, poderia com um for, verificar pixel por pixel, e ver se tem algo não preenchido.