¿Cómo hacer un puzzle sencillo para niños?
 

Hola a todos. Me gustaría indicarais un ejemplo sencillo (seguro que hay algo por ahí) de cómo hacer un puzzle con una imagen troceada. Digamos a un lado de la pantalla una trama y a la derecha una serie de piezas o componentes TImage que se tienen que llevar a la trama. En fin lo más sencillo posible. Digamos seis piezas, por dar un número. Gracias.

bulc,

Revisa este link:
En el encontraras un ejemplo descargable de un Puzzle hecho en Delphi.

Espero sea útil :)

Nelson.

Algunos links que te pueden ayudar...

Cómo trocear una imagen en trozos a modo de puzzle.

Una vez troceada debes poder moverlas utilizando el ratón. Aquí hay un ejemplo de cómo puedes mover componentes de tipo TImage utilizando el ratón (y aquí otro sobre lo mismo).

Por último sólo queda la parte de "saber" cuando el puzzle está acabado y correcto. deberías tener una zona donde las imágenes que se mueven queden ancladas. Es decir en un puzzle de 2x3, deberías tener definido una "especie" de tablero, donde puedas conocer qué pieza se ha movido a cada posición y poder comprobar si cada una está en la posición correcta.

Espero que te haya servido de ayuda.

Un saludo.

Gracias
 

Me pongo a ello. Gracias.

¿Y para trocearlos así?



:D

Edito:

¡Epa! ¡Qué trozote! :eek: Pero se entiende la pregunta ¿no? :D

// Saludos

Saludos
 

Vaya recochineo... !!Je, je!! Pero si no sé ni hacer una o con un canuto!

Se que delphi es un lenguaje multiproposito pero esto no sería mucho mas sencillo no se en Flash o hasta en HTML5 y creo que de eso si que abundan ejemplos y hasta mas sencillo ha de ser.

Como ejemplo solo escribes "Flash create puzzle game" y te devuelve 77 millones de resultados... entre otros este.

En cambio si escribes "Delphi Creatre puzzle game" solo te devuelve 12 millones de resultados y de verdad que no hay tantos tutoriales "For dummies".

Esto lo digo por:

Ufff!!!!!

Podemos intentar avanzar un poco más.

Para el tema de la interficie, que es lo primero que se me ha venido a la cabeza, supongo que un opción sería utilizar forms con máscaras. Hay alguna utilidad que permite facilitar esto. Si pensamos en un puzzle con las piezas interiores iguales, habría que generar 9 máscaras (4 esquinas, 4 laterales y 1 interior).
Algo así:



(link al ejemplo en el FTP)

En el tema de la imagen que comentas Román, no se si se puede hacer utilizando algún tipo de máscaras.

Pienso en un puzzle de este tipo, en que las piezas interiores son iguales (2 o tres tipos)



Tal vez alguien más ducho en tema de gráficos nos pueda ayudar aquí. Creo que a partir de una plantilla de este tipo, o utilizando unas máscaras similares a las que se usan en el ejemplo para los forms, se debe poder "extraer" de una imagen grandes los trozos que conforman el puzzle.

El último punto complejo, imagino que sería, el detectar que las piezas están colocadas correctamente. Para eso no se si se podría utilizar una plantilla en el formulario que además de hacer de guía, sirviera para ajustar las piezas a sus posiciones correctas (igual que hay controles que llamamos "magnet" que ajustan las ventanas a los bordes, algo similar con las piezas a sus posiciones correctas cuando están cerca).



a ver si alguien puede aportar más sobre el tema de las imágenes, me parece interesante.

Un saludo.

Más
 

Yo creo q para mi nivel lo podríamos dejar en trozos rectangulares. Luego se puede ampliar a formas curvas.
Supongo que cada pieza deberá colocarse según el área donde el ratón haga OnMouseUp. ¿Es así?
¿Debe definirse el área de destino con relación al TForm, o cambia si el TForm se altera de tamaño?
Eso es todo.
Saludos.

¿Y los que fabrican rompecabezas de cartón?
 

Más gente al paro.

Correcto; No estaba pensando en que lo implementaras, si no es necesario, simplemente era por ampliar la información y por probar. Ya sabes, como cuando empiezas un puzzle que es un reto acabarlo, pues algo así... Es el gusanillo que todos tenemos de resolver problemas... ;)


