DEV Community: Abhishek

If you could use notion to build an app/startup , what would you make?

Abhishek — Sun, 09 Jun 2024 11:04:47 +0000

I've been working hard on a framework that converts notion pages to usable apps. I wanted to know what use cases would be most popular.

This would be a purely no code solution (maximum code would be a simple DSL) and the focus is on actually getting an app out there that you've just built in notion.

If anyone is interested in trying out the framework please let me know!! Thank youu

Assume the following integrations are available

Sign in with Google, phone number etc
Payments from your end users and subscriptions
Normal notion pages or content can be used as UI
Notion databases are used to model any data with forms and views etc etc
Chat between any user in your app

or anything else you want.. just tell me any app idea you have. The technical side would be sorted.

I made a simple Room-based Low Code Multiplayer Framework for Gamemaker🚀

Abhishek — Sat, 11 Nov 2023 11:46:31 +0000

Hello, fellow game developers! 🎮

I'm thrilled to introduce you to Rocket Networking, a powerful networking engine designed specifically for GameMaker.

Rocket Networking

If you've ever gone into multiplayer game development, you know the challenges of implementing even a networking system. For beginners or game developers who are more on the artistic side, this can get very difficult and time consuming.

That's where Rocket Networking comes in, simplifying your journey and accelerating your project's success.

Why Rocket Networking? And why particularly Gamemaker?

When I started this game development journey, all I knew was that I wanted to create my own .io game. (I finally did btw, check out my last post ;)

Gamemaker is the best starting point if you want to get into game development. Many would argue it is Unity, but the difference in learning curves is HUGE. And it really doesn't make sense to use Unity for 2D games, it's overcomplicating things a lot. Gamemaker has an easy to use IDE, easy to learn Script and is just overall more welcoming.

Need for a dedicated server

Unity does have a popular framework for making multiplayer games, Photon Unity Networking (PUN) and it's very famous. In gamemaker you had to start from the vanilla functionality provided and that isn't bad but it is very time consuming. The problem is you can't really build a scalable multiplayer game that anyone can play anytime around the world. For that, you need some kind of a dedicated server that is always on. Otherwise you're stuck with local multiplayer. You can see this starts to get messy.

I have to go to a cloud provider? Rent a VM? Write a script in some backend framework like Node.js? And then make it communicate with gamemaker?...

Even after that you have to learn how to use Buffers (which are infamously hard) to communicate, which is definitely not for the beginner.
However this isn't that bad because it's only a one time thing. Once you learn how to use buffers, you just have to repeat that code.

How Rocket Networking Solves this Problem

Rocket Networking will host and manage the backend server for you. So you don't have to touch any backend code or go to another cloud provider. All you have to do is make an account with us, and there you go.
Our Client side Gamemaker extension is designed so that communication is dumbed down to just 1 line of code to share data with the server.

Room Based Multiplayer

Rooms (Auto State Sharing)

Making multiplayer games is broken down in RNet to rooms. A client can choose their room like "public" or "lobby" and they automatically share data with other clients in that room.

So if you are in the "lobby" and you are sharing your "name", then other clients are automatically created for you and you can see all their names.

Dynamic Player Creation and Destruction

You don't have to worry about creating a new player everytime someone joins the room or destroying that player everytime they leave. All that is auto managed. You just have to outline the general stuff. Like print the "name" on top of the player.

Entity System

Some elements in multiplayer game development are not just limited to a client. This can be NPCs, bullets etc.. For those things, we have an entity system. So if you create an entity, it is created for everyone else until you destroy it. You can see this perfectly fits the application of a bullet that you shoot.

Private Messaging System

This is independent of the pre existing state sharing system, so you may or may not pair it with that. Sometimes state based sharing of data can be heavy... And in turn based games it's not the optimal solution. What if we could just send an individual packet of data from one client to the other? That is the Private Messaging System, built separately and very easy to use
Example usage. Your bullet hits another player, you have to tell that player to reduce their health by 10.

User Reviews and Games

To be completely honest the customer base is still very small but we've got some wonderful feedback from those who have used it!

I also have some sample projects you can try out...

Open this with your friend or even in 2 tabs or 2 people from anywhere in the world. All this code is available on github so you can get started easily.

On the Website I have all these guides.

Thank you so much for the time to read this post!💝. I appreciate it a lot, and I hope I'll see you soon :)

Made an .io game in 10 days✈️

Abhishek — Tue, 31 Oct 2023 15:05:49 +0000

Hello Everyone!
Let's talk gamedev, better yet fast addictive .io games. And how I made
StellarClash.io✈️ in 10 days.

This is a real .io game!! You can open 2 tabs on your browser and see 2 planes!!

Here is the source GitHub🐈

Basic Structure of an .io Game

Frontend - Gamemaker

You have to choose a frontend which is compatible with the HTML5 Canvas. You can directly use the canvas API if you like vanilla JS code but I used Gamemaker and it's really easy!
Because the frontend stuff is mostly just

Drawing planes and Moving the Camera there
Drawing bullets
Showing what is happening on the server

Backend Nodejs Server

This is where all the game logic actually works.
And there is always websocket communication between client and server.

Players

Every player is treated like a point particle and is spawned at a relatively low density area of the game. All players are saved to a players array

Bullets

Shooting is important and based on your level you shoot a specific number of bullets, bullets of specific damage. And on the client side the damage of the bullet appears as its size, so you have an idea how much you'll be hurt.

Food ie Selenium

Some metal... these are like the slither io orbs. The gamemaker particle effects make it look a lot like that.

Levelling system

The levelling system uses a formula.... This formula will need to be updated as the game gets better but here it is

The Game Loop in Nodejs

Here,

All the players are propelled forward according to their speed and direction

All the bullets are propelled forward according to their speed and direction. If a bullet is hitting another player, the bullet is destroyed and health and kills of victim and killer are updated.

