Q3D Tips&Tricks

0 favourites
  • I`m currently learning to use Q3DPlugin, since the developers are having their hands filled, i understand they don't have time for better simple tutorials for people that don't know how to use not even the simple basics of it. So,i opened this topic to be used in future as a tutorial for newbys like me , that don't know much of three.js or q3d plugin, and so we will learn more about them , by posting here what we discovered, what problems we have, and how to solve them.

    If you have tips, tricks, and other tutorials you can share with new people that want to learn, and don't know what is that java script, please do post here.

    Here is the official Three.js examples if you are more advanced in reading and using javascript. http://threejs.org/examples/

    We all want to learn it and use it .

    i will be posting here all i discover in my learning time, and what mistakes i encountered and how i did solved them.

    so here is my first tip : how to keep aspect ration of a 3d sphere, in a simple 2d plane.

    First you need the q3dmaster object placed on screen. then u add the model and change the collision mask to sphere, and to resize to model size. when u resize the ball u can set the X,Y (width and height) as you wold do with a normal C2 sprite but also u have to keep in mind everything now is in 3d, u have to worrie about the 3rd axe that is Z so in order not to have a egg shaped sphere or a flat coin, see in general properties the z size of the object, you have to change it as the models overall size in my picture the model size is 20,20 so my model z size should be 20 also other way will get either a flat coin or the egg shaped.

    [attachment=1:376id4rw][/attachment:376id4rw]

    also for texturing it load ur image that u want to use(works better if the image is set at 512x512 or bigger) and change the animation name of the model to DiffuseMap.

    Download Capx

    [attachment=0:376id4rw][/attachment:376id4rw]

    Thanks to matriax and youtube channel

    2 more tips and tutorials added to the list

    1.

    Subscribe to Construct videos now

    2.

    Subscribe to Construct videos now

    Audio + Q3d Visualisation and some shader FFX that are listed in the description on Arcade game page capx available to download in description.

    more will come soon hope it helps you guys !

  • ok so as you see in my first capx. i failed to wrap the diffuse map the right way, if you wold change the colors to lets say something else white background and dot in middle will just create a spot that its stretching across the ball, but as i was looking in some examples of the q3d examples i noticed that they where warping good and couldn't notice why, here it is how you wrap a texture on a sphere. first i used the frame from the balls animation with this sizes not sure if matters or not (width 512, height 256).

    Wrap Texture Example Picture

    [attachment=1:2secuxms]wraptexture.png[/attachment:2secuxms]

    ok even if the thread is about tips and tricks, il try updating this second post i did, so it can turn into a easy quick pool ball tutorial in Q3D .

    next step il add some normal sprites , the official physics plugin, and a stick to let us hit the cueball and interact with others.

    ok so i already added the sprites in the scene, but wait if you start the scene you will see the sprites are not shown that is because the q3dmaster is has the render mode set to in front, if we wold change it to inside, you will see any sprites you placed above in your scene editor. the end result should look like this.

    Sprites over Q3dMaster

    [attachment=0:2secuxms]adding sprites over.png[/attachment:2secuxms]

    ok so here it is the simple pool Q3D game you can easy make it.

    first i added 15 more balls, created the texture maps for them, (duplicated the cueball, using same .obj but just changed the frame sprite color.), made the settings to match the size and collision size of the cueball so all are same and interact ok, with each other without having a invisible space between them.

    i placed all the balls in 1 big family so it become more easy to set the physics property's and the wrap of the texture in 1 line instead of doing it for each ball. now since we have all that ready, i added an extra sprite called "stick " , *i made its angle follow everytick the mouse axes (mouse.x,mouse.y), then set his position to the cueball.origin point 0 also on everytick (i made the sticks origin point a bit further then the tip of the graphic, so it has a bit of a visual effect, looks better when moves and not overlapping the cueball) . now its all setup. if you download the capx attached you can test the game, it will not work if you don't have the latest Q3D plugin that you can purchase/download it by following this link https://www.scirra.com/forum/updated-q3d-v-2-3-plugins_t106677 . i kinda faked the rotation of the balls in the game for some reason it is not perfect , it only rotates because of the physics engine, i also added when collides to rotate towards his current angle as a 3dmodel but for some reason doesn't work...also for some reason the physics engine kinda fails if u shoot to hard the balls are passing through each other...not sure why maybe its the stepping iteration to low, or not sure... need to check that maybe its a geometry problem. i'l try working further on that and update this post, however it is in 3d and has a better visual feeling to the game, hope you got helpful stuff from this post <img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":)" title="Smile">

    .CAPX Download (11 events )

    http://goo.gl/pVDbp3

    AND here is how it should look if you tried to do it yourself.

    http://goo.gl/48mBwn

    QuaziGNRLnose thanks for the info, that made me understand better , but in the second post i fixed the issue having a simpler approach by using the events in the physics for the texture wrapping since its a sphere. i tried using the normal map texturing tutorial but its not working for spheres very good.

    wanted to use the physics tutorial for this post to create the rolling natural, but when i move the camera above the view its doing some weird actions, as if i want to shoot towards 270 degrees the ball jumps, if i want to shoot towards 90 degrees the ball goes through the floor. maybe is the viewport the fault.. not sure

  • you made a mistake in your first post.

    You do not set model materials to "yes", if you want a diffuse map on your model using animation frames. Model materials tries to use the materials setup in the JSON model file, and will ignore any settings in construct unless you follow a specific advanced procedure.

    For a diffuse map using animation frames there are 3 steps:

    1. Set a Q3DModel object to load a properly UV mapped model

    2. Make sure model materials is set to "no"

    3. Create/Rename an animation to "DiffuseMap" (case sensitive), and draw/import the frames.

    Q3D supports animated textures if you follow this way of texturing. the animated textures use the C2 animation properties to animate. Also note that some material types have extra kinds of maps you can set (just by naming one of the animations, or a combination of animations any of these names like we did for "DiffuseMap"):

    Phong:

    "DiffuseMap"

    "SpecularMap"

    "EnvironmentMap_ENVRefract"

    "EnvironmentMap_ENVReflect"

    "LightMap"

    "BumpMap"

    "NormalMap"

    Lambert:

    "DiffuseMap"

    "SpecularMap"

    "EnvironmentMap_ENVRefract"

    "EnvironmentMap_ENVReflect"

    "LightMap"

    Basic:

    "DiffuseMap"

    "SpecularMap"

    "EnvironmentMap_ENVRefract"

    "EnvironmentMap_ENVReflect"

    "LightMap"

    Normal:

    (no maps supported)

    Depth:

    (no maps supported)

    Shader (feature not fully supported in V-2.3, but WIP for newer versions):

    (depends on the loaded shader)

    The other way of defining materials is to do all that in blender following three.js tutorials, and then setting model materials to "yes" and adding the necessary textures you used in blender to the files folder. it's much more complicated, and works in the same way as the workflow of three.js. I'd recommend against using it as it doesn't allow for the same kind of flexibility as using the animation system.

    Another note is you can change texture animations at runtime, and have more than one, but you need at least 1 animation named for example "DiffuseMap" (or any of the above) if you want to change the texture animation to something different, or else Q3D will think the model doesn't use any diffuse-maps and wont initialize them on the model, and changing will lead to an error or no effect.

    Environment maps work in a special way since they need 6 textures in the shape of a cube to work. If you want to know how they work look at the comments in "texturing model example" capx in the main Q3D post. for Q3D to recognize an animation as an environment map, you need to add "_ENVReflect" for a cubic environmental reflection map, and "_ENVRefract" for a cubic environmental refraction map. the same rule for needing at least one "EnvironmentMap" animation applies here. but additionally other animations need to be called something like "myanimation_ENVReflect" if you want to change environment map animations at runtime, in practice i don't see many people wanting to do this though.

    Also to note for Environment maps, "frames" don't exactly work the same since the maps need 6 textures. Every 6 frames in an animation are converted to the faces of the environment map, if you have 12 frames then you'll have two seperate cubic "texture frames", meaning two sets of 6. this is a little confusing to explain, but as you add frames you'll see with 1-6 frames the environment maps doesn't "animate", but with 7-12 it animates between two "texture frames", with 13-18 it animates with three "texture frames", etc. if there aren't enough frames to build a cube, it just copies the last frame over the remaining needed faces.

    All this is confusing in words, but if you look at the "texturing model" capx, it should be pretty clear.

  • ok so.... omg... finally after 2 days of working with q3d.... and asking so many unclear and stupid questions to the wrong people... i finally found it myself by elimination .... so in order to move a object to an angle on 3d axes into a 3d plane guys.... you need to follow the Q3D viewport &raycaster example, clone the raycaster...into you game... then just take the Q3DRaycaster.x ,Q3DRaycaster.y ,Q3DRaycaster.z that will be your 2d mouse coordinates in a 3d plane.... now to make the change the angle of the object that is a different question because now you cannot use anymore the y axes because y its not moving for same coordonate, its position above your texture or floor or ground in game so u don't want to change that unless you want ur character to jump up.... or go down... under the textures... so we want to use X coordonate and Z coordonate or rz /raycaster z let me test it and il be back

  • I worked on a tutorial on how to setup a basic scene and import a model file.

    3dswing.com/tutorialsexamples.html

    The site has some other info, but not much atm. I also have a video of some of the sample files that I was able to find for Q3d.

    3dswing.com/samples.html

    Also a mobile demo.

    Looking forward to the new version to fix exporting. I'm happy to get any feedback, mistakes or requests for new tutorial videos.

  • Wow , awesome thanks for sharing

  • Exactly what I need, thank you guys!

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Exactly what I need, thank you guys!

    c2 now is a 3d engine and easy to use

  • This is great - Thank you for all your hard work. I have been fighting with this plugin. I can tell it's very powerful - it's just getting my head around it.

  • and everyone making tutorials for Q3D, thank you very much. Haha first time I bought it, I didn't know how to use it and the instructions at that time were very technical and complex for me. I'm now working on other games at the moment, but it is nice to know that once I got the time, there are tutorials there for me to learn it visually.

  • rekjl thanks im happy that this topic has a meaning for other users!

    As we all know the documentation for Q3D plugin is worked on by the plugins developers i opened the topic, cause at the time i bought it there was very little documentation, and the examples will not help a lot the newbys as i was before and im still am , at this moment with Q3d but i said what i learn to share, so here is my next shared knowledge, even though is simple and already given by the Q3D examples some users wont actually understand it for what it is, so il brake it in the simplest way so everyone can understand,

    i seen lately on the Q3d page that some people are trying to figure it out the angle in 3d , or apply force at surtain angle, il tell you just this, there is no need for angle calculation once you have the mouse position in XYZ is basically the same thing , so for you to apply a 3d physics force into the 3d plane, you just need to look at the Raycaster example,

    what raycaster does is casting a line projection or whatever you want to call it, towards the mouse position x,y and calculates the Z axes based on the viewport position, and the object inside your world, now you can do this for all kind of objects, but essentially for it to work, properly and easy way, is not to cast on an moving object, but on a static object, as is a platform, that signifies the ground from your world, i did a pool example for you guys to see how this works, so basically the raycaster example you can clone it into your game and replace surtain parts, as the maximum distance from where to cast, and take position and so on, since c2 now offers 100,000px width /height surface, even though it doesn't really matter cause in Q3d everything is at a difference space time and magnitude.

    so the simple fact? raycaster example is the method to solve the Mouse X Y Z, is already given to you,

    now to apply a force or an impulse once you have the raycast casting the line towards the desired plane, or object , instead of breaking your heads figuring out what is the mouse.z use this variable instead

    (lets say you keep the raycaster as the default name)

    Q3dOymoPhysics.ApplyForceAtPosition Raycaster.x Raycaster.y Raycaster.z that wold be your mouse position in the 3d world

    and the result it wold be something like in this Link deprecated il reupload soon.

    And forgot to mention, when you use raycast example, you need 1 thing to work, your q3dobject has to use a 3d model, can be a cube shape what ever, atleast on my side until i dident set an model to use, dident worked.

  • Hello, all!

    Some people complained that morph animations were very hard to do, so I thought I'd share a way to create morph animations from rigged ones that I sort of stumbled upon during my searches through forums and tutorials. I didn't actually find tutorials on how to do this whole process--just bits and pieces of information that I pasted together and experimented with. So this is my own way of doing it, and it's somewhat rough. Anyone who knows how to do it better, please correct me if you want! If this is already common knowledge, then this might come in handy for people new to Blender.

    I tried to do a walk cycle without using a rig--just manipulating the vertices--and I realized that it would take one hundred years for me to do it. Then I had the thought that maybe I could somehow capture rigged poses with Blender's shape keys and paste them into an animation timeline. Sure enough, it's possible, but there are a few tricks to doing it fairly fast and well. And there's also the question of how to do multiple morph animations in a single .json file, add more animations to the same file as you need them, and rename them as separate animations so that they can be called and tweened in Q3D. I might talk about how to do that in another post, because I'm still trying to figure out how to simplify that process. I've been able to do it so far, mostly by copying and pasting animations from one .json file into another, but it's a tedious and sometimes confusing process. For now I'll just concentrate on a single morph animation, with a suggestion for how to do multiple ones in a single file later in this post.

    It turns out that the morph animations run pretty smoothly and well in Q3D and, as QuaziGNRLnose has said, they are less costly for the hard drive to handle. So far it's working so well that I've decided to make my scenes as boneless as possible.

    Here's how to do it:

    1. First create your model, rig and skeletal animation as you normally would.

    2. Save your original skeletal anim file (you wouldn't want to lose it) and do a "save as" to create a separate morph animation file using the same model.

    3. While you're in Object Mode, count the number of poses in your animation cycle (not including the first pose), select both the model and its skeleton, and use shift + D to duplicate the model that many times. If your last pose is the same as the first--as in a walk cycle--don't count the last one either. For instance, if you have nine poses in your walk cycle, create 7 clones of the model. In the case of the walk cycle I just mentioned, you should now have 8 identical models. Place them in a row, next to each other, from left to right. You're going to be using the first model (the one you cloned from) as the final, boneless, morph animation model, while you're going to use the other models for capturing each pose and transferring the pose to the first model. It's important that you keep that model in its original centered spot. I made the mistake of using one of the cloned models as the final one (not centered in the Blender 3D view), and the exported version was off-center in Q3D.

    4. Start with your first (original) model. We'll call this model 1. Select model 1 (not its skeleton) in Object Mode and set the timeline to the first frame, the first pose. This pose will be the Shape Key "basis" for all of the shape keys that you will create. Once the model is in this pose, open the Modifier window (click the wrench icon in the Properties window), and the first thing you will see is the Armature Modifier. Click Apply to capture the first pose, and the Armature Modifier disappears.

    5. While still in Object Mode, select model 1's skeleton (only) and then switch to Edit Mode. Press X to delete the bones.

    6. Now we're going to create model 1's first Shape Key: Switch back to Object Mode and select model 1. Open the Data window by clicking the vertex triangle icon (next to the wrench). Scroll down to the Shape Key section and click the plus sign (the add button) to create the first Shape Key, which is named "Basis" by default.

    7. Now proceed to the second model in line. This model will represent and capture the second pose in the timeline, and will be used to transfer that pose--as a Shape Key--to model 1. Select model 2 (not its skeleton) in Object Mode and set the timeline to the second pose. As you did in #4 above, open the Modifier window and apply the the Armature Modifier.

    8. Repeat what you did in #5 to delete the bones of model 2.

    9. Repeat what you did in #6 to create model 2's first Shape Key, which will also be named "Basis." You don't have to change the name of this key.

    10. Keeping model 2 selected in Object Mode, select model 1. In model 1's Shape Key window, click the dark triangle button underneath the add and subtract buttons. (I think you can also press W) to bring up the Specials list. Select "Join as Shapes." This will automatically transfer model 2's Shape Key to model 1. You don't have to rename this key either.

    You can test whether or not the transfer worked by selecting only model 1 and switching to Edit Mode. Click on the Basis key and the new key, and you should see the model switch from pose to pose. You can also switch to Object Mode and use the "value" slider underneath the Shape Keys to shift from 0 to 1, to see model 1 morph from the basis pose to the second pose. 0 always references the basis pose, while 1 references the target pose for that particular Shape Key.

    11. Repeat #'s 7 through 10 for each of the models, capturing each pose as they're arranged on the timeline and transferring each, as Shape Keys, to model 1. Test each Shape Key, just in case.

    12. Once you're finished with all the models, delete all of them except for model 1.

    13, Switch from Action Editor to Shape Key Editor. Create and name a new animation by clicking the add button in the field next to "summary." You will see that the timeline is divided into one channel per pose, not including the first pose (or the last pose, if it's the same as the first). Why the first (or last) pose wasn't included confused me at first, but the reason became clear after I stumbled through the recording process--as you will also see in the next step:

    14. To record the first pose, the Basis, set the timeline at frame 1, set all of the channels at 0, click Key, select Insert Keyframes, and select All Channels. Setting 0 in all channels is exactly the same as setting and recording the first pose--which is why a first pose channel is unnecessary. If the last pose is the same as the first, repeat this process for the last frame of your animation.

    15. For the second pose, set the timeline at whatever the next frame is going to be, set channel 1 at 1, and set all of the other channels at 0. Record the keyframes for all channels as you did in #14. For the third pose, move the timeline to the next frame, set only channel 2 at 1 and all the others at 0. Record. For the fourth pose, move the timeline to the next frame, set only channel 3 at 1 and all the others at 0. Do this for all of the poses (except, of course, for the last pose if it's the same as the first).

    16. Make sure that you save often as you go through this process, and save the model when its animation is finished. Now you can export the model, choosing the three.js exporter (File>Export>Three.js). Here's how I set up the export page. I don't exactly know if this part is correct, but it works in Q3D:

    I checked Vertices, Faces, Normals, UVs (but not bones or skinning)

    I checked FaceMaterials and Vertex Colors.

    I checked Morph Animation and kept Skeletal Animations off

    I'm not sure if it's necessary, but I checked Frame Index As Time and Embed Animation

    I didn't check any of the Scene boxes.

    For Settings, I checked Textures and Copy Textures, and I kept Enable Precision checked.

    Within your Construct 2 project, import the .json file into your Files file in the Projects window. Double-click the newly imported .json to open it in Notepad or Wordpad (or whatever program it opens into) and change the name of your animation to what you want by doing the following. I use Notepad, so I'm not sure how this is done in Wordpad:

    1. Click Edit>Replace. In the Find What field, enter "animation_". In the Replace With field, enter "walk" or whatever name you choose. Then click "Replace All."

    4. Save the file.

    That's it! The animation is renamed.

    For multiple animations in a single file, so far I have created separate .json files of the same model with single animations in each of them. I just renamed and copied the animation part of each file and pasted it into the original model/morph animation file within Construct 2. That sounds straightforward enough, but it's somewhat tedious, because the files are so large. It's a little tricky selecting such a large portion of the script, because you have to know where the animation portion begins and ends. I marked the beginning and end of that section by creating a large gap between it and the rest of the script.

    What I haven't tried yet is to place all of the morph animations on a single timeline. That would work, I think, but you'd have to know where each animation begins and ends, and go through a more complex renaming process. Also, I'm not sure if each separate animation has to begin with the 000000 frame or not???

    Then there's something I just started exploring (but haven't figured out yet), and that's how to parent objects to this boneless mesh so that you can have your character carry things, wear helmets, etc. I know that in Blender you can attach a single bone to a single vertex while still preserving the morph animation--and I was able to do that--but I don't know if it's possible to parent an object to that bone. Is that hierarchy preserved in the .json file? I remember QuaziGNRLnose mentioning something about that somewhere--I think....

    Another thing I wondered about is the huge .json file size. Does that hurt the game's performance? Is skeletal animation the better choice? I know that QuaziGNRLnose said that skeletal animation is more costly to performance, but is that still true in version 2.4?

    Thanks for reading!

  • Thank you

  • awesome, tips man, thanks a lot, really covered a large problem for most of us your awesome terransage

    don't worrie no computer will explode on my shift haha ...

  • You're welcome, Lordshiva1948 and ! I just hope my tips don't cause your computers to explode.....

Jump to:
Active Users
There are 2 visitors browsing this topic (0 users and 2 guests)