triptych

Building fun experiences for the web

A new chapter is out! Check it out below:

I see I can embed a Koji App in an iframe, will it show up in my blog post?

Let's see!

You can get one here https://gifypet.neocities.org/

Project Saga: Writing a Web Game Storytelling Tool

Image by <a href="https://pixabay.com/users/geralt-9301/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=1668916">Gerd Altmann</a> from <a href="https://pixabay.com/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=1668916">Pixabay</a>

It's January 2020. Time to make something new, build on the past, and learn new things. I've been dancing around creating a web based tool for “interactive fiction” which is where I built a prototype called Stim that lets you make simple web based stories with super basic linking. As I worked on this tool, I used code from previous projects like ittybittyrpg . I've realized that instead of these previous attempts to build a simple game making tool for the web being “failures” they were instead more like test runs or prototypes to try out ideas. Even my latest experiment Tiny Adventure can be seen as an expression of this exploration of the idea.

I've been reading about lots of tools and ideas around building simple stories and games. I've read about Storylets , Entity-Component Systems and other attempts to make simple game making tools like Microsoft's MakeCode , Twine , Bitsy , as well as fantasy consoles like Pico-8.

Also, I've been reading about new sites like Koji which seek to empower a new generation of game developers via easy to use, forkable games with minimal coding. New tools such as Fungus (1) for Unity , Godot Engine for apps, and GDevelop which seek to make building games easier for non-coders (or “some” coders in the case of Godot) . You also have complete 3d game making tools with minimal coding such as Smile Game Builder and RPG in a Box.

All of this information and insight is leading me to believe that there's room for tools that make creating games and stories accessible to anyone, and that this is something that is becoming a sort of cultural trend.

I encourage you to read as well the articles from Matthew Ball on 7 Reasons Why Video Gaming Will Take Over , and Li Jin's The Passion Economy and the Future of Work where we learn that gaming is taking the place of television as a cultural watershed, and that creating things you are passionate about that are unique to your own expression is the future of “work”.

So, whew! Are you still with me?

Mix this all in a blender and you get the idea of making simple tools that allow anyone to express themselves through games and share those with others and you get what I want to tap into with Project Saga.

I want to write about this journey here. Document what I make, what I learn, mistakes I make, and perhaps give you something super cool to use yourself!

I will be putting code here and live updating code via CodeSandbox.

The ultimate goal is to come up with something you can use on the web – either your phone or your desktop – to be creative in a new – gaming – way. I will build bridges to other tools like GDevelop, GodotEngine and more. But today – it's just the first step.

Keep making new things, build on the past, and share what you learn! Stay tuned!

Written with StackEdit.

Devlog Dec 21 2019 – A Tiny Adventure

I'm working on a simple game that is teaching me how to use Svelte. It's called A Tiny Adventure and is a spiritual successor to a game I created long ago called Foobar The BazBarian. Whereas here I'm figuring out how to create it with Svelte components, and learning how Svelte handles events.

Basically Svelte allows you to pass events up from child to parent. And pass data back down via “props”. I'm learning how to use this to pass the direction data from my control component to my display component. Right now all this does is let the display component render the direction. But this is a minor milestone for me because now I can separate out the components and create a simple store where I can place descriptions, items, and monsters. If you want to play around with this, you can visit the code here:

Edit quirky-firefly-sfov2

Next up is to get the display component to react to this value change and do something interesting.

Written with StackEdit.

Svelte and CodeSandbox

Lately I have been learning more about Svelte by using CodeSandbox. I use a wide range of web tools like Repl.it (which is super cool too!) but CodeSandbox has Svelte support right out of the “box” and it lets me push to Netlify as well as create Github repos right away.

I'm testing out whether it's easy or not to share things I create on CodeSandbox via these posts.

Right now I'm working on a simple game tool that lets you create a fun little adventure game. You can see it here:

Or you can click this link below to play with the code.

Edit quirky-firefly-sfov2

Hopefully this will work out, and I can share more fun coding stuff here!

Written with StackEdit.

The Writing Phoenix

(https://commons.wikimedia.org/wiki/File:Fenix_highresulution.svg)

I've often kickstarted my writing and creative endeavors, with this odd idea that I'll somehow fall into a writing pattern and suddenly life will make sense. Instead I seem to constantly be remaking myself creatively, and rediscovering old things I've learned while adding new things all the time.

I've always started out with the best of intentions and seemingly run out of juice after a few posts. I used to think this was basically some sort of failure on my part – that I was not dedicated enough, or that I let other things distract me.

Instead I've learned that creativity comes in seasons, and that instead of trying to force things, you should allow for periods of resting, re-evaluating, and growing.

So, what does this all mean?

It means I'm starting again. Writing as I work a new interactive fiction engine I'm calling SAGA. Writing on my outstanding fantasy novels. Writing for creating fun things in HTML, CSS, and JS ( and now WebAssembly!)

One thing that is different this time around is I've discovered a great Markdown writing tool called StackEdit (see link below) which let's me create articles and preview them ( Why you not do this Write.as? )

Whether it's for games, web, or fiction, I will try to be more consistent this time around, especially as I learn new strategies to stay motivated.


I'm also learning to take time to rest, and time to recharge. I'm currently playing one of the most enjoyable games I've ever played:

Dragon Quest XI : Echoes of an Elusive Age. I've never had so much fun playing a game before – it just hits all the right notes as an RPG with amazing visuals and compelling storyline.

So, let's see if I can get things done more often this time around.

And I want to shout out to StackEdit – which is just a joy to use.

Written with StackEdit.

Before you start

Yes! You can have a Svelte based app up and running in as fast as 90 seconds! Before we start the timer, let's get a few things set up (in case you don't already have them ready to go). * Get a Github account * Get a Netlify account * Install Visual Studio Code * Install Node.js on your system

