Comunidad de diseño web y desarrollo en internet online

Rompecabezas

Citar            
MensajeEscrito el 25 Jun 2014 09:13 pm
Saludos a todos

ojala me puedan echar una mano con esto, he realizado un rompecabezas y estoy en la parte de reubicar las fichas de una forma randomica,
creo dos array, uno que contiene las posiciones x,y iniciales, y otro en la funcion desordenar que los mezcla para poder adjudicar a cada uno un valor diferente en posicion
Pero me lanza las fichas sin un orden aparente, mi teoria es que esta dandole las coordenadas dentro de cada pieza por eso el espacio tan grande, pero realmente no veo como solucionarlo

aca el as3

Código ActionScript :

import fl.transitions.*;
import fl.transitions.easing.*;
import flash.display.MovieClip;

var contenedor:Sprite = new Sprite();
addChild(contenedor);
contenedor.x=100;
contenedor.y=100;

var cuadrados:Array = new Array();
var mc:cuadradito;
var mf:fondo;
var separacion:Number = 5;
var ancho:Number = 116;
var alto:Number = 116;
var columnas:Number = 4;
var filas:Number = 3;
var totalCuadrados:uint = 12;
var i:uint=0;
//creamos el array que contiene las posiciones
var posiciones:Array=new Array()
function crear_piezas(){ 
for(i=0; i < totalCuadrados; ++i)
{
  var pieza = new MovieClip();
  //le damos un nombre a cada pieza
  pieza.name=["Pieza" + (i+1)];
  contenedor.addChild(pieza);
  //trace(pieza.x, pieza.y)
  mc = new cuadradito();
  mf = new fondo();
  mf.x = contenedor.x
  mf.y = contenedor.y
  mc.x =  ancho*(i%columnas);
  mc.y =  alto*Math.floor(i/columnas) // Lo desplazamos hacia abajo para notar que se van agregando
  cuadrados.push(mc);
  pieza.addChild(mf);
  pieza.addChild(mc);
  //le damos la funcion de botones
  pieza.addEventListener(MouseEvent.MOUSE_DOWN, drag2);
  pieza.addEventListener(MouseEvent.MOUSE_UP, drop2)
  pieza.buttonMode = true;
  //le damos la mascara a cada pieza
  mf.mask=cuadrados[i]
   posiciones.push ({x:cuadrados[i].x,y:cuadrados[i].y});//llenamos el array para luego hacer el random de posiciones
  trace([i]+".- Array Posiciones Iniciales: "+posiciones[i].x,posiciones[i].y )
}}
crear_piezas();

//creamos el array con las posiciones desordenadas
var arr2:Array=new Array()
function DesordenaPiezas  (NumMin, NumMax) {
   for (var n=NumMin; n<=NumMax; n++) {
      var PosTemp =Math.floor(Math.random()* posiciones.length);
      arr2.push({x:posiciones[PosTemp].x,y:posiciones[PosTemp].y});
     //sacamos la posicion de las posiciones iniciales para no repetir
      posiciones.splice(PosTemp,1);
     trace([n]+".- Array Posicion Random="+arr2[n].x ,arr2[n].x )
      contenedor.getChildAt(1)
     var randomX:Tween = new Tween(contenedor.getChildAt(n),"x",Bounce.easeOut,contenedor.getChildAt(n).x, arr2[n].x,1, true)
     var randomY:Tween = new Tween(contenedor.getChildAt(n),"y",Bounce.easeOut,contenedor.getChildAt(n).y, arr2[n].y, 1, true)
   }
}
DesordenaPiezas(0, posiciones.length-1);

//Funciones de Drag and Drop de las fichas
function drag2(e:MouseEvent):void{
   e.currentTarget.startDrag();
   trace(e.currentTarget.name)
   trace(e.currentTarget.x, e.currentTarget.y)
}
function drop2(e:MouseEvent):void{
   stopDrag();
if (e.currentTarget.x <=58 && e.currentTarget.x >=-58 && e.currentTarget.y <=58 && e.currentTarget.y >=-58) {
var correctX:Tween = new Tween(e.currentTarget,"x",Bounce.easeOut, 0, 0,1, true)
var correctY:Tween = new Tween(e.currentTarget,"y",Bounce.easeOut, 0, 0,1, true)
e.currentTarget.removeEventListener(MouseEvent.MOUSE_DOWN, drag2);
e.currentTarget.buttonMode = false;
          trace("la pieza esta colocada")
}

}



