Mikal's Forum Posts

  • Some babylon.js 3D render using some simple JS integration with ElementQuad to integrate into C3 render and C3 events (you can put it on different C3 layers, add C3 effects, change size, position, etc. of the rendered 3d image.)

    This is a template which uses C3 JS integration to add Babylon, it's not a Babylon add / plugin. It does use on plugin to show the results:

    construct.net/en/make-games/addons/312/elementquad

    You can also use C3 JS to access/manipulate the Babylon scene/engine, e.g.:

    + System: Every tick

    | Local number alpha‎ = 0

    ----+ (no conditions)

    -----> System: Set alpha to ElementQuad.Sine3.Value

    -----> Run JavaScript:

    scene.activeCamera.alpha = localVars.alpha

    scene.activeCamera.beta = 1.55+localVars.alpha/5

    Babylon Template (requires ElementQuad addon)

    BabylonTemplateLocal.c3p

    Uses local project files for models / glb (works in preview and web)

    babylonjs.com

    Have fun with it...

  • A quick check - do you have worker mode enabled? Sometimes this changes scope available to different scripts.

  • Yes, I thought it might be relative, not absolute.

    You might take a look at this (use JS integration to access it), there are some comments on absolute orientation.

    developerdrive.com/how-to-use-the-device-orientation-api

  • I have been using a relative compass heading in C3 for a 360 viewer on mobile.

    You might try and check if it's absolute though (depending on what you need.)

    Check out Touch.Alpha, Beta, Gamma

    construct.net/en/make-games/manuals/construct-3/plugin-reference/touch

    To convert to a stable compass heading I use JS in a function:

    * On function 'compassHeading'

    * Parameter 'alpha' (Number)

    * Parameter 'beta' (Number)

    * Parameter 'gamma' (Number)

    -> Run JavaScript: 

    var alpha = localVars.alpha;
 var beta = localVars.beta;
 var gamma = localVars.gamma
 // Convert degrees to radians
 var alphaRad = alpha * (Math.PI / 180);
 var betaRad = beta * (Math.PI / 180);
 var gammaRad = gamma * (Math.PI / 180);

 // Calculate equation components
 var cA = Math.cos(alphaRad);
 var sA = Math.sin(alphaRad);
 var cB = Math.cos(betaRad);
 var sB = Math.sin(betaRad);
 var cG = Math.cos(gammaRad);
 var sG = Math.sin(gammaRad);

 // Calculate A, B, C rotation components
 var rA = - cA * sG - sA * sB * cG;
 var rB = - sA * sG + cA * sB * cG;
 var rC = - cB * cG;

 // Calculate compass heading
 var compassHeading = Math.atan(rA/rB);

 // Convert from half unit circle to whole unit circle
 if(rB < 0) {
 compassHeading += Math.PI;
 }else if(rA < 0) {
 compassHeading += 2 * Math.PI;
 }

 // Convert radians to degrees
 compassHeading *= 180 / Math.PI;

 runtime.setReturnValue(compassHeading);

    On iOS 13 you also need to request permissions at least when using Safari. Here's my ugly UI method. If you find a better way, please let me know.

    + System: On start of layout

    + PlatformInfo: Is on mobile

    -> Run JavaScript: 

    // Create the button