Decide on a name

What will you call your project? This will determine how you fill in the next few steps.

Let's go!

1) Launch Visual Studio and create a directory with the name you chose. I picked StrawberryIcecream.

2) Open a terminal window.

3) Type the following in the terminal:

npx degit sveltejs/template StrawberryIcecream (You could skip the create directory part in step 1, but I do this just to keep everything separate).

4) Try out your app. Type in the following in the terminal:

  cd StrawberryIcecream
  npm install
  npm run dev

You should see something like this in the terminal

And this in the browser

5) Now go to https://github.com/new/ (We are doing this so Netlify will have a place to find your files, and you can update them any time and Netlify will update your app!)

6) Put in your project name.

7) Hit Create repository (Make sure the repo is “public”)

8) Now you need to get your files from your desktop to your repo. You should see something like this:

9) Click uploading an existing file and you'll see something like this.

10) Now go find your StrawberryIcecream folder on your system and drag and drop the files to your repo. Be sure to NOT include the node_modules folder.

11) Hit Commit changes to push them to your new repo. This completes the process and basically “stamps” your files with a time stamp so you can make changes to them later.

We are almost done!

12) Sign in to Netlify.

13) Choose New site from Git

14) Choose Github under Continuous deployment

15) It will ask you to authenticate with Github. You say yes.

16) Now pick a repo. I'm picking my StrawberryIcecream one.

17) Now here's a potentially tricky part. You need to tell Netlify how to build your app, and what directory to deploy from. You will see Basic build settings . * In the build field type npm run build * In the publish directory type /public

18) Hit Deploy site. You should see something like this:

19) After a few seconds you should see something like this:

20) Your site is deployed! Click the url and you will see your Svelte App! If you want to change the name of the site go to Site settings and hit Change site name I changed mine to https://strawberryicecream.netlify.com/

Now, here's the cool thing. You can make changes to your local files, you can push them up to your github repo (you can even drag and drop them again if you don't want to use GIT commands!) and after you commit the changes, the site will automatically update!

1) Just make a change in Visual Studio ( go to src/main.js):

2) Go to your github repo ( mine is https://github.com/triptych/StrawberryIcecream/tree/master/src )

3) Hit upload files ( assuming you don't want to set up GIT to do it that way)

4) Pick your main.js file you changed. Drag and drop it up to the site and commit the change.

5) Wait about 60 seconds.

6) Your site is updated!!

So, with barely any set up, or special commands, you can get a Svelte site up and running in minutes! I hope you got something out of this article. Please share and stuff!

Well, I'm slowly making progress with #sveltejs . Today I was able to get a simple app up and running on a Netlify instance really really easily.

I just went through this tutorial and uploaded my files easily to this repo. You can see my result at this site.

This gives me great hope about my interactive fiction engine ( right now called STIM ).

Still digging though Svelte tutorials from Udemy, but darn it if it's not a slick framework / compiler.

Today I'm starting my development journey with Svelte. I'm getting my local development environment set up with Visual Studio code, I'm going through my Udemy tutorials, and I'm going to see if I can get a simple deployment through Netlify. I'm going to go through this Medium article about deployment which I think will complete the picture for me.

I'm kinda jumping the gun here a little. Why am I even doing this? I have been working on an Interactive Fiction tool called STIM as a way to create something using web technologies to make game making tools.

I originally implemented it with a mix of Vanilla JS and a simple framework called Torus which I highly recommend if you are whipping up a quick demo of a web app.

But now that I'm getting more serious about things, I want something more supported in the web dev community, something fast and advanced, and something to help me keep up to speed in the world of webdev.

Svelte caught my eye right away as it sticks to KISS and web standards, as well as taking a novel approach to web development by not downloading a huge runtime to the browser, but instead you “compile” your app locally ( or remotely with Sapper ) and it builds a small, fast, server rendered when needed app.

It takes the best from React, Vue, and it's own ideas and makes developing components fun again.

I'm only just starting to learn about its features, which is why I'm blogging about it here!

If you want to see a quick demo of what Svelte can do, check out this demo from the Svelte REPL.

Enter your email to subscribe to updates.