Aca el archivo fla

Muchas gracias a todos

Por voraz2

21 de clabLevel



 

firefox
Citar            
MensajeEscrito el 25 Jun 2014 10:27 pm
me lanza las fichas sin un orden aparente


No entiendo que quieres decir con eso

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

chrome
Citar            
MensajeEscrito el 25 Jun 2014 10:36 pm
Gracias por responder

cuado hice, la version solo con vectores, ya ordenaba las partes, pero al hacer que cada parte tenga un imagen interna, se va el orden de las fichas, eso queria decir,
aca los ejemplos



y aca cuando ya coloco las imagenes del rompecabezas



gracias por su ayuda

Por voraz2

21 de clabLevel



 

firefox
Citar            
MensajeEscrito el 25 Jun 2014 11:02 pm
Ok, no entiendo ahora lo de la imagen interna, pero de todas formas si lo que quieres es que se mantengan en esa cuadrícula pero no en ese orden, digamos ficha 9,4,10,12 en a primera fila y asi, haz lo siguiente:

- Crea dos arrays con las posiciones correctas, le asignas la posicion a cada ficha. Considera que es un Array de objetos Point, no hace falta hacer uno para las x y otro para las y
- Haces un array.shuffle sobre uno de ellos, http://code.tutsplus.com/tutorials/quick-tip-how-to-randomly-shuffle-an-array-in-as3--active-8776 (se mete un poco con los algoritmos de ordenacion innnecesariamente, pero si te aburre ve al final y copia y pega)
- Le asignas la posición del segundo array a las fichas, aunque internamente guardan las del primero que es la que corresponde a su posición.

Considera leer alguno de los quichicientos tutoriales acerca de como hacer puzzle, aquí mismo en la seccion de tutoriales tenemos uno. Si te gusta investigar, el ideal es el que usa BitmapData.draw para copiar rectangle desde una imagen y armar las piezas automáticamente, tendrás un puzzle reutilizable con cualqueir imagen

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 26 Jun 2014 05:54 pm
excelente lo de BitmapData, gracias

en cuanto tenga algo mas avanzado lo publicare

Por voraz2

21 de clabLevel



 

firefox
Citar            
MensajeEscrito el 26 Jun 2014 11:07 pm
Saludos a todos y gracias por leer y ayudar

He llegado hasta aca en mi rompecabezas con lo del Bitmap (que por cierto esta muy bueno), lo que veo que no puedo hacer es sacar mas partes de la imagen que cargo, solo puedo sacar la inicial , ojala me puedan echar una mano con esto

aca un hasta donde estoy

[flash width=500 height=768]http://www.mediummultimedia.com/cristalab/piezasAS3_7.swf[/flash]


y aca el .FLA

Descargar

Gracias por todo

Por voraz2

21 de clabLevel



 

firefox
Citar            
MensajeEscrito el 27 Jun 2014 12:23 am
Saludos cordiales

Mi avance ha sido el poder colocar las partes de la imagen recortada con BitmapData dentro de las piezas que se mezclan, pero no me aparece una linea de imagenes, el problema esta en esta parte del codigo
que hace que la imagen se mueva cada ves que pasa el for para poder recortar el pedazo de la imagen

Código ActionScript :

if (mcHolder.mcImg.x >=-468) {
     mcHolder.mcImg.x = mcHolder.mcImg.x -ancho*(i%columnas);
}else{
   trace("acabo");
   mcHolder.mcImg.x=0
   mcHolder.mcImg.y=mcHolder.mcImg.y-116}


aca el codigo entero

Código ActionScript :

import fl.transitions.*;
import fl.transitions.easing.*;
import flash.display.MovieClip;

var contenedor:Sprite = new Sprite();
addChild(contenedor);
contenedor.x=0;
contenedor.y=0;