Si, entiendo que de alguna forma debes definir una zona donde se van a colocar las piezas "con lo lugares disponibles" y almacenar de alguna manera qué pieza del puzzle va en cada uno de esos "lugares".

Entiendo que el TForm, deberá ser del mismo tamaño que la imagen original (deberías bloquear para que no cambie), de esa forma cuadrarán la piezas dentro del form (en cuanto a tamaño).

No lo creo. Yo tengo en la mesa del comedor ahora, uno de 3000 piezas...
Dudo que pudiera hacerlo en la pantalla... :D:D:D:D

NotitaDragQueSeFuga. ¿Còmo evitarlo?
 

Una preguntita. ¿Cómo se impide que el ratón salga del TForm llevándose la notita-cursor del proceso Drag&Drop?
Los enanos alumnos, se llevan la letra fuera (al escritorio windows) y la pierden, lo mismo que pierde la paciencia su profe.
Lo dicho... Gracias.

Hola bulc.

Código Delphi [-]
procedure TForm1.FormActivate(Sender: TObject);
var
  R: TRect;
begin
  R:= GetClientRect;
  MapWindowPoints(Handle,0,R,2);
  ClipCursor(@R);
end;

// Necesario para salir de la aplicación
procedure TForm1.btnSalirClick(Sender: TObject);
begin
  Close
end;

Saludos. :)

bulc,

Revisa este código:

Código Delphi [-]
procedure TForm1.RemoveClippingStateClick(Sender: TObject);
begin
   ClipCursor(nil);
end;

El código anterior devuelve la funcionalidad normal al cursor (Remueve el Clipping State).

También puedes salir de la aplicación con la secuencia de teclas ALT+F4.

Espero sea útil :)

Nelson.

Hola Nelson.

Supongo que bulc no desea que los niños tengan un botón para desactivar la restricción del mouse y así poder llevar letras al escritorio... :)

Saludos.

ecfisa,

Es solo información complementaria, quizás la aplicación tenga más de un formulario :)

Nelson.

Gracias, enseguida lo pongo en práctica.

AbejaSeRebelaComoPrincipal
 

En una aplicación escolar Multificha (20 Forms) de poner letras de animales, tengo un Form de Entrada Principal desde la que se elige un animal. Resulta que una de ellas (la abeja rebelde)
la añado usando Project->Add to Project y cuando se ejecuta la aplicación la abeja se abre encima de la ficha principal. He revisado con Project->Options que la MainForm fuera la correcta
y señala, efectivamente la misma (MainForm1). ¿Alguien me puede dar alguna pista de por qué la dichosa Abeja se cuela?
Por otro lado si se coge una letra (Drag) de la ABEJA, y se la saca a pasear por el escritorio y si suelta el botón... !adiós letra! Y los alumnos encantados, de salir... de donde sea.
Qué cosas. Éstas no las explican ni en el libro gordo ese...
Agradecería una ayudita. Gracias.

Me gustaría ayudarte, pero no hablo alemán. :(

Por favor, pon títulos descriptivos a tus preguntas, gracias por tu colaboración.
Ya lo comenté la anterior vez, que hiciste lo mismo, por favor, respeta las normas de los foros, gracias :)

Acepta mis disculpas
 

De acuerdo.

Gracias por tu comprensión ^\||/

¿Tu aplicación es MDI?, ¿Tus formularios se crean en tiempo de ejecución? (¿incluido el formulario abeja?) Options

¿Y cual es la funcionalidad correcta? estas habilitando Drag and Drop para las letras de la palabra, ¿para que?, ¿para que la lleven a un panel?, ¿para que la saquen de la pantalla?...

Comparto un poco la respuesta de Al
Dices mucho pero... faltan detalles, no podemos ayudarte adivinando tu código.... ¿puedes poner ejemplos mas concretos?

Es una aplicación multificha normal
 

El objetivo de esta aplicación escolar es llevar letras TLabel para formar la palabra del animal que se muestras en un TImage. Debajo hay otro TImage de fondo tapado con otros TImages de Tapa.
Al dejar el TLabel que se arrastra, aparece la letra, etc...
No es MDI, es una aplicación multificha normal. Carga 20 ventanas=fichas al iniciarse. El objeto es llevar letras (TLabel) grandes a unas TImages. Al hacer Drop en la Imagen, aparece una letra, etc. (Se entiende?)
Los alumnos llevan el TLabel (Cursor de Drag), pero algunos "lo sacan de la ventana" de la aplicación y lo sueltan en el escritorio, con lo cual pierden el TLabel. Me gustaría saber como devolver el TLabel a su sitio en caso de soltarlo fuera, igual que hago dentro de la ventana de la aplicación. Espero que se entienda.

