triptych

Building fun experiences for the web

When I began my journey to publish my novels I was at a loss to know how I would go about it. I had the artwork, but I didn't really have a good tool for adding formatted text and getting it all put together well. For the first few books I found a site called Canva that worked out really well for me at the time. After posting about my experience with Canva, I was messaged by another site called Visme. They were curious about my experiences and wondered if I'd like to try out their site as well.

I did some research of my own, and I read a lot of good things about Visme, so I decided to give it a try. I had another book I was working on called Sarah7. The Visme folks gave me a free trial subscription so I could kick the tires without the usual limitations. I am very pleased with the results.

As a complete newbie I clicked around and tried things out, then I watched a few of the great videos Visme has that teach you how to use their site. After a short amount of time I was able to create a simple book cover like this :

Here's what things looked like in the Visme interface :

You basically pick what kind of media you want to create and Visme tries to set things up for you quickly. I found the site to be very snappy, with no lag or odd download issues. I felt like I was always in control of what I was working on without a ton of features that I didn't really need. I'm no great designer yet, but I was able to put something together that wasn't terrible.

They have a lot of interesting integrations, and one of the things that really has drawn me to Visme vs other sites like this is that they allow for interactive content. Here's one of the sidebars with options to include Youtube videos.

As someone who wants to create content for booklets and cool tutorials in the future, I feel like I could build them here pretty easily and then potentially share / sell them on Gumroad

Last night while I was thinking about writing this post, I realized there were a lot of things I could use this site for, beyond just book covers and interactive slide decks. I realized I needed to update my Twitter profile pic. I was happy to poke around with their stock images and came up with something I liked in like 10 minutes. Here's my example:

I also liked that I could just jump back in to that file later and add things without having to dig around on my computer for the image.

I've only really scratched the surface of what I could do on Visme. The whole workflow around interactive content seems really fun and easy to do. I'm going to try out some graphics myself and play with things. Visme seems to encourage this playfulness in it's interface :

There are a lot of example templates to check out and get ideas from or just spin off and use for yourself.

Overall, I have had a really good time with Visme and I encourage you if you are a creative wanting to make like PDF content for selling like graphic novels, slide shows, or even just graphics for your own website, I would encourage you to check them out.

Here's some other types of content you can make with Visme:

Visme is used to make

Having used both Canva and Visme, I think Visme edges out just because of all the interactive content options you have. I really wish, however that sites like Visme would allow for publishing directly to Gumroad and related sites. It would be so great if I could create some content on Visme and be able to wrap that in a Gumroad or Stripe store and be able to come back later and update things without having to go through all the download / upload process.

Feature requests aside, if you are doing any kind of creation for the web or social media, there's a lot of cool stuff to try out here on Visme.

Oh and one last thing – the Share options are amazing — instead of just downloading some image or creative work, you can host it on Visme and do things like get “leads” from content ( names, emails etc. ) or invite comments and feedback. For instance, here's a link to my Twitter Header that asks for a bit of information before you can view it — perfect for if you are sharing some free information and want to get information about the folks interested in your content: Twitter Header Link

They even have an affiliate program which I've only signed up for today but maybe I'll write more about Visme and share it here. It seems like a great place to start creating shareable digital stuff – so you'll probably hear me talking more about it in the future!


Oh and one more thing! ( I just discovered this and it's so cool and has so much potential! ) you can embed any of your Visme stuff on your own website. I created a test page here on my Neocities site with animations and other fun things. It's giving me lots of great ideas!

Written with StackEdit.

I've decided to stick with Write.as as my home for blogging. I have my own site Andreww.xyz which I will sometimes import special blogs from here. But for now – let's make this an awesome place to be and post things about my writing, my games, and my apps. Let's go!

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!

Enter your email to subscribe to updates.