var cuadrados:Array = new Array();
var mc:cuadradito;
var mf:fondo;
var separacion:Number = 5;
var ancho:Number = 116;
var alto:Number = 116;
var columnas:Number = 4;
var filas:Number = 3;
var totalCuadrados:uint = 12;
var i:uint=0;
//creamos el array que contiene las posiciones
var posiciones:Array=new Array()
function crear_piezas(){ 
for(i=0; i < totalCuadrados; ++i)
{
  var pieza = new MovieClip();
  //le damos un nombre a cada pieza
  pieza.name=["Pieza" + (i+1)];
  contenedor.addChild(pieza);
  mc = new cuadradito();

  mc.x =  ancho*(i%columnas);
  mc.y =  alto*Math.floor(i/columnas) // Lo desplazamos hacia abajo para notar que se van agregando
  cuadrados.push(mc);
  //pieza.addChild(mf);
  pieza.addChild(mc);
  if (mcHolder.mcImg.x >=-468) {
     mcHolder.mcImg.x = mcHolder.mcImg.x -ancho*(i%columnas);
}else{
   trace("acabo");
   mcHolder.mcImg.x=0
   mcHolder.mcImg.y=mcHolder.mcImg.y-116}

 
   var maskRect =mc.getBounds(mc);
   trace(maskRect)
     //Matrix of image to be cropped
     var imgMatrix= mcHolder.mcImg.transform.matrix;
     //Cropped image
    myCroppedImage = crop(maskRect, imgMatrix, mcHolder.mcMask.width, mcHolder.mcMask.height,mcHolder.mcImg );
  //contenedor.addChild(mc);
 mc.addChildAt(myCroppedImage,1);
  //le damos la funcion de botones
  pieza.addEventListener(MouseEvent.MOUSE_DOWN, drag2);
  pieza.addEventListener(MouseEvent.MOUSE_UP, drop2)
  pieza.buttonMode = true;
  //le damos la mascara a cada pieza
    posiciones.push ({x:cuadrados[i].x,y:cuadrados[i].y});//llenamos el array para luego hacer el random de posiciones
  trace([i]+".- Array Posiciones Iniciales: "+posiciones[i].x,posiciones[i].y )
}}
crear_piezas();

//creamos el array con las posiciones desordenadas
var arr2:Array=new Array()
function DesordenaPiezas  (NumMin, NumMax) {
   for (var n=NumMin; n<=NumMax; n++) {
      var PosTemp =Math.floor(Math.random()* posiciones.length);
      arr2.push({x:posiciones[PosTemp].x,y:posiciones[PosTemp].y});
     //sacamos la posicion de las posiciones iniciales para no repetir
      posiciones.splice(PosTemp,1);
     trace([n]+".- Array Posicion Random="+arr2[n].x ,arr2[n].x )
      contenedor.getChildAt(1)
     var randomX:Tween = new Tween(cuadrados[n],"x",Bounce.easeOut,cuadrados[n].x, arr2[n].x,1, true)
     var randomY:Tween = new Tween(cuadrados[n],"y",Bounce.easeOut,cuadrados[n].y, arr2[n].y, 1, true)
   }
}
DesordenaPiezas(0, posiciones.length-1);

//Funciones de Drag and Drop de las fichas
function drag2(e:MouseEvent):void{
   e.currentTarget.startDrag();
   trace(e.currentTarget.name)
   trace(e.currentTarget.x, e.currentTarget.y)
}
function drop2(e:MouseEvent):void{
   stopDrag();
if (e.currentTarget.x <=58 && e.currentTarget.x >=-58 && e.currentTarget.y <=58 && e.currentTarget.y >=-58) {
var correctX:Tween = new Tween(e.currentTarget,"x",Bounce.easeOut, 0, 0,1, true)
var correctY:Tween = new Tween(e.currentTarget,"y",Bounce.easeOut, 0, 0,1, true)
e.currentTarget.removeEventListener(MouseEvent.MOUSE_DOWN, drag2);
e.currentTarget.buttonMode = false;
          trace("la pieza esta colocada")
}

}

