.

CLOUD BASED GAMMING PLATFORM

NAAN MUDHALVAN REPORT

Submitted by

HARSHADA A (711722104041)
in partial fulfilment for the award of the degree

of

BACHELOR Of TECHNOLOGY

IN
DEPARTMENT OF COMPUTER SCIENCE
ENGINEERING

KGiSL INSTITUTE OF TECHNOLOGY

ANNA UNIVERSITY: CHENNAI 600 025

MAY 2024
 ANNA UNIVERSITY: CHENNAI 600 025

MAY 2024

BONAFIDE CERTIFICATE

Certified that this Naan Mudhalvan report “cloud based gamming

platform” is the bonafide work of “Harshada A” who belongs to II
Year Computer science engineering “A” during fourth Semester of
Academic Year 2023-2024.

FACULTY INCHARGE HEAD OF THE DEPARTMENT

Certified that the candidates were examined by us for Naan

Mudhalvan Practical Viva held on at KGiSL Institute
of Technology, Saravanampatti, Coimbatore 641035.

INTERNAL EXAMINER EXTERNAL EXAMINER

ACKNOWLEDGEMENT

We express our deepest gratitude to our Chairman and

Managing Director Dr. Ashok Bakthavachalam for providing us
with an environment to complete our Internship project successfully.

We are grateful to our CEO of Academic Initiatives

Mr. Aravind Kumar Rajendran and our beloved Secretary Dr.
Rajkumar N. Our sincere thanks to honourable Principal Dr.
Suresh Kumar S and Academic Director Dr. Shankar P for his
support, guidance, and blessings.

We would like to thank Dr. Thenmozhi T, Head of the

Department, and Naan Mudhalvan Coordinator Ms. Indhumathi
S, Department of Computer science engineering for her firm support
during the entire course of this Internship and who modelled us both
technically and morally for achieving greater success in this project
work.
We also thank all the faculty members of our department for
their help in making this Internship project a successful one. Finally,
we take this opportunity to extend our deep appreciation to our
Family and Friends, for all they meant to us during the crucial times
of the completion of our project.
TABLE OF CONTENTS:

1. Abstract

2. Introduction

3. Domain

4. Proposed Method

- Backend Architecture

- Frontend Development

- User Authentication and Management

- Cloud Deployment

5. Implementation and Output Overview

6. Conclusion
ABSTRACT:

This project aims to develop a cloud-based gaming platform that provides users
with a seamless gaming experience over the internet. By leveraging modern web
technologies and cloud infrastructure, we seek to create an accessible and
enjoyable gaming environment for players of all skill levels.

At the heart of our project is the utilization of Python and JavaScript for backend
and frontend development, respectively. We envision a simple yet robust backend
server built with Flask, a lightweight web framework, to handle user
authentication, game sessions, and real-time communication. Additionally, we
plan to incorporate Flask-SocketIO to facilitate WebSocket-based communication
for real-time interaction between game clients and the server.

The frontend of the platform will be designed using HTML, CSS, and JavaScript
to create intuitive and interactive user interfaces. With a focus on user experience,
we aim to provide a seamless gaming interface that enhances player engagement
and enjoyment.

Key feature of the platform include user authentication. By implementing these

feature, we aspire to create a dynamic gaming environment where players can
connect, compete, and collaborate in real-time.

Our project will be deployed on a free or affordable cloud platform, such as

Heroku or Firebase, to ensure accessibility and scalability. By harnessing the
power of cloud infrastructure, we aim to provide a reliable and scalable gaming
platform that can accommodate varying numbers of users.

In conclusion, our project represents an exciting endeavor to create a simple yet

immersive cloud-based gaming platform. Through collaboration, innovation, and
a commitment to delivering a quality gaming experience, we aspire to build a
platform that brings joy and entertainment to players around the world.
 INTRODUCTION:

In recent years, the gaming industry has witnessed a significant shift towards
cloud-based gaming platforms, which offer unprecedented convenience and
accessibility to players. Traditional gaming often requires expensive hardware and
complex setup processes, limiting the reach and inclusivity of gaming experiences.
To address these challenges, our project aims to develop a cloud-based gaming
platform that leverages modern web technologies and cloud infrastructure to
provide users with a seamless and immersive gaming experience over the internet.

By utilizing Python and Flask for backend development and JavaScript for the
frontend, we plan to build a robust and scalable platform. The backend will
manage user authentication, game sessions, and real-time communication, ensuring
a smooth and responsive interaction for players. The frontend will be designed to
create intuitive and engaging user interfaces, enhancing the overall player
experience.

Our platform will incorporate essential features such as social integration, and
cloud saves, fostering community engagement and enhancing the gaming
experience. By deploying our platform on a free or affordable cloud service like
Heroku or Firebase, we aim to make gaming more accessible and inclusive,
reaching a broader audience and accommodating varying numbers of users.

In this project, we are committed to delivering a quality gaming experience

through innovation and collaboration. Our goal is to transform the way people play
and enjoy video games, making gaming more accessible and enjoyable for players
around the world
 DOMAIN:

