Puzzle2002

Aqui comenzamos con la creación de un nuevo tipo de rompecabezas.

Esta vez reimplementaremos un viejo programa en Pascal.

La idea original vino de una vieja revista denominada Wild der Wisebschaft (en aleman) de hace mas de veinte años.

La pantalla del programe era esta.

Comensaremos por lo mas simple que es el fondo ,

Siempre lo que vemos en pantalla es el mundo (World) que es un PasteUpMorph,

Como usar correctamente el entorno.

En el flap Tools, ahora tenemos una nueva herramienta muy util denominada Message names. La extraemos y en la linea de busqueda tipeamos background.

La ventana se verá así, luego de recorrer los distintos métodos que tienen la palabra background.

Recordarm para obtener cierta información sobre la clase se marca la misma y se selecciona el panel correspondiente en el System Browser.

Para obtener mejor informacion, tambien recordamos recurrir al sitio www.squeakdoc.org

Suponiendo que el fondo deseado este en el mismo directorio podemos probar nuesto código en el Workspace.

Recordar los formatos de imagen que lee directamente el Squeak son .gif , .jpg .png, que son comunes en Interner

| miMundo f |
f _ SketchMorph new initializeWith: (Form fromFileNamed: 'Fondo.gif').
miMundo _ ActiveWorld.
miMundo backgroundSketch: f.

Luego deberíamos cargar las piezas.

En los antiguos juegos se cargaba un mapa de bits

En nuesto caso, para los paralelogramos azules el mapa de bits original, a la mitad de su tamaño real.es el siguiente

En los sitemas tradicionales necesitamos la "mascara", que es el mismo dibujo pero solo en blanco y negro, para que el sitemea de dibujo "pinte" solo las partees negras de la mascara al superponer el dibujo deseado a la misma.

Tambien se ve que para un mismo objeto pieza hay cinco posiciones posibles dadas por la rotaciónn de la pieza y que en el caso de los paralelogramos hay dos piezas de cada una ya que existen individualmente como piezas u objetos distintos la pieza y su imagen en el espejo (imposible de obtener por rotacion).

Tambien necesitamos un mapa de bits para los paralelogramos amarillos y por razones de economia de espacio y de velocidad de carga, estos dos mapas podrian cortarse a la mitad por el vertical de manera de tener 5 * 20 piezas posibles.

En Squeak una posibilidad es la siguiente:

Crear una nueva clase según lo siguiente.

SketchMorph subclass: #PieceMorph
instanceVariableNames: 'pictNumber myNumber srcFoto'
classVariableNames: ' '
poolDictionaries: ''
category: 'Morphic-Puzzle'

Elegi un SketchMorph por ser posible cambiar los colores luego de creado el morph.

La forma en que este tipo de juego crea las piezas es seleccionado el area del mapa de bits a transformar en "sprite".

En este caso, como en el mapa de bits original los dibujos están igualmente espaciadas según un cuadrado.

Por lo tanto, para indicar el mapa de bits a utilizar

initialize: foto
srcFoto _ Form fromFileNamed: foto.
pictNumber_ 1.

pictNumber nos servirá para indicar la rotacón de la pieza, actuando como contador .

El objetivo es que al hacer doble click sobre la pieza , lo que se vea en pantalla sea el dibujo ubicado a su derecha hasta que corresponda mostrar nuevamente el dibujo original

select: piece atPoint: point
| y r |
myNumber := piece.
y _ myNumber * 60.
self initializeWith: (srcFoto copy: (0@y extent: 60@60)).
originalForm mapColor: Color white to: Color transparent.
r _ originalForm rectangleEnclosingPixelsNotOfColor: Color transparent.
self form: (originalForm copy: r).
self position: point.
self openInWorld

Con esto logramos crear una "sprite" para utilizar posteriormente

Modificando el Morph DoubleClickExample en la categoría Morphic-Demo.

los mensajes de la categoría event handling serían

click: evt
| texto |
texto _ 'Soy la pieza ',myNumber asString, ' estoy rotada ',(pictNumber * 60) asString. "Con este codigo, al hacer simple click sobre la pieza"
self showBalloon: texto hand: evt hand "Se verá el número de la pieza y su angulo de giro contra reloj "

doubleClick: evt
| y x r |
pictNumber =4 ifTrue: [pictNumber _ 0]
ifFalse: [pictNumber := pictNumber + 1].
y _ myNumber *60.
x _ pictNumber * 60 .
self form: (srcFoto copy: (x@y extent: 60@60)) .
originalForm mapColor: Color white to: Color transparent.
r _ originalForm rectangleEnclosingPixelsNotOfColor: Color transparent.
self form: (originalForm copy: r).

firstClickTimedOut: evt
| root popUp |
root _ owner rootForGrabOf: self.
root == nil
ifTrue: [
popUp _ self copy.
self board owner owner addMorphFront: popUp.
self world displayWorld.
(Delay forMilliseconds: 750) wait.
popUp delete]
ifFalse: [evt hand grabMorph: root]

mouseDown: evt
"Do nothing upon mouse-down except inform the hand to watch for a double-click; wait until an ensuing click:, doubleClick:, or drag: message gets dispatched"
evt hand waitForClicksOrDrag: self event: evt

startDrag: evt
"We'll get a mouseDown first, some mouseMoves, and a mouseUp event last"
| oldCenter |
evt isMouseDown ifTrue:
[self showBalloon: 'drag (mouse down)' hand: evt hand.
self world displayWorld.
(Delay forMilliseconds: 750) wait].
evt isMouseUp ifTrue:
[self showBalloon: 'drag (mouse up)' hand: evt hand].
(evt isMouseUp or: [evt isMouseDown]) ifFalse:
[self showBalloon: 'drag (mouse still down)' hand: evt hand.
evt hand grabMorph: self].
(self containsPoint: evt cursorPoint)
ifFalse: [^ self].
oldCenter _ self center.
color = Color red
ifTrue:
[self extent: self extent + (1@1)]
ifFalse:
[self extent: ((self extent - (1@1)) max: (16@16))].
self center: oldCenter.

Deseamos crear un boton de lanzamiento del rompecabezas. En el workspace podemos tipear

esteBoton _ IconicButton new.
esteBoton initialize.
esteBoton labelGraphic: ( Form
fromFileNamed: 'Puzzle2002.gif').
esteBoton target: PieceBoard.
esteBoton actionSelector: #new.
esteBoton center: Display center.
esteBoton openInWorld.