var myCroppedImage:Bitmap

     
    function crop( rect, matrix, _width:Number, _height:Number, displayObject:DisplayObject):Bitmap {
     //Create cropped image
     var croppedBitmap:Bitmap = new Bitmap( new BitmapData( _width, _height ), PixelSnapping.ALWAYS, true );
     croppedBitmap.bitmapData.draw(displayObject, matrix , null, null, rect, true );
     return croppedBitmap;
    }



aca el fla descarga

Por voraz2

21 de clabLevel



 

firefox
Citar            
MensajeEscrito el 27 Jun 2014 02:27 am
Saludos a todos

Lo he logrado ya tengo las fichas de mi juego rompezabezas completas y randomizadas, voy a seguir trabajando en este e ir puliendo las demas cosas como la verificacion de posicion de cada ficha cuando las muevvan, un limite de darg and drop, y una verificacion de completado, y tambien la opcion de poder elegir la dificultad del rompecabezas de 12 24 y 36 piezas, falta muchooo, pero ahi vamos luchandole


http://www.mediummultimedia.com/cristalab/piezasAS3_7.swf


gracias por su ayuda y por leer el post

estare publicando mis adelanto o preguntas

Por voraz2

21 de clabLevel



 

firefox
Citar            
MensajeEscrito el 27 Jun 2014 05:38 pm
Saludos a todos

Necesito un poco de ayuda aca

estoy en la parte de verificar la posicion de las fichas asi que creo un grid de cuadrados como objetivos de colision y asi verificar si la pieza corresponde, pero me sale como null el hitTestObjet

alguien me podria echar una mano con esto

Código ActionScript :

var PiezaOb1: MovieClip
var mcOb:cuadradito;
var a:uint=0;
for(a=0; a < totalCuadrados; ++a)
{
    
  mcOb = new cuadradito();
  mcOb.x =  ancho*(a%columnas);
  mcOb.y =  alto*Math.floor(a/columnas)+430 // Lo desplazamos hacia abajo para notar que se van agregando
  mcOb.num.text = "Pieza:" + (a+1);
  mcOb.name = "PiezaOb" + (a+1);
  addChild(mcOb);
}