The project operates within the domain of cloud-based gaming, particularly

emphasizing the development of a seamless and immersive gaming platform
accessible over the internet. In this domain, the primary objective is to leverage
modern web technologies and cloud infrastructure to create an inclusive gaming
environment. This platform aims to provide high-quality gaming experiences
without the need for expensive hardware, thereby democratizing access to
gaming. By focusing on cloud-based gaming, the project seeks to enhance user
engagement through real-time interaction, and social integration. Ultimately, the
project aims to transform the gaming landscape, making it more accessible and
enjoyable for a diverse range of players around the world.

PROPOSED METHOD:

The proposed methodology centers around the development of a cloud-

based gaming platform to provide users with a seamless gaming experience over
the internet.

1. Understanding Platform Architecture: The first step is to comprehend the

overall structure and functioning of the cloud-based gaming platform. This
includes understanding how the backend server handles user authentication, game
sessions, and real-time communication. The frontend design involves creating
interactive user interfaces that enhance player engagement.

2. Backend Development: The backend server is built using Python and Flask, a
lightweight web framework. This involves setting up user authentication,
managing game sessions, and facilitating real-time communication using Flask-
SocketIO for WebSocket-based interactions. Ensuring secure and efficient
handling of user data is crucial.
3. Frontend Development: The frontend is designed using HTML, CSS, and
JavaScript to create an intuitive and interactive user experience. This involves
crafting user interfaces that are responsive and compatible with various devices,
providing a seamless gaming experience.

4. Feature Implementation: Key features such as user authentication and game

session management are implemented. User authentication involves secure
registration and login processes, while game session management ensures smooth
real-time interaction between the game clients and the server.

5. Fine-tuning and Optimization: Based on initial testing and user feedback,

fine-tuning and optimization steps are carried out to enhance the platform's
performance. This may include optimizing server response times, ensuring low
latency in real-time interactions, and improving the overall user experience.

6. Deployment and Integration: Once the platform is fully developed and

optimized, it is deployed on a free and affordable cloud service netlify. This
ensures scalability and accessibility, allowing the platform to handle varying
numbers of users. Integration with cloud databases for secure data storage and
retrieval is also considered.
IMPLEMENTATION AND OUTPUT OVERVIEW:

During implementation, we followed a structured approach to develop our

cloud-based gaming platform. We began by understanding the overall
architecture, focusing on how the backend server handles user authentication,
game sessions, and real-time communication. Concurrently, we designed the
frontend using HTML, CSS, and JavaScript to ensure an intuitive and interactive
user experience.

We developed the backend using Python and Flask, incorporating Flask-SocketIO

to manage WebSocket-based real-time interactions. This setup allowed us to
handle user data securely and manage game sessions efficiently. For the frontend,
we created responsive interfaces that are compatible with various devices,
providing a seamless gaming experience.

After implementing the core features, we fine-tuned and optimized the platform
based on initial testing and user feedback. This involved optimizing server
response times and ensuring low latency in real-time interactions to enhance the
overall user experience.

Once satisfied with the performance, we deployed the platform on Heroku,

ensuring it met scalability and accessibility requirements. We integrated cloud
databases to manage secure data storage and retrieval.

The outcome of this implementation was a successful cloud-based gaming

platform. The deployed platform demonstrated excellent performance in
providing a seamless and immersive gaming experience. By leveraging modern
web technologies and cloud infrastructure, our solution contributes to making
gaming more accessible and enjoyable for a diverse range of players.
 PROGRAM:

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | MY FIRST STEP</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<style>
body{
background-color: rgb(107, 0, 119);
}
</style>
</head>
<body>
<div id="unity-container" class="unity-desktop">
<canvas id="unity-canvas" width=960 height=600></canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-warning"> </div>

<div id="unity-fullscreen-button"></div>
<div id="unity-build-title"></div>
</div>
</div>
<script>
var container = document.querySelector("#unity-container");
var canvas = document.querySelector("#unity-canvas");
var loadingBar = document.querySelector("#unity-loading-bar");
var progressBarFull = document.querySelector("#unity-progress-bar-full");
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
var warningBanner = document.querySelector("#unity-warning");

// Shows a temporary message banner/ribbon for a few seconds, or

// a permanent error message on top of the canvas if type=='error'.
// If type=='warning', a yellow highlight color is used.
// Modify or remove this function to customize the visually presented
// way that non-critical warnings and error messages are presented to the
// user.
function unityShowBanner(msg, type) {
function updateBannerVisibility() {
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
}
var div = document.createElement('div');
div.innerHTML = msg;
 warningBanner.appendChild(div);
if (type == 'error') div.style = 'background: red; padding: 10px;';
else {
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
setTimeout(function() {
warningBanner.removeChild(div);
updateBannerVisibility();
}, 5000);
}
updateBannerVisibility();
}

var buildUrl = "Build";