bulc,

El control de los límites de la ventana se puede hacer por medio de la API ClipCursor, lo cual evitara que el TLabel salga fuera del formulario.

Revisa este link:
Espero sea útil :)

Nelson.

Respuesta a NelsonGarcía
 

No entiendo eso de la API que mencionas. ¿Podrías extenderte un poco más?. Gracias de todas formas.

Respondo
 

Soy Bulc. He hecho otra Form calcada de la de Abeja. He borrado la anterior y la he guardado en el projecto, y listo. Esta vez ya no aparece al ejecutarse la aplicación. Sólo cuando se la llama con Show.
Me quedaré con las ganas de saber por qué diantres arrancaba por su cuenta. Espero no molestar. Ahora me queda saber como limitar el arrastre de los TLabel a la ventana que los contiene sin poder sacarlos el escritorio...

bulc,

Revisa este código:

Código Delphi [-]
// Limita el movimiento del Cursor solo a Form1 : Activa Clipping State
procedure TForm1.FormActivate(Sender: TObject);
var
  R: TRect;
begin
  R:= GetClientRect;
  MapWindowPoints(Handle,0,R,2);
  ClipCursor(@R);
end;

// Necesario para salir de Form1
procedure TForm1.btnSalirClick(Sender: TObject);
begin
  Close
end;

El código anterior evita que el cursor salga de Form1 por medio del API ClipCursor.

Revisa este código:

Código Delphi [-]
// Remueve el Clipping State
procedure TForm1.RemoveClippingStateClick(Sender: TObject);
begin
   ClipCursor(nil);
end;

El código anterior devuelve la funcionalidad normal al cursor. Es necesario si tienes más de un formulario en tu aplicación para remover el Clipping State.

Todo el código anterior se encuentra en el link mencionado anteriormente.

Espero sea útil :)

Nelson.

No sé si me he explicado bien. Lo que quiero es evitar que un Drag de TLabel, salga fuera del TForm y si se levanta el botón del ratón, se pierda. Bulc.

bulc,

La función ClipCursor(nil) devuelve la funcionalidad normal al cursor. Es necesario si tienes más de un formulario en tu aplicación para remover el Clipping State, en caso contrario no es requerido.

Espero sea útil :)

Nelson.

Hola bulc.

¿ Pero esto no es lo mismo que se trato anteriormente [ aquí ] ?

Saludos.

Sigo sin entender... Si ClipCursor(nil) hace normal el cursor, ¿dónde lo coloco? En el evento onDrop, ¿quizás? Pero, es q si está fuera del Form=origen del TLabel, no se activaría. ¿Cómo lo ves?
Me he dado cuenta que al hacer BeginDrag(True), salta el cursor de la notita y el OnMouseUp del TLabel, también se activa, con prioridad al Drop. Por ahí iba yo, pero nada. He probado con el código que me sugieren pero nada.
Saludos. Bulc.

Si, se había tratado
 

Pero sin solución.

Hola bulc.

Creo que vas a tener que darnos mas información, por que de este modo estamos tratando de adivinar como tenes organizada tu aplicación.

De acuerdo a lo que comentas:
Me surgen las siguientes dudas:

• ¿ Que función desempeñan esas 20 ventanas ?
• ¿ Quién es su Parent ?
• ¿ Donde estan situados los TImage ?
• ¿ Donde los TLabel ?
• ¿ De cuáles de las ventanas los alumnos sacan el TLabel hacia el escritorio ?

Saludos.

bulc,

Revisa este código:

Código Delphi [-]
unit Unit1;

interface

uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
  Dialogs, jpeg, ExtCtrls, StdCtrls, MMSystem;

