#vuejs

Narrat Engine demo

Narrat 🐀 is a game engine I created to easily make interactive fiction games (narrative RPGs, visual novels etc) for desktop or browser. I’ve worked on this game engine for some time, mostly to help friends make their games. It’s been used on a few small games, and some bigger ones in progress.

🚀 If you want to try it, get on the website it’s very quick

The demo is a bit boring with placeholder art and content just to show features, and is pretty outdated, but I never posted it here so I figured I should

I really want to make a proper demo one day that would be a small game that actually makes sense and maybe has actual art... but not sure what it would be yet

Games made with Narrat

Here are some screenshots of games made with Narrat. They’re also listed on the website if you want to play them or find the creators:

🎮 Games from the Narrat Game Jam (they’re playable in your browser and free):

Two women in trouble by Mia (also free!)

Lovely Lady RPG by Poppy (in progress):

Features

Here’s a not really exhaustive list of fun features at the top of my head:

🚀 Super easy to get started with a tool that will setup your project either empty or with a template in a minute

✍️ Customisable characters, branching dialog and conditions

👩‍💻 Super easy scripting with a custom made language that focuses on letting you write dialog, but can be used for more advanced logic if you need it

🎧Audio support for music loops and sound effects

📘RPG features like skills with skill checks, inventory, quests

🎨 Accessible UI customisation with CSS allowing for a wide variety of designs

⚙️ Extremely configurable with a layout that can be adapted to different games

💡Plugin system (in TypeScript or JavaScript) to add functionality to the engine, new bits of UI or even extend the scripting language with your own commands!

🖥️ Steam export setup by default (the Steam overlay will work out of the box if you enable it)

🎬 Support for GIFs or webp in images for easy animation (thanks to the browser doing it for us)

🖼️ Dynamic sprites and text to programmatically display custom elements on screen (has been used to make a card game by someone)

🌍 Completely free and open source, and with a helpful Discord community to help with problems

Here’s what the scripting looks like (from the demo game):

I want more people to try this engine so please try it or help people know it exists ❤️

You can also signal boost it on the Twitter thread

Pueden ver la demo y el código del multiverso acá

Desafortunadamente mi pitch para el proyecto final no tuvo acogida pero me encanto hacer este video. Claramente inspirado en el brainrot.

Termine vinculándome al proyecto que llamamos prUN que también estaba muy interesante, quizá algún dia llegue a puerto.

What is API?

API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. It is a way for computers to share data or functionality, but computers need some kind of interface to talk to each other.

When you use an application on your mobile phone, the application connects to the Internet and sends data to a server. The server then retrieves that data, interprets it, performs the necessary actions and sends it back to your phone. The application then interprets that data and presents you with the information you wanted in a readable way. This is what an API is - all of this happens via API.

Building Blocks of API

There are three building blocks of an API. These are:

dataset

requests

response

Let’s elaborate these blocks a bit.

An API needs a data source. In most cases, this will be a database like MySQL, MongoDB, or Redis, but it could also be something simpler like a text file or spreadsheet. The API’s data source can usually be updated through the API itself, but it might be updated independently if you want your API to be “read-only”.

An API needs a format for making requests. When a user wants to use an API, they make a “request”. This request usually includes a verb (eg: “GET”, “POST”, “PUT”, or “DELETE”), a path (this looks like a URL), and a payload (eg: form or JSON data). Good APIs offer rules for making these requests in their documentation.

An API needs to return a response. Once the API processes the request and gets or saves data to the data source, it should return a “response”. This response usually includes a status code (eg: “404 - Not Found”, “200 - Okay”, or “500 - Server Error”) and a payload (usually text or JSON data). This response format should also be specified in the documentation of the API so that developers know what to expect when they make a successful request.

Types of API

Open APIs - Also known as Public APIs. These APIs are publicly available and there are no restrictions to access them.

Partner APIs - These APIs are not publicly available, so you need specific rights or licenses to access them.

Internal APIs - Internal or private. These APIs are developed by companies to use in their internal systems. It helps you to enhance the productivity of your teams.

Composite APIs - This type of API combines different data and service APIs.

SOAP - It defines messages in XML format used by web aplications to comunicate with each other.

REST - It makes use of HTTP to GET, POST, PUT or DELETE data. It is basically used to take advantage of the existing data.

JSON-RPC - It uses JSON for data transfer and is a light-weight remote procedural call defining few data structure types.

XML-RPC - It is based on XML and uses HTTP for data transfer. This API is widely used to exchange information between two or more networks.

Features of API

It offers a valuable service (data, function, audience).