var loaderUrl = buildUrl + "/first 2d game.loader.js";
var config = {
dataUrl: buildUrl + "/first 2d game.data",
frameworkUrl: buildUrl + "/first 2d game.framework.js",
codeUrl: buildUrl + "/first 2d game.wasm",
streamingAssetsUrl: "StreamingAssets",
companyName: "Bragadeesh",
productName: "MY FIRST STEP",
productVersion: "0.1",
showBanner: unityShowBanner,
};

// By default Unity keeps WebGL canvas render target size matched with
// the DOM size of the canvas element (scaled by window.devicePixelRatio)
// Set this to false if you want to decouple this synchronization from
// happening inside the engine, and you would instead like to size up
// the canvas DOM size and WebGL render target sizes yourself.
// config.matchWebGLToCanvasSize = false;

if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
// Mobile device style: fill the whole browser client area with the game canvas:

var meta = document.createElement('meta');

meta.name = 'viewport';
meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
document.getElementsByTagName('head')[0].appendChild(meta);
container.className = "unity-mobile";
canvas.className = "unity-mobile";

// To lower canvas resolution on mobile devices to gain some

// performance, uncomment the following line:
// config.devicePixelRatio = 1;

unityShowBanner('WebGL builds are not supported on mobile devices.');

} else {
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:

canvas.style.width = "960px";
canvas.style.height = "600px";
}
 loadingBar.style.display = "block";

var script = document.createElement("script");

script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
loadingBar.style.display = "none";
fullscreenButton.onclick = () => {
unityInstance.SetFullscreen(1);
};
}).catch((message) => {
alert(message);
});
};
document.body.appendChild(script);
</script>
</body>
</html>

Game:
Code 1:

using UnityEngine;
using UnityEngine.SceneManagement;

public class GameManager : MonoBehaviour

{
bool gameEnded = false;
public float restart_delay = 1f;
public GameObject levelover;

public void CompleteLevel()

{
levelover.SetActive(true);
SceneManager.LoadScene(SceneManager.GetActiveScene().buildIndex + 1);
}
public void Endgame()
{
if (gameEnded == false)
{
gameEnded = true;

Invoke("restart", restart_delay);
}

}
void restart()
{
SceneManager.LoadScene(SceneManager.GetActiveScene().name);
}
}
Code 2:

using UnityEngine;

public class PlayerCollision : MonoBehaviour

{
public Movement movement_player;
public AudioSource src;
public AudioClip sfx1;
private void OnCollisionEnter(Collision collision)
{
if(collision.collider.tag == "Obstacle")
{
movement_player.enabled = false;
FindAnyObjectByType<GameManager>().Endgame();
src.clip = sfx1;
src.Play();

}
}
}

Code 3:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Movement : MonoBehaviour

{
public Rigidbody body;
public float Forward_Force = 500f;
public float Side_Force = 1000f;
void Start()
{

//Using fixedupdate because we are going to mess with physics - by Brackey

void FixedUpdate()
{
body.AddForce(0, 0, Forward_Force* Time.deltaTime);
if (Input.GetKey("d"))
{
body.AddForce(Side_Force * Time.deltaTime, 0, 0,ForceMode.VelocityChange);
}
else if (Input.GetKey("a"))
{
body.AddForce(-Side_Force * Time.deltaTime, 0, 0, ForceMode.VelocityChange);
}

if(body.position.y < -1f)

{
FindAnyObjectByType<GameManager>().Endgame();
}

}
}
OUTPUT:
 CONCLUSION:
The Cloud-based Gaming Platform (CBGP) project successfully demonstrates the
potential to revolutionize the gaming industry by providing seamless and immersive gaming
experiences accessible from any internet-connected device. By leveraging cloud technology,
CBGP eliminates the need for expensive hardware, making gaming more inclusive and
accessible. Through careful implementation and deployment, the project has shown that
advanced streaming technology can deliver low-latency, high-quality graphics, offering a
console-like experience on diverse devices.
The future scope of the Cloud-based Gaming Platform (CBGP) is vast and promising. Moving
forward, the platform aims to expand its game library to include a wider variety of titles,
catering to diverse gamer preferences and genres. Enhancements in streaming technology will
focus on reducing latency and improving video quality, ensuring a seamless gaming
experience even in low-bandwidth environments. The platform plans to extend cross-platform
support, making it accessible on more devices, including smart TVs, gaming consoles, and VR
headsets. Integration of AI and machine learning will enable personalized game
recommendations, dynamic difficulty adjustments, and real-time performance optimizations.
Advanced social features, such as in-game voice chat and live streaming, will foster stronger
community engagement. Establishing more global data centers will ensure optimal
performance and reduced latency worldwide. Security measures will be continuously
enhanced to protect user data and ensure safe gaming experiences. Additionally, sustainability
initiatives will be implemented to reduce the environmental impact of data centers. Supporting
game developers and modding communities will encourage innovation and customization,
while exploring augmented reality (AR) and virtual reality (VR) integration will provide
immersive gaming experiences, keeping CBGP at the cutting edge of the gaming industry.