function drop2(e:MouseEvent):void{
   
   stopDrag();
   trace(posiciones_validar[0].x)
   if (e.currentTarget.hitTestObject(Pieza1){
          trace("la pieza esta colocada")
}
}


muchas gracias de antemano

Por voraz2

21 de clabLevel



 

firefox
Citar            
MensajeEscrito el 27 Jun 2014 07:12 pm
Si lo que estas chequeando es el nombre de instancia, seria PiezaOb1

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 27 Jun 2014 09:16 pm
Gracias por tu respuesta

He probado y sale la propiedad PiezaOb1 no esta definida

tienes alguna otra idea? de que podria pasar

Por voraz2

21 de clabLevel



 

firefox
Citar            
MensajeEscrito el 27 Jun 2014 09:48 pm
En que scope estas ejecutando ese hittestObject? si no estas sobre la linea de tiempo correcta, nunca obtendras nada del hitTest

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 27 Jun 2014 10:03 pm
todo se ocupa en la linea de tiempo principal

Por voraz2

21 de clabLevel



 

firefox
Citar            
MensajeEscrito el 27 Jun 2014 10:17 pm
Usa getChildByName("PiezaOb1")

Existe?

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 27 Jun 2014 11:35 pm
Excelente Gracias de verdad

ahora lo que busco y no entiendo como
hacer un tween hasta el lugar de la ficha objetivo para que se coloque en esos [x,y]

Código ActionScript :

function drop2(e:MouseEvent):void{
   stopDrag();
   //for(b=0; b < totalCuadrados; ++b){
   //if (e.currentTarget.hitTestObject(piezaOb)){
if (e.currentTarget.hitTestObject(getChildByName(e.currentTarget.name+"OB"))) {
// trace (posiciones_validar.indexOf("Pieza1"));
//if (e.currentTarget.name == posiciones_validar[1].name) {
var correctX:Tween = new Tween(e.currentTarget,"x",Bounce.easeOut,  e.currentTarget.x,objetivo,1, true)
//var correctY:Tween = new Tween(e.currentTarget,"y",Bounce.easeOut, e.currentTarget.y, (getChildByName(e.currentTarget.name+"OB")).y,1, true)
e.currentTarget.removeEventListener(MouseEvent.MOUSE_DOWN, drag2);
e.currentTarget.buttonMode = false;
//trace(posiciones_validar[0].x)
          trace("la pieza esta colocada")
//}
}


como puedo obtener los xy de ese getChildByName(e.currentTarget.name+"OB"? podrias echarme una mano por favor

gracias

Por voraz2

21 de clabLevel



 

firefox
Citar            
MensajeEscrito el 28 Jun 2014 02:46 am
Saludos

he estado tratando de hacer que funcione y logro detectar la colision y detener el movimiento de la ficha, pero no puedo hacer el efecto de tween de iman de la ficha cuando ya encuentra la posicion situarse exactamente

Aca el codigo

Código ActionScript :

import flash.display.MovieClip;
var posiciones_validar:Array=new Array()
var mcOb:MovieClip
//var PiezaOb1: MovieClip
mcOb:cuadradito;
var a:uint=0;
var b:uint=0;
for(a=0; a < totalCuadrados; ++a)
{
  mcOb = new MovieClip();
  //le damos un nombre a cada pieza
  //piezaOb.name=["Pieza" + (a+1) + "OB"]; 
  //trace(piezaOb.name)
  mcOb = new cuadradito();
  mcOb.x =  ancho*(a%columnas);
  mcOb.y =  alto*Math.floor(a/columnas)+430 // Lo desplazamos hacia abajo para notar que se van agregando
  mcOb.num.text = "PiezaOb:" + (a+1);
 mcOb.name=("Pieza" + (a+1) + "OB");
  //piezaOb.addEventListener(MouseEvent.MOUSE_OVER, funciona);
   addChild(mcOb);
   trace(mcOb.x,mcOb.y,mcOb.name)
  posiciones_validar.push({name:mcOb.name,x:mcOb.x,y:mcOb.y});
   trace([a]+".- Array Posiciones Validar: "+posiciones_validar[a].name,posiciones_validar[a].x,posiciones_validar[a].x)
}

 function funciona(e:MouseEvent){
    trace("funcionan")
    trace(e.currentTarget.x)
    }

function drop2(e:MouseEvent):void{
   stopDrag();
   trace(posiciones_validar[0].name,posiciones_validar[0].x,posiciones_validar[0].x)
   //for(b=0; b < totalCuadrados; ++b){
   //if (e.currentTarget.hitTestObject(piezaOb)){
if (e.currentTarget.hitTestObject(getChildByName(e.currentTarget.name+"OB"))) {
// var correctX:Tween = new Tween(e.currentTarget,"x",Bounce.easeOut,  e.currentTarget.x, getChildByName(e.currentTarget.name+"OB").x,1, true)
 //var correctY:Tween = new Tween(e.currentTarget,"y",Bounce.easeOut, e.currentTarget.y,getChildByName(e.currentTarget.name+"OB").y,1, true)
e.currentTarget.removeEventListener(MouseEvent.MOUSE_DOWN, drag2);
e.currentTarget.buttonMode = false;
//trace(posiciones_validar[0].x)
          trace("la pieza esta colocada")
//}
}
}


SWF ejemplo

Descarga de FLA

Gracias por toda la ayuda prestada, de verdada me ha servido mucho para aprender sobre todo esto

Jhon

Por voraz2

21 de clabLevel



 

firefox
Citar            
MensajeEscrito el 04 Jul 2014 11:01 pm
Saludos

he terminado el rompecabezas espero le sirva a todo el mundo que busque algo similar

Gracias por la ayuda

Att
Jhon Vargas

Descargar FLA final

pd. loa anteriores archivos han sido borrados solo funciona el juego final

Por voraz2

21 de clabLevel



 

firefox
Citar            
MensajeEscrito el 05 Jul 2014 03:00 pm
Bien, me alegro que finalmente lo hayas resuelto ... a veces es solo un pequeño empujón que necesitas, felicitaciones!

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.