If players are close to the food, it is destroyed and added to their score.
Other behaviors like bots ...

Bot Creation

So bots are created when there are less players and they are made to behave very similar to normal players.

function createBots() {
  //go through the players and count how many are bots
  var botCount = 0;
  realPlayerCount = 0;
  for (var i in players) {
    var player = players[i];
    if (player.bot) {
      botCount++;
    } else {
      if (player.health > 0) {
        realPlayerCount++;
      }
    }
  }

  if (botCount < MAX_BOTS && realPlayerCount < MAX_BOTS) {
    console.log("creating a new bot");
    var spawnPoint = bestSpawnPoint(players, spawnPoints, "public");
    //for the name of the bot, 30% chance use the name from the list, 70% chance use empty string
    var botName = "";
    if (Math.random() < 0.3) {
      botName = botNames[currentBotName++];
      if (currentBotName >= botNames.length) {
        currentBotName = 0;
      }
    }

    var player = {
      clientId: clientId++,
      x: spawnPoint.x,
      y: spawnPoint.y,
      A: 0,
      N: 0,
      speed: 10,
      health: 100,
      maxHealth: 100,
      kills: Math.floor(Math.random() * 4),
      roomId: "public", ///BOTS WILL ONLY EXIST in public room
      username: botName,
      ws: null,
      bot: {
        recoil: 0,
        lifetime: 0,
      },
      skin: Math.floor(Math.random() * 7), //0-6
      lastHitTime: 0,
      recoil: 0,
    };
    player.shootingCharacteristics = getShootingCharacteristics(player.kills);

    player.speed = player.shootingCharacteristics.thrustSpeed;
    player.maxHealth = player.shootingCharacteristics.maxHealth;

    players[player.clientId] = player;

    //tell other players we created this guy
    var sendThis = {
      eventName: "create_player",
      clientId: player.clientId,
      roomId: player.roomId,
      x: player.x,
      y: player.y,
      username: player.username,
      skin: player.skin,
    };

    for (var j in players) {
      var otherPlayer = players[j];

      //check if same room
      if (otherPlayer.roomId != player.roomId) {
        continue;
      }

      if (otherPlayer.clientId != player.clientId) {
        //if ws is not null
        if (otherPlayer.ws) {
          otherPlayer.ws.send(JSON.stringify(sendThis));
        }
      }
    }
  }
}
setInterval(createBots, 1000);

Bot Behavior

Inside the game Loop, bots are made to follow the closest player to them and once they are close enough start shooting. Note that there is some randomness allowed here to make it feel real.

if (player.bot) {
      player.bot.lifetime++;
      //recoil
      if (player.bot.recoil > 0) {
        player.bot.recoil--;
      }
      //bot logic
      //try to chase the player closest to this bot and once you are close enough, shoot

      var closestPlayer = null;
      var closestDistance = Infinity;

      for (var j in players) {
        var otherPlayer = players[j];
        //if roomId is different, skip this player
        if (otherPlayer.roomId != player.roomId) {
          continue;
        }

        //if health is 0, skip this player
        if (otherPlayer.health <= 0) {
          continue;
        }

        if (otherPlayer.clientId != player.clientId) {
          var d = distance(player.x, player.y, otherPlayer.x, otherPlayer.y);
          if (d < closestDistance) {
            closestDistance = d;
            closestPlayer = otherPlayer;
          }
        }
      }

      if (closestPlayer) {
        //chase this player
        var dx = closestPlayer.x - player.x;
        var dy = closestPlayer.y - player.y;

        //if the player is close enough, shoot
        if (closestDistance < 100 + 5 * player.kills) {
          if (player.bot.recoil <= 0) {
            //rotate the bot to face the player
            player.A = Math.atan2(-dy, dx) * (180 / Math.PI);

            ///repeat x times

            for (var k = 0; k < player.shootingCharacteristics.spread; k++) {
              var bullet = {
                x: player.x,
                y: player.y,
                A: player.A + Math.random() * 10 - 5,
                speed: player.shootingCharacteristics.bulletSpeed,
                damage: player.shootingCharacteristics.damage,
                firedBy: player.clientId,
                roomId: player.roomId,
                lifetime: 120,
                username: player.username,
              };
              bullets[bulletId++] = bullet;
            }

            //recoil
            player.bot.recoil = player.shootingCharacteristics.recoilTime;
            player.recoil = player.shootingCharacteristics.recoilTime;
          }
        } else {
          //just make the bot move in the direction of the player 5 pixels
          var fakeN = 0.2 + Math.abs(Math.sin(player.kills)) / 2;
          player.x += (dx / closestDistance) * player.speed * fakeN;
          player.y += (dy / closestDistance) * player.speed * fakeN;

          //rotate the bot to face the player
          var newA =
            Math.atan2(-dy, dx) * (180 / Math.PI) + 5 * Math.random() - 2.5;
          //lerp player.A to newA
          player.A = (player.A + newA) / 2;
        }
        //check if player is out of bounds
        var correctedPosition = outOfBounds(player.x, player.y);
        player.x = correctedPosition.x;
        player.y = correctedPosition.y;
        continue;
      }
    }

Deployment and public facing.

The nodejs websocket server is deployed on heroku for just 7$ a month!!! That is my game server, only 7$🤑🤑🤑💵💵

It is hosted in US so players like me from India can face some lag. But because of extreme lerping, it's smooth lag which kind of does not feel as bad.

The actual game is hosted with Firebase hosting. I bought the domain on Namecheap for like 42$ and then deployed using the firebase CLI.

Future Plans

The next step would be to

Improve the game - Adding more SFX and VFX to make it look better, and improve the levelling up and evolution
Develop a following for constant feedback. iogames.forum is the best place imo and then there are other io game sites.
Iterate 1 and 2 so that players are funnelled to my twitter and iogames.forum where they get updates on the games and can interact with me and that will make the game better
Ads by Google - I was magically approved as a google H5 Games ad associate but I don't have the basic adsense approval on my site yet😶... so I have to figure some stuff out but hopefully I'll be able to earn a little from this!

