Dears, is there a way to make spin wheel like this one by hype
1 Like
thank you so much
Dear aficionados and js-savvy connoisseurs of browser-based games
I'm now facing the same challenge as @haythamfarid
Looks like I've spotted the basic building blocks for a similar Wheel game:
Any tips @jonathan or guidelines (maybe they already exist on this forum and I have overlooked them?¿) on how to incorporate those js snippets into Tumult Hype?
Another derivate source here:
They are definitely working building blocks of the Spinning Wheel of Names -game but for a visual designer they make not much sense without a step-by-step guide on installation procedure to make them work inside Tumult Hype.
Is there a standardized procedure for installing similar third-party building blocks of js-based games a visual designer with an entry-level knowledge of JS can follow? Or is it something more complicated and case-sensitive with a need of hype API etc. advanced js-coding knowledge and varies from case to case so not as straightforward as I imagine it to be ?
copy and paste the html of the fiddle into a hype-rectangle (edit innerHTML) and copy paste the js to a hypefunction, run it on sceneload ... you should be mostly done ... i'd guess ... ah and include jquery-library, which is used ...
1 Like
The basic flow @h_classen responded with is usually the best starting point, but the unfortunate reality is a lot depends on the code used itself on where to place it. So there's no sure-fire method. Secondarily, placing javascript in the "On Scene Load" handler is the easiest route, but if you wind up with multiple scenes you often need to take special care to make sure it isn't run twice or loaded/unloaded appropriately.
If you don't need any real interaction between it and the Hype document, often the easiest route can be making a basic .html webpage and then using an HTML Widget (iframe) that simply references it.
1 Like
Thank you @jonathan for your reply. I was hoping that your easy-to-follow step-by-step guide would work for most other cases, and also for this Spinning wheel of names -game:
in addition to your general guidelines for using javascript:
Hi @h_classen
Thank you for pointing out the direction of installation of those game building blocks from jsfiddle.net/bramp/94jP6 So far so good, but Hype doesn't render the wheel (div id) though.
The wheel object is a canvas element '<canvas id="canvas" width="1000" height="600"></canvas> which Hype doesn't seem to support. Is there a way to convert canvas element into a format that Hype would render @jonathan natively, would it? I hope that iframe
is not the only viable option in this case?
My test: wheelofnames.hype.zip (17.5 KB)
wheelofnames.hype.zip (17,9 KB)
the script used a jquery-plugin-code (tsort) ... i disabled it ...
///////
there's no canvas to html-element convert ... only to DataUrl, image ...
3 Likes
@MaxZieb's circular slideGesture.continueAfterDrag would work well for the wheel I think. Especially if you want to spin it by clicking and dragging. Hype Action Events - #19 by MaxZieb
2 Likes
Dear
could i replace an image as a spin wheel not just colors