type
  TForm1 = class(TForm)
    txtSiete: TLabel;
    Button2: TButton;
    txtNumero: TLabel;
    txtUno: TLabel;
    txtNueve: TLabel;
    Button3: TButton;
    procedure FormDrapDrop(Sender, Source: TObject; X, Y: Integer);
    procedure FormDragOver(Sender, Source: TObject; X, Y: Integer; State: TDragState; var Accept: Boolean);
    procedure Button2Click(Sender: TObject);
    procedure FormActivate(Sender: TObject);
    procedure LabelDragOver(Sender, Source: TObject; X, Y: Integer; State: TDragState; var Accept: Boolean);
    procedure FormCreate(Sender: TObject);
    procedure Button3Click(Sender: TObject);
  private
    { Private declarations }
    iComponenteX, iComponenteY: Integer;
    bMoviendo: Boolean;
  public
    { Public declarations }
  end;

var
  Form1: TForm1;
  PosLabel : Array[1..9] of TPoint;

implementation

{$R *.dfm}

// Asigna nuevas coordenadas a un Tlabel en Drag&Drog
procedure TForm1.FormDrapDrop(Sender, Source: TObject; X, Y: Integer);
begin
   if Source is TLabel then
   begin
      TLabel(Source).Left := X;
      TLabel(Source).Top := Y;
   end;
end;

// Activa Drag&Drog para un TLabel
procedure TForm1.FormDragOver(Sender, Source: TObject; X, Y: Integer;
  State: TDragState; var Accept: Boolean);
begin
   if Source is TLabel then
      Accept := (Source is TLabel);
end;

// Realiza Acciones en Modo Drag&Drog
procedure TForm1.LabelDragOver(Sender, Source: TObject; X, Y: Integer; State: TDragState; var Accept: Boolean);
begin
   if (Source is TLabel) then
   begin
      if (TLabel(Source).Name = 'txtSiete') and (State = dsDragEnter) then
      begin
         txtSiete.Enabled := False;
         txtSiete.Visible := False;
         PlaySound('Correcto.wav',0, SND_FILENAME or SND_ASYNC);
         ShowMessage('Número Correcto');
      end;

      if (TLabel(Source).Name <> 'txtSiete') and (State = dsDragEnter) then
      begin
         PlaySound('Incorrecto.wav',0, SND_FILENAME or SND_ASYNC);
         ShowMessage('Número Incorrecto');
      end
   end;
end;

// Activa el Clipping Status
procedure TForm1.FormActivate(Sender: TObject);
var
   R: TRect;
begin
   R:= GetClientRect;
   MapWindowPoints(Handle,0,R,2);
   ClipCursor(@R);
end;

// Remove el Clipping Status
procedure TForm1.Button2Click(Sender: TObject);
begin
   ClipCursor(nil);
end;

// Inicializa el Form1
procedure TForm1.FormCreate(Sender: TObject);
begin

   txtUno.DragMode := dmAutomatic;
   PosLabel[1].X := txtUno.Left;
   PosLabel[1].Y := txtUno.Top;

   txtSiete.DragMode := dmAutomatic;
   PosLabel[7].X := txtSiete.Left;
   PosLabel[7].Y := txtSiete.Top;

   txtNueve.DragMode := dmAutomatic;
   PosLabel[9].X := txtNueve.Left;
   PosLabel[9].Y := txtNueve.Top;

end;

// Reset el Form1
procedure TForm1.Button3Click(Sender: TObject);
begin

   txtUno.Left := PosLabel[1].X;
   txtUno.Top := PosLabel[1].Y;

   txtSiete.Left := PosLabel[7].X;
   txtSiete.Top := PosLabel[7].Y;
   txtSiete.Enabled := True;
   txtSiete.Visible := True;

   txtNueve.Left := PosLabel[9].X;
   txtNueve.Top := PosLabel[9].Y;

end;

end.

El código anterior hace Drag&Drop de 3 TLabel (Números) y verifica si se selecciono el número correcto. Este ejemplo hace uso de la función ClipCursor la cual limita el movimiento del cursor solo a la coordenadas sobre las cuales se definió y muestra como remover el Clipping Status.

La aplicación esta implementada en el siguiente link: http://terawiki.clubdelphi.com/Delph...op_Numeros.rar

Espero sea útil :)

Nelson.

Gracias por tu esfuerzo. Estudio el código y te cuento. Bulc

Absolutamente correcto. Gracias
 

Nelson, he montado el proyecto tal como indicabas y realmente has dado en el clavo. El cursor queda limitado al área cliente. Todo a pedir de boca. Eres un genio. Gracias mil. !!