Thank you for reading this post! Follow me on
Twitter🐦 for more updates!!

GPT Mental Health Chatbot💛 and Google Calendar API📆

Abhishek — Fri, 25 Aug 2023 20:09:38 +0000

Hi Everyone!
I have been working on a GPT Chatbot that...

Talks to you for a while and understands your feelings
Asks you 10 questions to plan your day
Uses Google Calendar API to Build a schedule for you.

Motivation to do this

When I was in high school and preparing for a college entrance I achieved high level consistency and my Google Calendar Reflected it. It was more like a diary.

It looked like this.

This honestly made me happy because I had some sort of a plan for my life and I could visually see how it turned out.

The color scheme was also predefined. Light blue and yellow was work, pink was sleep, orange was neutral events and dark blue was R&R.

I want to share this amazing system that made me happy, made me more productive, and in general a much smarter person.

Also, at the moment I'm taking BZDs. Medications that make you feel "tranquillity". I want people to have that feeling without them meds.

React app + Firebase Functions Express Endpoint

This is where all the chats are combined and we get a response from the openAI api.

It is trained to go like a therapy session.

Google Calendar API

Okay getting the whole OAuth thing working was difficult and even now, my app is still in testing! But the GPT API can call functions and I made some sort of a function to add events to someone's calendar

Sample Chat response to Calendar

Please ignore the light time zone mismatch.

So lets talk about testers💛

Looking for Testers! Try tranqility out now!

As of now if you go to https://tranqility-ai.web.app/ I don't think you'll be able to use it unless you are registered by me as a test user.

But with another account it did work without all this test user stuff, so just try it out, it'll barely take 20 seconds.

So, if anyone is interested in a light therapy session followed by day planning, comment your email address and I'll invite you!

Babylon.js + Google Blockly = No Code FPS, TPS🔥

Abhishek — Sun, 06 Aug 2023 16:24:08 +0000

As I was normally going about developing helicity.ai I realised that a lot of functionality can be added.

Problems with current Game Engines IMO

I always thought about Babylon.js like something I can never understand, one of the late realisations of life I guess.

I've tried Unity, I've tried GMS and pure H5 Canvas API.

The problem with Unity was the steep learning curve that never seemed to resolve(it finally did but just saying)..🥲
GMS was good but its paid and you can pretty much do nothing without paying. Also its H5 Development is too buggy. Its only good for PCs
The canvas API was cute and not really a game engine 😅...

The REAL TRUTH about Game Engines

I really dont wan't to hate on any Game Engine, because the truth is and honestly this is with any tech stack...

The best Game Engine is not the one with the most features, its the one which allows you to be the most productive.

Large studios will love Unity and Unreal.
But I'm a web developer..
I live and breathe JavaScript

Why not use the same codebase?

The packages and feature version mismatches of Unity are enough for me to not like it. H5 games are too slow to even build and test and my PC burns man..

Making multiplayer games sucks on normal Game Engines

And my biggest point!! Networking API in any major game engine is so poor! I love making multiplayer games and the best way to do that for me has always been make the damn server in Node.js

So I'd do stuff like use GMS for the Game Client and Node+ websockets for the backend, but it was always like 2 people speaking different languages trying to make a relationship work💔

Using Babylon.js🧡

I made more progress in Babylon in 1 hour than I did in days with Unity or GMS.(GMS is still a very easy one)
The JS code was so readable and easy to understand and felt intuitive
I did not have to worry about adding new features and using more JS libraries because they're all independent.
In babylon it actually feels like you understand the full picture behind your code and between you and your code execution there isnt much of a wall.
Babylon js is made so beautifully you can built so much in it with low code. Talk about the built in physics engine for a JS library!
The Graphical performance is way too good. It even works on low end devices and is the best for H5 games. Make realistic games, host online, anyone with a browser can play.. this is too good to be true.

Also as a web developer its very easy to export your game and host it because you learn so much about deployment specifically.

Connecting with Helicity.ai

I had made a basic 2D engine and it was a good learning experience but even a basic game in 3D is more fun than a complex game in 2D for the average guy.

Now that I understood babylon, I wanted to integrate it with Google's Blockly, to provide a NO CODE EXPERIENCE in Game Development.

The end result looks something like this. Its a No code editor made in React

Its purely a work in progress but Helicity is going 3D. You'll soon be able to create an FPS with a few blocks. It'll still take time but anyone can make it now.

Join this journey on twitter or x or whatever theyre calling it now!

GPT3.5 Turbo Game Engine✨ - You can make money from H5 Games now

Abhishek — Mon, 31 Jul 2023 20:36:48 +0000

It's been a while since I've posted on DEV, and I have been consistently working on helicity.ai. ✨💙

The cool part is that helicity is finally in good shape! Here are some interface and functionality highlights. And then we'll talk about Google Ad Money🫰💵

Projects Page

This is a Route in React (/projects) and uses firebase RTDB to look into your pojects and list them out. Might be moving to Firestore soon

IDE Code Editor

This is the /ide route in react and consists of the monaco code editor component to make it look like VSCode. Also the code is autosynced to the firebase RTDB.

Here is how the autosave works. Just a little sneak peak into the backend in express.

AI Game Maker

The part which makes helicity what it is. What I did was teach GPT3.5 my game engine and then make it write code in that.

A game description is taken from you, and those parameters decide what kind of code the AI writes.

Keep in mind that AI is just an add on and this is a fully functioning game engine on its own!

Publish your Game and Get a Shareable link in 12 seconds

After you have coded your game, when you press the play button it opens up a new tab on app.helicity.ai/games/some-id and you can share this link with all your friends!
Here is a slither io like snake movement prototype. Bones randomly spawn on the screen as black blocks and then arrange themselves into a snake of red rings.

