I want to make a game in webAR, the character tells a short story with animation, after that there is a question, should answer 2 questions.
One question is to arrange the images by size, is it feasible to do it while in AR mode? I managed to set up to move pictures in 3D space, but in AR mode I canāt, the whole object moves and scales when I tap with two fingersā¦
Another question would be a 3x3 puzzle, where 2 spaces are missing and the user needs to fill in 2 puzzles in the corresponding space.
The idea is to be 2D UI objects in 3D space.
Any advice how to do that? Is this idea possible in this way?
Creating a webAR game with the features you mentioned is definitely feasible, and Needle Engine can help you implement it efficiently! Hereās a structured plan to help you achieve these features in your game:
Pseudocode Plan
Setup AR Session:
Initialize an AR session with Needle Engine.
Create a scene with a character that presents a story.
Character Animation & Storytelling:
Load the character model.
Animate the character to tell the story using animation components.
Question Interaction:
After the story, present two questions.
Enable user interaction for answering questions.
Image Arrangement by Size:
Create 2D UI elements in the AR space that represent images.
Implement touch controls (utilizing touchstart, touchmove, and touchend events) to rearrange images in AR without scale issues.
Fix the movement so that only selected objects move instead of the entire scene.
3x3 Puzzle Implementation:
Create an interactive 3x3 grid in 3D space.
Leave two spaces empty for user interaction.
Detect user taps on the empty spaces to fill them with the correct images.
Code Example
Hereās a basic code snippet for the image rearrangement:
import { ARSession, UIElement } from "@needle-tools/engine";
const arSession = new ARSession();
arSession.start();
const images = []; // Array to hold image UI elements
// Create UI for images
for (let i = 0; i < 9; i++) {
const imageUI = new UIElement();
imageUI.position.set(i % 3, Math.floor(i / 3), 0); // Position in a grid
images.push(imageUI);
}
// Add touch functionality for rearranging
images.forEach((image) => {
image.on('touchstart', (event) => {
// Logic to select image for moving
});
image.on('touchmove', (event) => {
// Logic to move the selected image without scaling the others
});
image.on('touchend', (event) => {
// Logic to drop the image in a new position
});
});
Tips for Implementation
AR Support: Ensure that the AR functionality is supported on the devices you are targeting.
Touch Controls: Fine-tune the touch controls to limit unwanted scaling and movement by managing touch input more precisely.
UX Design: Consider the user experience when arranging images and solving the puzzle to make it intuitive.
Feel free to ask if you have further questions about specific implementations or issues you encounter during development!
1 replies left - Get a PRO license for more AI replies. thread_ZqCgJXhxIWVY1SmF30ZgG6Vu Reply to this message to continue the conversation
Hey, there is defenitly some bug, i just tried Needle example sceene āAnimator (Everywhere Actions)ā, and I build it localy and also build it for needle engine cloud. In booth ways i can move object, rotate and scale.
I am using Unity 6, and Needle Engine 4.1.0. I will try with another version of Needle engineā¦
Quick update, currently working fine on Android phones (Samsung s23 ultra) but the problem is on iPhones. I tested it on iPhone 13 pro and iPhone 16 pro and there is a problem.
I hope that there will be a repair soon, so that I can continue working on the project and deliver it to the client.
Thanks in advance, best regards, Enginge is really great!
Hm, whatās about USDZ exporter script? I see that is for Quicklook, and there is a button for interactive, but nothing happend when i disable or enable it.
I enabled UsePlacementReticle and still works on Android well, but on Ios devices is the same.
Iām not sure I understand whatās not working on iOS from your description so far. On iOS, we convert scenes to USDZ for QuickLook ā including interactive components like our Everywhere Actions (e.g. āSet Active on Clickā and others).
Are you using everywhere actions?
Could you try to describe the issue youāre having again please?
Here is the short description of my project and problem.
I need to create a 3D character for a client that will have its own animation and narrate a story. After the story, two questions should appear. The user must select the correct answer for the first question, while the second question will require them to solve a puzzle.
I must use only Augmented Reality (AR) without XR. When the user opens the webpage, the camera should activate immediately, displaying the 3D model along with the specified options. Augmented Reality must work on both Android and iOS devices.
For the puzzle interaction, I am using the Needle script āDrag Controlsā to move objects. However, I am unable to set up the puzzle movement on iOS devices because I cannot disable the functionality for moving, rotating, and scaling the object. When I try to move the puzzle pieces, the entire object, including the character, moves instead.
I am sending a short video to demonstrate how it should lookāfeaturing the main character and a 2D question in a 3D space.
I hope you will understan what i need, if you have any question please let me know.
The drag-drop behaviour youāre showing here is not supported by Apple in their QuickLook system. However, what you can do is modify the UX slightly to make it work, by using something that is more a āselect-and-pick-slotā user interaction.
So basically
user clicks on puzzle piece 1
the ātarget slotsā for that puzzle piece are activated
user clicks on one of the target slots
puzzle piece 1 swaps places with the object currently in that slot
This should be doable with our Everywhere Actions or custom USDZ actions. You can of course still have the dragcontrols-based interaction for Android-based devices (like phones and Quest AR) but for Appleās ecosystem you need to get a bit creative on how to get the functionality you want.