It helps you to planabusiness model.

Simple, flexible, quickly adopted.

Managed and measured.

Offers great developer support.

Examples of API

Razorpay API

Google Maps API

Spotify API

Twitter API

Weather API

PayPal API

PayTm API

HubSpot API

Youtube API

Amazon's API

Travel Booking API

Stock Chart API

API Testing Tools

Postman - Postman is a plugin in Google Chrome, and it can be used for testing API services. It is a powerful HTTP client to check web services. For manual or exploratory testing, Postman is a good choice for testing API.

Ping API - Ping API is API testing tool which allows us to write test script in JavaScript and CoffeeScript to test your APIs. It will enable inspecting the HTTP API call with a complete request and response data.

VREST - VREST API tool provides an online solution for automated testing, mocking, automatic recording and specification of REST/HTTP APIS/RESTful APIs.

When to create an API and when not to

Its very important to remember when to create and when not to create an API. Let’s start with when to create an API…

You want to build a mobile app or desktop app someday

You want to use modern front-end frameworks like React or Angular

You have a data-heavy website that you need to run quickly and load data without a complete refresh

You want to access the same data in many different places or ways (eg: an internal dashboard and a customer-facing web app)

You want to allow customers or partners limited or complete access to your data

You want to upsell your customers on direct API access

Now, when not to create an API…

You just need a landing page or blog as a website

Your application is temporary and not intended to grow or change much

You never intend on expanding to other platforms (eg: mobile, desktop)

You don’t understand the technical implications of building one.

A short 30 second clip to understand it

Word of advice for newbies

Please don’t wait for people to spoon-feed you with every single resource and teachings because you’re on your own in your learning path. So be wise and learn yourself.

Check out my book

I have curated a step by step guideline not just for beginners but also for someone who wants to come back and rebrush the skills. You will get to know from installing necessary tools, writing your first line of code, building your first website, deploy it online and more advanced concepts. Not only that, I also provided many online resources which are seriously spot on to master your way through. Grab your copy now from here. Or you can get it from this link below.

About Me

I am Ishraq Haider Chowdhury from Bangladesh, currently living in Bamberg, Germany. I am a fullstack developer mainly focusing on MERN Stack applications with JavaScript and TypeScript. I have been in this industry for about 11 years and still counting. If you want to find me, here are some of my social links....

Instagram

TikTok

YouTube

Facebook

I was busy for a while and couldn't post.

I almost fell ill from working long hours, but I'm managing to make ends meet.

I'll be busy again, so I won't have time to post, but I'll make time to post.

I've been studying Vue lately.

Do you want a vue ui mixed with Babylon.js, Three.js, PIXI.js, canvas, Webgl, etc? Or maybe just to store some variables... or make reactive changes? Here's how it works in a few of my games... There are 3 main points of integration. These are mutating state in the store (writing to a variable in the store), reading state from the store (accessing the store variables from other places), and reacting to changes in state (triggering a function when a value in the store changes).

First, how do you expose the store? Well you can literally just export it and then import it. Or be lazy and stick it on window.store. You'll want to have a sensible order of initialization when your game starts up so that you don't try to access the store before it exists. But games already use loaders etc to load up their images and sounds, so there's a place for that. Load up the store first, probably.

For reading state from the store you can use a syntax like store.getters['setttings/graphicsMode']. It can be a little simpler than that, but this shows the synatx for a store nested within a store. In my game for example, I have a gameStore and a settingsStore just because I didn't feel like putting *all* of the properties into one giant vuex config. One can also access the state via store.state.settingsStore.someProperty but this is reading it directly instead of uses the getter. You probably want to use the getter, because then you can have a computed property, but either will work. For writing state to the store, the key is store.dispatch. Syntax is like store.dispatch('devStore/toggleDeveloperMenu', optionalPayload). This is invoking the *action* which means you need to create actions instead of just using a setter with this particular syntax.

So that's reading and writing! But what about reactivity? Well lets say your game logic dispatches some state which enters the store, you'll find that if that state is displayed in your vue ui it is already reactive and working. For example if you store.dispatch('game/updateHitpoints', { hp: 50 }) and there's already ui to draw the hitpoint bar on the hud that is going to change automagically. But what if you're pressing buttons in your vue-based settings menu or game ui? How does one get the game itself to react to that? Well there are two some what easy ways (among a million homegrown options). The first is to use the window to dispatch an event from the same action that you use to update the state, and be sure that you always use the action instead of directly accessing the setter. This will work fine, and I did it at first, but there is a more elegant and integrated way. That is to use store.watch.