This code is a template on our site and you can tweak the snake length and size!

const NODE_SIZE = 20; 
// The size of each bone in pixels
//you can change the snake bone to anything ex "lookup: elon musk face"
const NODE_IMAGE = "lookup: red circle png"; 
// The image source of each node
const TENDON_LENGTH = 2; 
// The maximum distance between two nodes
const LENGTH = 100;
// The initial number of nodes

Here is the game link.
Snakey

Game Monetisation - The AI Money Minting Engine

A few days back I just realised that the Google H5 beta Ads can be used because this is a pure HTML5 Game engine so that's what I'm working on now!

With a function to call Display ads and Rewarded ads so any developer can plug them, and after 1000 plays on a game or 1000 ad views, you can earn some $!
Payouts would be managed by stripe and automated by cloud functions that keep track of how much your game has been played.

Thanks for reading! I know this was a short post but I realllyy wanted to share what I've been working on. If you have any feedback please join our discord server

I also recently made a 🐦twitter or x or whatever account specifically for helicity, and I drop in my progress everyday.

Create a HTML5 Game with a Single Prompt💙 [GPT3.5]

Abhishek — Sun, 16 Jul 2023 21:47:20 +0000

Hey guys! Did you know that GPT3.5 is amazing? Seriously, its performance to price ratio is amazing. That has allowed me to create a Code Generator for my game engine.

I taught GPT3.5 how to use my game engine in the first part of the prompt and in the 2nd part I provided the Game Description we want.

You can try it out for free at Helicity.ai✨

Here is my Game Engine - Full Open Source Code on GitHub😺

AI Result


import { GameObject } from "./Gameobject.js";
import { Input } from "./Input.js";
import { Physics } from "./Physics.js";
import { Renderer } from "./Renderer.js";
import { Game } from "./Engine.js";

// Set the background image
Renderer.setBackground("lookup: flappy bird background");

// Create the player object
class Player extends GameObject {
  constructor(x, y, width, height, type, imageSrc) {
    super(x, y, width, height, type, imageSrc);
    this.velocityY = 0;
    this.gravity = 0.5;
  }

  update() {
    // Apply gravity
    this.velocityY += this.gravity;
    this.y += this.velocityY;

    // Jump when space is pressed
    if (Input.getState().keys["space"]) {
      this.velocityY = -10;
    }

    // Check collision with pipes
    for (const pipe of Game.gameObjects) {
      if (pipe.type === "pipe" && Physics.checkCollision(this, pipe)) {
        Game.stop();
        alert("Game Over!");
      }
    }
  }
}

// Create the pipe object
class Pipe extends GameObject {
  constructor(x, y, width, height, type, imageSrc) {
    super(x, y, width, height, type, imageSrc);
    this.velocityX = -2;
  }

  update() {
    this.x += this.velocityX;

    // Remove the pipe when it goes off the screen
    if (this.x + this.width < 0) {
      Game.gameObjects.splice(Game.gameObjects.indexOf(this), 1);
    }
  }
}

// Spawn pipes every 2 seconds
setInterval(() => {
  const pipeHeight = Math.random() * 200 + 100;
  const pipeGap = 200;
  const topPipe = new Pipe(
    Renderer.canvas.width,
    0,
    100,
    pipeHeight,
    "pipe",
    "lookup: green pipe mario png"
  );
  const bottomPipe = new Pipe(
    Renderer.canvas.width,
    pipeHeight + pipeGap,
    100,
    Renderer.canvas.height - (pipeHeight + pipeGap),
    "pipe",
    "lookup: green pipe mario png"
  );
  Game.gameObjects.push(topPipe, bottomPipe);
}, 2000);

// Create the game objects
const player = new Player(
  100,
  Renderer.canvas.height / 2,
  50,
  50,
  "player",
  "lookup: flappy bird png"
);

// Add the game objects to the game loop
Game.gameObjects.push(player);

// Start the game loop
Game.start();

Play it here

Game

Better prompts => Better Results

Notice that a simple prompt like "Make flappy bird" would probably not have resulted in a working version of the game. The best game descriptions are those that talk about

Input - What keys pressed do what
Good Image Descriptions - Tell the engine what images you want to use for what. And what kind of a background you want to have.
Collisions- When "elon" collides with "mark" do this ...
Specific Behavior - When the bird is falling rotate it so it looks more realistic and feels good on the player.

On the discord server I am making a list of good Prompts so anyone can understand and develop better games.

Conclusion

If you want to support this project, please join the Discord server and drop your feedback! Thank you so much

Send a 'Welcome' Email after someone signs in to your Firebase🔥 App with Brevo

Abhishek — Fri, 14 Jul 2023 13:54:30 +0000

Introduction

Today, I will show you how to automate the process of sending a welcome email to a new user upon sign-up with Firebase Authentication, using Firebase Functions and Brevo's email service. It's very easy...

Firebase is definitely the best backend provider in my opinion and you can create a full Web App with the FERN stack - Firebase Express React Node

Brevo is a very easy to use 'Email Builder', because the content in the email is rich...and you can also make customer lists here. However a simple way to make a welcome mail is to just make one and Store it as a template. And then send to everyone.

My Project is Helicity.ai , an AI powered JS Game Engine still in the works.

Setting Up Firebase Authentication

First, you need to set up Firebase Authentication on your platform. Firebase provides a simple, secure, and free system for this purpose.

You can use a library like firebaseui-web-react to make your Sign in with Google Button.

Firebase will handle everything else for you and when you go to your project page you can see everyone and their UUID which uniquely identifies them. Even if they use Email sign in or Phone or all the other ones firebase offers.

Creating a Firebase Function

We will create a Firebase Function that triggers whenever a new user signs up. Firebase Functions are essentially small pieces of backend code that can be executed in response to various events.

Here is the code for our function:

const functions = require('firebase-functions');
const admin = require('firebase-admin');

