Forums » Advanced Editor Forum » Read Thread

Hey everyone! I figured out how to make image-based point-and-click games in the CYS editor. I made a short demo game as proof of concept, and to give the scripts & code to anyone who's interested in doing things like this.

Let me know if you have any questions or suggestions!

Click here for 1-minute demo game

The 'game' itself has low image quality & no plot, it's just a demonstration of what kind of mechanisms this system can support. If you click on the treasure pile at the end of the game, it will take you to all the code & scripts that were used to make it.

     That's super cool, I pressed on the green dot but didn't find anything clicky on the next page. I should really switch back to HTML, I'm just not sure that if I do if all the things I have will go to normal and I'll have to redo all of it.

Hm, that's odd. Did you try picking up the ladder, selecting it, and clicking on the hole in the tree? It's possible I was too vague about how to use items--I added an explanation to the description of the game.

      I'm on the device that has nothing blocked, and I see a tree but it doesn't have a hole and I see no ladder. Sorry. >< 

Ack, that's my fault. I just tried testing it in a different browser, and looks like there's some compatability issues. Well, it works in firefox, but if you're using anything else there's problems. I don't have time now, but I'll look into it later and see if I can find out what the problem is. Thanks for bringing this to my attention

This is really cool, impressive work Gryphon. Great job!

Pretty cool. Everything seemed to work on my old laptop top which is using a completely out of date Firefox browser. It didn't however work on my phone which is presumably using something a little more updated. (Safari since it's an Iphone)

I can't wait to test this on PC. It isn't responsive on mobile which I assume means you don't have mobile controls coded in. But we tend not to appeal to icky mobile users here anyway.

This is exactly the type of thing I've always wanted to do in the CYS editor and I'd love to peek at the code.

Edit: the issues are browser based. Maybe making the entire element forced to sit in the center of the page at a certain size %?

You could also use bitmaps and place the links with imagemap tags.

Update: I've tracked the browser compatibility issue down to a bug specific to the SVG image format my drawing software used when exporting the file. The good news is that the code should all work with other image formats, like simpler HTML, the bitmap Fabrikant suggested (which I will probably look into), or any SVG code that doesn't use <g> wrappers.

The bad news is it would take me a loooong time to fix the demo, so I'm not going to do that right now. Instead I've added a link at the bottom of the first page that takes you right to the explanation section, for those of you who want to see the code but don't have access to firefox.

That said, I'm glad those of you able to see the firefox version are liking what you see!

Thanks! :D

This is really cool. I still need to learn a lot more about coding and javascript to understand what's happening here, but I imagine a story like Ruins of Anzar in this format would be amazing. 

Update: The demo now works in safari & chrome! (For those curious it was 2 details: whitespace in the SVG code was a problem in safari, and I had to add a bit of indirection to the item stocking function to make items selectable.)

I was able to successfully play on my phone's safari app, so it works for mobile now too.

Yay! It works for me! :D

 That was awsome. I would love trying to use that to make a cool story but at the moment I've only started learning CYS scripting.

Thank you for showing us how to do this Gryphon! I feel like this would be really useful!

It would be more of a story than a game, unless you find a way to well mix in words with this.