Puzzel

Puzzel

Ontwerp

De puzzel zal een afbeelding vormen van hoe de wielen van de kluis zullen moeten gedraaid worden.

Ik nam de deur van de kluis in Cinema4D, en zette de camera op Top View om de perfecte afbeelding te krijgen van mijn kluis.

Daarna was het gewoon een kwestie om de afbeelding van de kluis onder te verdelen in 9 stukken, en deze in te kleuren.

Maken van de puzzelstukken in 3D

Na het nemen van een screenshot van mijn aparte puzzelstukken, kon in terug in Cinema4D deze stukken omzetten naar een 3D-ontwerp.

Dit ontwerp had enkel de vormen van de puzzelstukken, niet met de afbeeldingen erop.

Puzzel naar Unity

Ik importeerde mijn 9 puzzelstukken in Unity, en plaatste de afbeeldingen van de puzzelstukken ook in mijn assets-folder.

Nu is het nog de kwestie om deze puzzelstukken te kunnen vastnemen, maar vooral om de afbeelding eerst op de puzzelstukken te plaatsen.

Afbeeldingen op puzzel

Eerst wilde ik terug (net zoals vele andere objecten) via Materials deze afbeelding op mijn puzzelstukken krijgen.

Ik wist niet precies waarom, maar de afbeelding werd op een erg rare manier vervormd.

Het is misschien niet zo goed tezien op de afbeelding, maar de materialen worden vervormd via een driehoeks-structuur.

Ik probeerde om via photoshop deze vervorming tegen te gaan, maar ik bereikte niet echt het gewenste resultaat.

Om dit op te lossen besloot ik om een UI-canvas te maken voor ieder stukje, en dit canvas als ChildElement aan het ieder puzzelstuk te geven.

Doe dit als volgt: Ga naar UI → Canvas en maak binnen dit canvas een Image aan.

Scale deze Image (het witte vierkant dus) zodat je puzzelstuk er perfect binnen past.

Maak dan van je PNG-afbeelding van je puzzelstuk een Sprite via Texture Type → Sprite (2D and UI) door je afbeelding aan te klikken. Dan zal je die optie zien staan.

De laatste stap is om je nieuwe Sprite als afbeelding te zetten binnen de Image die je daarnet aanmaakte, en voila!

Je puzzelstuk zal nu een mooie, perfecte afbeelding hebben. Doe dit proces nu voor alle stukken.

Goed om te weten

Als je puzzel bestaat uit allemaal vierkante stukken, kan je wel met Materials werken. Dit zal je heel wat tijd en prutswerk besparen.

Puzzel sockets

Je weet ondertussen wel hoe het gaat. Zorg ervoor dat je via de XR Grab-interactable je puzzelstuk 'vastneembaar' maakt.

Om onze puzzel te kunnen maken, zullen we werken met Sockets

Selecteer de achtergrond waarop je puzzel zal komen. Voor ieder puzzelstuk moet je een Empty GameObject maken. Deze GameObjects zullen onze sockets worden waar onze puzzelstukken tot aangetrokken zullen worden.

Voeg een Sphere Collider toe op je GameObject, samen met een XR Socket Interactor.

Om ervoor te zorgen dat alleen puzzelstukken op deze socket blijven plakken, zal je eerst een nieuwe 'Layer' moeten aanmaken. Noem deze Layer bijvoorbeeld 'Puzzle'.

Zet nu de Layer van ieder puzzelstuk op 'Puzzle', en in de XR Socket Interactor component die je juist hebt aangemaakt, zet je de Interaction Layer Mask op 'Puzzle'.

Een laatste stap is het experimenteren met Attach Transforms zoals ik eerder in deze blog al eens aankaartte.

Zorg ervoor dat je puzzelstukken mooi uitlijnen. Deze waarden en benaderingen zullen voor iedereen een beetje anders zijn, dus ga ik niet verder meer op ingaan.