admin.initializeApp();

exports.onUserSignUp = functions.auth.user().onCreate(async (user) => {
  // User signed up
  const uid = user.uid;
  const email = user.email;
  const displayName = user.displayName;

  // Write to RTDB
  await admin.database().ref(`users/${uid}`).set({
    email: email,
    displayName: displayName,
    credits : 34,  //How many prompts this guy can use today
    // Add any other fields you want to save
  });

  var c = await sendBrevoEmail(email, 6);
  console.log(c);
});

In the function onUserSignUp, Firebase passes a UserRecord object representing the newly created user to our function. The function then writes the user's information to Firebase's Realtime Database (RTDB) and attempts to send a welcome email through Brevo. The RTDB record looks like this

Sending an email through Brevo with an API request

To send the email, we are going to use Brevo's API. We will create a function called sendBrevoEmail that takes an email address and a template ID as parameters:

Most of this is boilerplate so don't bother much. What's important is who you send the email to and the template ID. You can go to your brevo project and see all the templates and IDs.

const SibApiV3Sdk = require("sib-api-v3-sdk");
async function sendBrevoEmail(email, templateId) {
  let defaultClient = SibApiV3Sdk.ApiClient.instance;

  let apiKey = defaultClient.authentications["api-key"];
  apiKey.apiKey =
    "xkeyDONTSTEALMINEPLEASE7QvM";

  let apiInstance = new SibApiV3Sdk.TransactionalEmailsApi();

  let sendSmtpEmail = new SibApiV3Sdk.SendSmtpEmail();

  sendSmtpEmail.templateId = templateId; // 6 is google , 5 is early access
  sendSmtpEmail.sender = { name: "Helicity.ai", email: "lilshake@helicity.ai" };
  sendSmtpEmail.to = [{ email: email }];

  apiInstance.sendTransacEmail(sendSmtpEmail).then(
    function (data) {
      console.log("API called successfully.");
    },
    function (error) {
      console.error(error);
    }
  );
}

Extras - Using Formspark✨ to also send an email when someone signs up for Early Access

Formspark is another UI widget manager that looks like this once you set it up. It has a list of the people who signed up and can POST this information to our ENDPOINT.

A new firebase Function

Okay so the previous one was for google sign ins. This is for people who have provided their Email for a Newsletter/Early Access.

exports.sendBrevoEmail = functions.https.onRequest(async (req, res) => {
  if (req.method !== "POST") {
    res.status(400).send("Bad request, expecting POST");
    return;
  }

  const email = req.body.email; // Extract the email from the Formspark request

  try {
    await sendBrevoEmail(email, 5);
    res.status(200).send("Email sent");
  } catch (error) {
    console.error(error);
    res.status(500).send("Failed to send email");
  }
});

Firebase will give you an endpoint which you will need to set as the webhook URL in Formspark

Conclusion

As you can see, sending an email upon user sign-up is a breeze with Firebase Functions and Brevo's API. With this method, you can ensure that every new user gets a warm welcome without any manual intervention. Happy coding!

You can try this out right now! Make an account on helicity.ai and you will receive an email.
If you like this and are interested in the development, do consider joining the discord server!

Here is the Github

The Helicity.ai Team 🚀

How I made over 9000$ on Fiverr and Freelancing

Abhishek — Sun, 09 Jul 2023 16:16:55 +0000

Hello there,! I'm a Physics + CS undergrad at BITS Goa, a freelancer, a game developer, a web developer, and a co-lead in the TCG at Solana Sneks. I've been on an incredible journey of self-discovery, and today, I wanted to share a little bit about my experiences.

Starting out

I remember when I first started at University. I had made a game gatdamn.io, a simple io game.

I wasn't doing anything much then but I did have a dead fiverr profile and 1 gig
I will make a game in GMS2. One day randomly, out of nowhere I got an order for 30$. This was huge for me back in the day and I was extremely excited. I did not expect Gamemaker to be big enough for a guy to contact me to help him.. So I did and it wasn't even a lot of work, but I made 30$💸

Taking Freelance Seriously

During the summer of my first year, I decided to go all in to this freelance thing. I was a complete novice and I didn't even know web development, barely how to use nodejs. And guess what? It worked out. I feel like fiverr is a very friendly platform to start out. It takes time to grow and may not make money at first because you will have to show people some reviews but after a few orders people really start trusting you.🤝

I made a new gig for this no code tool called Thunkable and turns out many schools and colleges use it...So at first I was just doing their homework for money lol but it led to my biggest client.

It was a company from AU trying to run a SaaS and they used Thunkable for the frontend and AWS for the backend. This was also my first time getting familiar with building APIs and Lambda functions and I guess just overall using a cloud service. So I learned backend development properly as I kept working from them and mastered Firebase🔥. I love firebase, you can literally make anything with it.

I would put in a lot of hours every day for this client and started making a few hundred $ every week. I was extremely happy and kinda felt secure... I was paying my tuition and I bought a new laptop.💻

One day, I was approached by the good guys at Solana Sneks. I didn't realize it at the time, but this was going to be THE BEST THING THAT EVER HAPPENED TO ME✨. My experience with them has been nothing short of extraordinary. We started building (and still are) a trading card game in Gamemaker. I used my Firebase skills to build our whole application and we are in fact close to launch now, I mean like in July 2023.

Depression

In my second year, I got to really dive deep into the enigmatic world of Physics. Quantum mechanics. Lagrangian mechanics. It was truly enlightening, to say the least.

But then a horrible depression hit me out of personal problems. I had to start taking antidepressants which caused horrible fatigue and demotivation, in the middle I stopped making money for a while. In his period of my life I was just too sick to feel anything.

Rocket Networking

As my experience in game development grew, I felt a calling to transform my freelancing ventures into something more structured. This led me to create Rocket Networking, a multiplayer game development framework designed to streamline the process of building games. I paused freelance to do this. I learned basic React.