var button = document.createElement("button");
button.innerHTML = "Tap to Request Orientation Permission";
button.id = "RequestOrientation"
button.style.position = "relative"
//button.style.left = "50%"
//button.style.right = "50%"
button.style.height = "600px"
button.style.width = "360px"
button.style.fontSize = "xx-large"
// Append 
var body = document.getElementById("fb-root")
// var body = document.getElementsByTagName("body")[0];
body.appendChild(button)
// Add listenr
button.addEventListener ("click",requestT)
 
 function requestT () {
		console.log("***INFO*** RequestingDOE")
		document.getElementById("RequestOrientation").remove()
 	if (typeof(DeviceMotionEvent) !== 'undefined' && typeof(DeviceMotionEvent.requestPermission) === 'function') {
 DeviceMotionEvent.requestPermission()
 .then(response => {
 if (response == 'granted') {
				console.log("***INFO*** DOE Granted")
				runtime.globalVars.requestPermission = true
 	window.addEventListener('devicemotion', (e) => {
 	// do something with e
 	})
 }
 	}
 )
 .catch(console.error)
 }
 }

  • I like the 'cloud' the slots revolve in, very nice. Perhaps you already have it with bigger wins, but the raining down of coins for a win is a traditionally nice slots touch. I'd be interested in how you might do that with this theme...

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • There’s an example project on the github.io site. I can get 60 FPS on iPhone with a number of characters. However fewer characters at 60 FPS with my Moto G6 test phone. Use the latest plugin (1.3.0.)

  • I am not the original author of the plugin, I did the simple JS template it was based on and I'm helping out with some of the WebGL coding to make it more effective in mobile, etc. At the minimum, I think an ACE needs to be added for On Animation Finished.

    For me, it has fairly reasonable performance on mobile on an iPhone XR and a Moto G6 now with the latest version of the plugin.

    Check if you are using the latest addon from the direct github link: github.com/gritsenko/c3_spine_plugin/tree/master/dist

    v 1.3.0 is the latest as of 10/10/2019, try it out on mobile and let us know how it goes.

    For the skin issue, try leaving the skeleton name parameter blank. There is some difference between a JSON w/ multiple skeletons and a JSON with just one. In your case is the export of just one skeleton? I am usually over in the Construct Community Discord, if you want you could upload/DM me the *.json and *.atlas and I could try. This plugin is compatible w/ the 3.8 version of Spine.

  • Elastic - ah that's too bad. I'll probably look at a way to 'pre-bake' that before runtime, but I will wait for the release, so I can see more details. Keep up the good work, looking forward to the release.

  • Great work, it looks so good. I am also thinking about using it with that elastic effect you demonstrated before, so it can hold shape while still being stretched and changed. Thanks for answering my questions.

  • Nice concept and style. I can imagine adding more commands and needed actions on more complicated levels. I also _wonder_ if having an 'up' arrow for older commands would feel good or if it's better to type out each command every time.

    Option for more 'advanced' players or more complicated levels to allow multiple commands on one line with ',' representing a fixed delay? e.g. north,,,,east,,north,,,south Just some thoughts, looking forward to the next iteration.

  • It might be worker mode, disable that in 'advanced project settings'. 'window' is not available to the thread running in a worker.

    See: construct.net/en/make-games/manuals/construct-3/scripting/using-scripting/javascript-construct

  • It will be really interesting to see how this goes with particles, as folks have talked about, it could be really nice for pixel art, where there are a manageable number of particles to represent the entire image. I'm glad I gave you a little bit of inspiration. As you say, programmatic building and loading are the keys to make it useable, like the function I created in my example to make the sprite rectangle build of smaller sprites.

    One thing I noticed with the larger sprite block size was that setting the collision polygon a little smaller than the actual sprite image made the collapse look more natural (I did this in later test.) When the blocks can overlap slightly it has a more natural feeling of a collapsing structure and jumble of blocks. I think this may not be an issue for the particle system, but if it is, might want to think about making the particles able to overlap a little (or have a parameter or setting for it.)

  • Here's what I mean about applying texture across many sprites as an example (using C3 physics.)

    Each block is a sprite w/ one big texture. A function creates a rectangle of sprites and 'divides' a building texture between the sprites and then we can apply physics to the sprite group and have fun with the building. I am hoping this is applicable to LFJS...

    OffsetTexture Addon and Example

  • For texture mapping across rectangular objects to create a 'complete' rectangular object, I'm thinking that something like a building could have one big texture map of the building assigned to the LFJS 'bricks' that make up the building. Then perhaps at runtime, create the building brick by brick in place and use a texture map effect to pick a sub-image of the full texture depending on the location of the brick in the building (e.g. a srcOriginStart, srcOriginEnd offset into the larger texture, it would be easy to create this effect.) Then have a Giant Robot smash the building and have fun!