EasySprite.js

FREE HTML5 GAME ENGINE

Download

Welcome

Hello. EasySprite.js is a 2D JavaScript library for game development, it is lightweight and fast (i hope).

EasySprite.js is open source. It's hosted, developed, and maintained on GitHub.

View the GitHub project

Demo

Getting Started

First, create an HTML file, insert the EasySprite library and setup the engine.

Example : OpenScreen.html

<!doctype html>
<html lang="fr-EN">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> 
    <title>Template</title>
    
    <!-- Insert EasySprite.js -->
    <script src="EasySprite.js"></script>
</head>
<body>

<script>
    // Setup screen
    openScreen("game", 0, 0, 800, 600);
    
    renderGame()
    
    // Render screen
    function renderGame() {
        requestAnimationFrame(renderGame);
    };
</script>
</body>
</html>

Now, load some sprites and play.

Example : DisplaySprite.html

<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> 
    <title>DisplaySprite</title>
    <script src="easysprite.js"></script>
</head>
<body>

<script>
    var loadProgress = 0;
    openScreen("game", 0, 0, 800, 600);
    
    //Load sprites 
    var background = loadSprite("assets/image/blur1.jpg", onLoadSuccess); 
    var logo  = loadSprite("assets/image/html5logo.png", onLoadSuccess);
    
    function onLoadSuccess() {
        loadProgress ++;
        
        if (loadProgress == 2) {
            renderGame();
        }
    }
    
    //Update screen 
    function renderGame() {
        displaySprite(background, 0, 0, screenWidth(), screenHeight());
        displaySprite(logo, 300, 200);
        
        requestAnimationFrame(renderGame);
    };
</script>
</body>
</html>
Try it