This was my first time building a SaaS from scratch so I made a lot of mistakes. The worst one being doing a linear launch. One day to launch without building an audience. Looking back this is stupid because when I would tell people about the product they really liked using it. It was basically a managed VPS for you. I made and still do make some money off this but its not at all close to what I expected.

Meltdown

Then it happened...all my problems blew up in my face and I had a huge episode followed by months of trauma-related stress. I was not freelancing. Rocket Networking mostly had free users. I was doing bad in University....everything got fucked up on Feb 14 2023. And no this isn't because of dating, the date is just coincidental.

It took me weeks to just get my emotions back and start feeling things. One week I went manic (oMg My lIfE Is a mOvIe)

Back to freelance

As I was recovering from that whole incident I realised that maybe I do need some security. Not a startup. I went back to fiverr and there were like 60 unread messages.

I started working on this again. "Yes, I'm so sorry for replying so late, If there is anything I can do please let me know". I got some really cool projects around this time.
I learned to control the HTML5 Canvas with Canvas API and a little bit of Pure H5 Game development. We were building an io game with Canvas API and Socket.io.🖼️
Another really cool project was from the University of Cincinnati where I built a Game, UI based Game Control system in *Google Cloud * for them. It was kind of related to biology🦇 and I really liked it.

Similarly, other projects came too and made a couple 1000$ after a huge period of not making money. One of the worst things I experienced a lot was sleepwalking so I bought this Health Ring💍 similar to oura but a lot cheaper which could monitor my sleep and tell me if I'm walking or whatever.

Pausing freelance for another startup

Maybe this is me being stupid🤦‍♂️ but this summer I slowed down freelance again to focus on developing a project which could lead to a SaaS soon. Its helicity.ai , an AI based JS Game engine that you can use right in your browser. It feels like every project I did previously, I learned something from. And I'm using that somehow in helicity.

Canvas API - Core of the game engine
Google Cloud to handle our whole backend
Firebase(which is really like a cute nonscary version of GCLOUD) - Identity management, Database and a ton of Functions, APIs
React and Next.js - Building the Interface
Gamemaker - Learning what a game engine really needs And many more...

Today even now, I am investing my time in creating Helicity.ai, Feel free to check it out!

Where am I headed next? Well, honestly, I'm not quite sure. But one thing I've learned from my journey is that the joy isn't just in the destination but in the journey itself. I believe it's this appreciation for the journey that keeps me motivated and excited for what's next.

Freelancing has been a stepping stone for me, allowing me to connect my love for physics with game development, and create a unique space for myself in this vast tech universe. It gave me the flexibility to explore different fields, learn on the go, and build something meaningful along the way. If you're considering a similar path, I hope my story serves as a beacon of possibility.

Here's to the winding road ahead!
linkedin

Adding Rotation and Scaling🕹️🌟 to my Game Engine - Part 4

Abhishek — Sun, 09 Jul 2023 13:59:22 +0000

Hello, developers! 👋💖

I'm back with some news! I added rotation and image scaling to our game objects. There are many approaches to doing this and this is what I have done.

In my previous post I tried making a flappy bird game in my engine Helicity.ai and it was clear that we needed Rotation and Scaling for a normal and usable Experience.

I find this sequence of events particularly interesting because *it is like taking a pencil and moving it to where we want to draw something , rotating the page and then drawing and then rotating back the page and bringing the pencil back to where it was. *

Here is the Github

Changes to how a Game Object is Rendered

Take a peek at the GameObject class. We're calling the 'render' method every frame after clearing the canvas.

// GameObject.js
render() {
  if (this.image.loaded) {
    Renderer.drawImage(
      this.image,
      this.x,
      this.y,
      this.width * this.xscale,
      this.height * this.yscale,
      this.angle,
      this.alpha
    );
  } else {
//No image was provided. Just drawing a black block.
    Renderer.drawBlock(
      "black",
      this.x,
      this.y,
      this.width * this.xscale,
      this.height * this.yscale,
      this.angle,
      this.alpha
    );
  }
}

The GameObject now scales according to 'xscale' and 'yscale' properties and rotates according to the 'angle' property. You have full control over these values 🎮.

But what happens in both those functions? Let's see

Now, let's journey to our Renderer class:

// Renderer.js
drawImage(image, x, y, width, height, angle, alpha) {
  this.context.save();
  this.context.translate(x, y);
  this.context.rotate(-angle);
  this.context.globalAlpha = alpha;
  this.context.drawImage(image, 0, 0, width, height);
  this.context.restore();
}

drawBlock(color, x, y, width, height, angle, alpha) {
  this.context.save();
  this.context.translate(x, y);
  this.context.rotate(-angle);
  this.context.globalAlpha = alpha;
  this.context.fillStyle = color;
  this.context.fillRect(0, 0, width, height);
  this.context.restore();
}

Explanation of the Sequence of Events

Notice something new? The 'drawImage' and 'drawBlock' methods now include 'angle' and 'alpha' parameters.

Let's break down what's happening in the Renderer's drawImage and drawBlock methods. They both follow a similar sequence of operations.

1.** Saving the Canvas State** (context.save()): Before any transformations, we save the current state of the canvas. The save() method pushes the current state onto a stack. This allows us to apply transformations and then revert back to the original state after we've completed our drawing.

