Mikal's Forum Posts

  • Here's an example from my Lottie example project: 

    	globalThis.myCanvas = document.createElement("canvas")
	const canvas = globalThis.myCanvas
	canvas.id = 'SVGCanvas'
	canvas.width = 480 // set canvas size depending on resolution / performance needs
	canvas.height = 480
	canvas.style.position = 'absolute' // place it behind the C3 canvas
	canvas.style.top = "0px"
	canvas.style.left = "0px"
	canvas.style.zIndex = "-1000" // place it behind the C3 canvas
	globalThis.myCtx = canvas.getContext("2d") // get a rendering context for lottie to render to
	document.body.appendChild(canvas) // add canvas to the DOM

    The example project is here:

    construct.net/en/forum/construct-3/general-discussion-7/lottie-bodymovin-experiment-153841

    I also use my ElementQuad plugin to integrate the new canvas into C3 render (you can add effects to it, put it on different C3 layers, sort in Z order, etc.)

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

    Also see this plugin for HTML element implementation:

    construct.net/en/make-games/addons/190/html-element

  • Updated the plugin to include two new features:

    1.7.0: Add event trigger ACE (trigger when animation event occurs.)

    1.6.0: Add Set region action (change region(texture) of an attachment in a slot on the current skin. Useful for character customization. (This can be used to customize the current skin of a skeleton by changing only the texture / animations attached to a slot. Example in previous post.)

  • I am working on adding an action for changing attachments / images within a collection of skins, once it's solid enough, I'll post an update. Example below:

  • Animate - thanks for letting me know, fixed the links.

  • arcadesindo this plugin is not for C2.

    There is already a C2 Spine plugin you can look at here: github.com/flyover/spine-c2-plugin, if you have questions, you could post in that repo's 'issue' section.

  • Some more construct inspiration, this looks like a real cool entry into the genre:

    construct.net/en/forum/construct-3/your-construct-creations-9/new-first-person-rpg-150390

    This might be related to the one dop2000 was thinking of.

  • Great work, very nice 3D feeling and cool physics, going to check out the patreon for the post mortem.

  • The C3 Spine plugin we (Igor and Mikal) developed has been updated with some new features (default animation mix and animation speed). For simple animation playback, pause, switch, it works and looks pretty good with a default mix. Performance is reasonable on the desktop systems I have tested on and recent iPhones (200+ Spine characters with 60fps). Android performance for modern Android phones is lower, but similar, it varies widely based on older phone models. Some examples are below. It includes skin changing and mesh deforms. For more details see the plugin webpage:

    gritsenko.github.io/c3_spine_plugin

    If you use it, please let us know and show an example of your game!

    Releases:

    2.5.0 Add zElevation standard property and ACEs

    2.4.0 4.1.19 spine-ts runtime, compatible with Spine 4.1.x export files (sequence animations), Load Files ACE

    2.2.0 Add color property and ACEs, webgl / C3 special case render bug fix

    2.1.0 Add GetEventData expression, On any animation event condition

    2.0.1 Fix SpineBBoxCenterX to accept slot and name (previously was ignoring slot)

    2.0.0 4.0 spine-ts runtime, compatible with Spine 4.0.x export files

    1.55.1 Fix addCustomSkinOutfit update slot colors for dependent colors

    1.55.0 Add addCustomSkinOutfit skin tone

    1.54.0 Add addCustomSkinOutfit skin, color

    1.53.0 Add expressions for bbox and scale properties

    1.52.0 Add customSkinOutfit script interface

    1.51.1 Add icon, error handling for addCustomSkinOutfit

    1.50.2 Fix worker mode support for C3

    1.50.1 Fix slot color related to script add customskinoutfit

    1.50.0 Add hex color support for set slot color and set slot dark color ACEs

    1.49.0 Add scripting interface for animations.

    • 1.48.0 Scripting interface for Apply slot colors, scripting interface for addCustomSkinOutfit (quickly update custom skin from object)
    • 1.47.5 Make compatible with ProUI plugin for scroll lists
    • 1.47.3 Add bounding box override checkbox (can set bounding box in property, no need for transparent bounding box)
    • 1.46.0 More animation scripting interfaces
    • 1.45.0 Animation scripting interfaces
    • 1.44.0 Palette loading optimization (if only a few palette entries need an update, just update those areas of the palette texture, otherwise update the entire palette texture.)
    • 1.36.1 setTracksListner guard clause (do not crash if skeleton is not initialized or removed.)
    • 1.36.0 Init refactor (internal clean up)
    • 1.35.0 Fix current time event regression, no apply() in setAnimation (save some CPU)
    • 1.34.2 Fix bbox ACEs w/ flipped animation
    • 1.34.1 bone control optimization, repeated init bug fix.
    • 1.34.0 Add ACE for render quality control
    • 1.33.1 Add render once for Bone control actions
    • 1.33.0 Bone control Conditions and Expressions
    • 1.32.0 Bone control Actions
    • 1.31.0 Add gl parameter cache for future optimization to not get gl state parameters every tick.
    • 1.30.1 Disable idle animation updates (via debug variable control, set 'reduceAnimation' to 'enable'.
    • 1.27.3 Correct idle and offscreen detection
    • 1.27.2 Advance animation/slot render while off screen.
    • 1.27.1 Add updateCurrentAnimation check if animatioName exists and warn if not.
    • 1.27.0 Add parameters and UID to Action console warnings for debug.
    • 1.26.1 Return w/o JS error from Expression/Conditions if skeleton not loaded.
    • 1.26.0 Add per instance debug enable ACE, return w/o JS error from Actions if skeleton not loaded.
    • 1.25.3 Bug fix: animation complete hang, export module fix
    • 1.25.1 Advance animation 1s after applying set animation, apply color, set skin, so they will take effect when an animation mix value is present.
    • 1.25.0 Advance animation one tick after applying set animation, apply color, set skin, so they will take effect, fix Set and Apply color C3 module mode bugs.
    • 1.24.0 Disable render when animation is complete (end of animation) or animation is stopped (perf optimization).
    • 1.23.0 Disable render to texture when offscreen (saves perf), animation continues for events, etc.
    • 1.22.2 Add animation track support. Default to track 0 for set, play, stop animation for backward compatability, add isSekeltonLoaded ACE. Add track alpha control to blend animation between tracks. (Feature commisioned by Adrian - thank you!)
    • 1.20.0 Add support for R266 module mode, add Set Object Render Rate ACE.
    • 1.19.0 Add Set animation mix {fromName} to {toName} with duration {seconds}.
    • 10/14/2020 1.18.0 Add SpineBBoxGetPoly expression.
    • 10/12/2020 1.17.0 Add debug property, SpineBBoxCenterX,Y expressions. UpdateBBoxes action.
    • 10/01/2020 1.16.2 Set Slot Color, Apply Slot Color, Reset Slot Color. Set animation start (beginning, current time, current ratio). Set animation time/current ratio. Deprecate Set custom color attachment.
    • 09/18/2020 1.15.0 Set Slot Color (temporary until new skin set), Set Custom Color Attachment (set color of attachment of a custom skin and set to the custom skin.) Fix one frame animation bug.
    • 09/15/2020 1.14.1 Fix PMA bug regression (introduced in 1.11.0)
    • 09/14/2020 1.14.0 Added C3 web worker support.
    • 09/13/2020 1.13.0 Add custom runtime skins per instance, with example project.
    • 09/11/2020 1.12.1 Change to comma separated instead of space separated for png paths.
    • 09/10/2020 1.12.0 Add support for Atlas pages (multiple png, comma separated), finish implementation of Set Attachment action, fix webgl1 support (revealed on iOS w/o weblg2 enabled.)
    • 09/05/2020 1.11.2 Move spineBatcher.init() to prevent race condition (seen on iOS)
    • 09/05/2020 1.11.1 Remove spine instance from batcher when C3 Spine instance calls Release() (e.g. C3 object destroyed.)
    • 09/05/2020 1.11.0 Implement batch render for improved performance with multiple Spine objects and instances.
    • 08/16/2020 1.10.0: Add Keep Aspect Ratio checkbox
    • 08/14/2020 1.9.0: Fix export issues (change spine-webgl.js to an external runtime script)
    • 08/07/2020 1.8.0: Add faster, more efficient instances. Add RenderQuality settings.
    • 07/24/2020 1.7.0: Add event trigger ACE (trigger when animation event occurs.)
    • 07/23/2020 1.6.0: Add Set region action (change region(texture) of an attachment in a slot on the current skin. Useful for character customization.

    If you run into bugs, please leave issues on the github site here:

    github.com/gritsenko/c3_spine_plugin/issues

    Spine itself is available here:

    en.esotericsoftware.com

    Tagged:

  • There are javascript functions in the c3runtime to translate a color value to an R, G, B value.

    Ashley - is there a reason you would not want to share the code of the functions (so others could put the function code itself embedded as a new function in C3 events), I've tested using the function code myself locally using C3 event scripts and they seem to work well.

    Reminder:

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • Animate Thanks for the kind comments.

  • rodrigololi

    This uses the my ElementQuad plugin (see C3 addons) to integrate the Lottie/Bodymovin canvas render into C3. If you need to have multiple Lottie animations, you would need to create separate canvas for each one w/ a different id and use different ElementQuad objects to access it.

    This experiment uses the lottie canvas render rather than the svg render, because the svg render is difficult to use as a texture for C3. The Lottie canvas render does not have all the features of the svg render (e.g. masks), so the render for some lottie files will not be done correctly.

    Something for Lottie fans to experiment with and explore.

    More lottie files to play with here:

    lottiefiles.com

    Project file:

    sendgb.com/GtVEpSYgmnR

    Example (screencap)

  • Grimmy, perhaps ask marcelogouveia they are developing a mobile game. I generally have found iPhone perf to be reasonable (60fps) for single digit number of characters, but my older android phones definitely struggle.

  • Some of my assumptions about the use of scene graphs - if you perform actions on a parent node, the children should be effected relative to the scene graph tree. For example rotation, offset, scaling, z-order, etc. should be well behaved to keep the scene graph consistent.

    In Rory's example, during runtime, I would expect to be able to rotate the elf by rotating the parent (torso) and the components (leg, arms, head) would rotate with respect to the parent so the 'elf' would stay connected (e.g. the children would not just rotate in place.) I think this may be 'obvious', but good to state. Similar for scaling the parent.

    Right now it seems like the relationship between child and parent will be mostly x,y offset, is that correct? Are there other relationships possible (without going too crazy and trying to recreate Spriter / Spine style animation.)

    This post is interesting to check out, a relationship they explore is rotation around a parent.

    archive.gamedev.net/archive/reference/programming/features/scenegraph/index.html

  • Nice work, such a fun example, thanks for the info on how it works.

  • Fib Great info, perhaps also post it as a Construct tutorial (even just as is would be great, but with a few pictures, would be really nice.)