Translating the Origin (context.translate(x, y)): The translate(x, y) function shifts the (0,0) origin of our canvas to the provided (x,y) point. This is particularly useful because rotation in the canvas is always performed around the current origin. So by translating the origin to the point around which we want to rotate (in this case, the center of our image or block), we prepare the canvas for rotation.
Rotating the Canvas (context.rotate(-angle)): Now that the origin is at the center of our image or block, we can rotate our canvas. The rotate(angle) function rotates the canvas around the current origin by the specified angle (measured in radians). We use -angle because the canvas's positive rotation is clockwise, while typically in 2D games, we treat positive rotation as counterclockwise.
Setting Transparency (context.globalAlpha = alpha): The globalAlpha property is used to apply transparency to our image or block. It can take a value between 0.0 (fully transparent) and 1.0 (fully opaque).
Drawing the Image or Block: With our transformations set, we can now draw the image or block. For images, we use the drawImage(image, 0, 0, width, height) method, which draws the specified image onto the canvas. For blocks, we use the fillRect(0, 0, width, height) method after setting the fill color with fillStyle = color.
Restoring the Canvas State (context.restore()): After we're done with drawing, we restore the canvas back to its original state by using the restore() method. This pops the most recently saved state from the stack and applies it. All of the transformations we applied (translation, rotation, and globalAlpha change) are undone, so they won't affect any further drawing on the canvas.

This sequence of operations lets us draw images and blocks onto the canvas with control over their position, size, rotation, and transparency, giving a lot of flexibility in how objects can be displayed on the canvas.

Conclusions

Because we did this, we can now make the bird in our game rotate to make it look like it's falling.
You can try out this variant of the game.

//In the update method of the bird
 //change angle of bird to make it look like it is falling. -90 is straight down
    //dont make it indefinitely dependent on velocityY, or else it will keep rotating
    this.angle = Math.min(this.velocityY * 0.05, 90);

However, there are some new challenges.

Physics

This cute function is not good enough to handle rotations lol.

 //Adjusted for scaling but NOT rotation
  static checkCollision(object1, object2) {
    return (
      object1.x < object2.x + object2.width * object2.xscale &&
      object1.x + object1.width * object1.xscale > object2.x &&
      object1.y < object2.y + object2.height * object2.yscale &&
      object1.y + object1.height * object1.yscale > object2.y
    );
  }

Sprite Origins

So as of now a Game Object's origin, its x or y is the top left corner of the image. This is fine for now but it means that all rotations will happen about that point, making it look like the bird is moving in a bit wierd way... but its a bird so it looks normal lol.

If you like this and are interested in the development, do consider joining the discord server!
The Helicity.ai Team 🚀

Making Flappy Bird in my Game Engine. How hard can it be? - [Helicity.ai Part 3]

Abhishek — Sat, 08 Jul 2023 21:27:41 +0000

Hello everyone! 🙋‍♂️ I thought I'd share my latest game development adventure with you all. Recently, I thought to myself, "Making Flappy Bird in my own game engine? How hard can it be?" 🤔

I learned a lot of things I need to add to my Engine.

Helicity.ai is my Game Engine.

Here is the source 😺github

Step by Step Guide

Step 1: Importing the Necessary Modules 📚

// Import modules
import { GameObject } from "./Gameobject.js";
import { Input } from "./Input.js";
import { Physics } from "./Physics.js";
import { Renderer } from "./Renderer.js";
import { Game } from "./Engine.js";

First things first, we need to import our modules! They're the backbone of our game and do a ton of heavy lifting for us. 🏋️‍♀️
You can see what every module does on the github link. But they handle specific sections of the game.

Step 2: Setting Up the Bird 🐤

var score = 0;
// Create Bird class that extends GameObject
class Bird extends GameObject {
  constructor(x, y, width, height, imageSrc) {
    super(x, y, width, height, "bird", imageSrc);
    this.velocityY = 0;
    this.gravity = 0.3;
  }

    // Check for input to control the bird
    if (Input.getState().keys["space"] || Input.getState().mouseLeftDown) {
      this.velocityY = -7;
    }

    //draw score 
    Renderer.drawText("Score: "+score,30,30,25,"black","Arial")
  }
}

The GameObject is a Class which takes in constructor (x, y, width, height, some-type-tag, image-source) The game engine is build around playing with these instances and their update() methods, that have the frame wise logic.

Here, we're creating a Bird class that extends our GameObject.
The bird is the main object of our game! 🌟 We're giving it a velocity and gravity property to handle its movement. 🌍
Also I'm drawing the score property.

We don't REALLLY need a class for the Bird because it will only have 1 instance but I guess that's good practice?

Step 3: Moving the Bird 🕹

Inside our Bird class, we also have an update function. This is where all the magic happens - we update the bird's position, check for collisions, and handle user input. 🎮
Basic rectangular collisions are handled by Physics.checkCollision(gameobject1 , gameobject2)

class Bird extends GameObject {
  constructor(x, y, width, height, imageSrc) {
    super(x, y, width, height, "bird", imageSrc);
    this.velocityY = 0;
    this.gravity = 0.3;
  }

  update() {
    // Apply gravity
    this.velocityY += this.gravity;
    this.y += this.velocityY;

    // Check for collision with pipes
    for (const pipe of Game.gameObjects) {
      if (pipe.type === "pipe" && Physics.checkCollision(this, pipe)) {
        Game.stop();
        Renderer.drawText("Game Over", 100, 100, 30, "black", "Arial");
      }
    }

    // Check for input to control the bird
    if (Input.getState().keys["space"] || Input.getState().mouseLeftDown) {
      this.velocityY = -7;
    }

    //draw score 
    Renderer.drawText("Score: "+score,30,30,25,"black","Arial")
  }
}

Step 4: Creating the Pipes 🌆

// Create Pipe class that extends GameObject
class Pipe extends GameObject {
  constructor(x, y, width, height, imageSrc) {
    super(x, y, width, height, "pipe", imageSrc);
    this.velocityX = -2;
  }

  update() {
    this.x += this.velocityX;

    // Remove pipe when it goes off the screen
    if (this.x + this.width < 0) {
      Game.gameObjects.splice(Game.gameObjects.indexOf(this), 1);
    }
  }
}

Next up are our infamous pipes! Just like our bird, we create a Pipe class that extends GameObject. We're giving each pipe a constant velocity to make it move. 🏙

Step 5: Adding Our Bird 🎲

After creating our classes, it's time to instantiate our bird or any other game objects and add them to our game 🧩. I just picked up some png from Google.

const bird = new Bird(100, 200, 50, 50, "https://freepngimg.com/thumb/logo/109941-logo-bird-flappy-free-transparent-image-hq.png");

Step 6: Spawning the Pipes ⏱

We're using a setInterval function to spawn our pipes every two seconds. Every time a new set of pipes is spawned, our score increases. 📈

// Create pipes every second
setInterval(() => {
  if(Game.isRunning){
    score++;
  }
  const pipeTop = new Pipe(Renderer.canvas.width, 0, 100, Math.random() * 200 + 100, "https://upload.wikimedia.org/wikipedia/commons/9/93/Mario_pipe.png");
  const pipeBottom = new Pipe(Renderer.canvas.width, pipeTop.height + 300, 100, 600 - pipeTop.height - 200, "https://upload.wikimedia.org/wikipedia/commons/9/93/Mario_pipe.png");
  Game.gameObjects.push(pipeTop, pipeBottom);
}, 2000);

This is when I realised I need xscale and yscale properties ASAP in my game object, I mean look at how the pipes are spawning!

Conclusions

Finally, we start our game with Game.start(). Now, I can tell people I made flappy bird in my own engine! 🎉

But honestly its more about improving the engine and what this taught me. If I need to make this a real thing, it needs to be usable. Also we need a background component.

So that's it! Creating a Flappy Bird clone in my game engine turned out to be a fun and enlightening experience! 🎈🎊 I hope you found this post helpful and inspiring. Don't hesitate to reach out if you have any questions or comments. Happy coding! 🚀🚀🚀

Discord link - Support Development

Discord

Game Engine with AI✨ Part 2 - DALL E Sprites

Abhishek — Fri, 07 Jul 2023 22:09:55 +0000

Hey, devs! 🖐🎮
Hope you're all having a nice day! I have some cool updates on helicity.ai

For reference, this was part 1 (nobody saw it🙃)
I'm making an AI JS Browser Game Engine

Inbuilt DALL E Support

I've integrated DALL-E support! 🎨🖌️ Yes, so from now on, you can define your sprite URL as "lookup: some description", and Helicity.ai will generate a unique sprite for you on the fly using DALL-E. Create unique, custom images without having to leave the IDE.

How I made it

So it all happens in the Gameobject.js module. Whenever you make a new instance of the GameObject, this code runs
When you put "lookup:" string in your image source, it takes this as a request and calls a firebase function made in Express
The firebase function calls the DALL E API looking up the string after "lookup:" and asynchronously returns the image-url, this is sent back to the game object.
The game object image is drawn every frame using *render() *(automatically in the game loop) or else, its just a black box
The savedImages makes sure that if 2 game objects are created with the same lookup description, multiple called aren't made to dall e. For example pipes in flappy bird.

Gameobject.js

var savedImages = {};

export class GameObject {
  constructor(x, y, width, height, type, imageSrc) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.type = type; // can be Used for collision detection
    this.image = new Image();
    this.image.loaded = false;

    //check if imagesrc contains the string lookup:
    if (imageSrc.includes("lookup:")) {
      //check if the image is already saved
      if (savedImages[imageSrc]) {
        this.image = savedImages[imageSrc];
        this.image.loaded = true;
      } else {
        //make a post request. this is in html to use XMLHttpRequest
        var xhr = new XMLHttpRequest();
        xhr.open(
          "POST",
          "https://us-central1-myaigameengine.cloudfunctions.net/api/Image",
          true
        );
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send(
          JSON.stringify({
            userPrompt: imageSrc.split("lookup:")[1],
          })
        );
        xhr.onreadystatechange = () => {
          if (xhr.readyState == 4 && xhr.status == 200) {
            //console.log(xhr.responseText);

            //get the imageURL from the response
            var imageURL = JSON.parse(xhr.responseText).image_url;
            this.image = new Image();
            this.image.src = imageURL;
            this.image.onload = () => {
              this.image.loaded = true;
              //save the image
              savedImages[imageSrc] = this.image;
            };
            this.image.onerror = () => {
              console.error(`Error loading image ${this.imageSrc}`);
            };
          }
        };
      }
    } else {
      this.imageSrc = imageSrc;
      this.image = new Image();
      this.image.src = imageSrc;
      this.image.onerror = () => {
        console.error(`Error loading image ${this.imageSrc}`);
      };
      this.image.onload = () => {
        this.image.loaded = true;
      };
    }

    Game.addGameObject(this);
  }

  update(deltaTime) {
    // Overridden by child classes
  }

  render() {
    //draw a black rectangle if there isnt an image else draw it
    if (this.image.loaded) {
      Renderer.drawImage(this.image, this.x, this.y, this.width, this.height);
    } else {

      Renderer.context.fillStyle = "black";
      Renderer.context.fillRect(this.x, this.y, this.width, this.height);
    }
  }
}

Firebase function's Express Image Endpoint

app.post("/Image", async (req, res) => {
  //var uuid = req.body.uuid;
  var userPrompt = req.body.userPrompt;
  //console.log("uuid is " + uuid);
  console.log("user prompt is ");
  openai
    .createImage({
      prompt: userPrompt,
      n: 1,
      size: "256x256",
    })
    .then((result) => {
      image_url = result.data.data[0].url;
      console.log(image_url);
      res.send({
        success: true,
        image_url: image_url,
      });
    });
});

Thats it!

Think about it - need a sprite of a "purple dragon with a top hat?" 🐉🎩 Just type lookup: purple dragon with a top hat and voila, your personalized sprite is ready to be used in your game! It's that simple! 🎲🚀

Multiplayer support is coming soon!

If you'd like to talk about and participate in the development, hit me up on discord!

https://discord.gg/RkH98RgVDr

Stay tuned for more updates! Happy coding 🎮💖