fosfo

Petite Librairie javascript pour créer des jeux vidéo en canvas | Small canvas painting library

Demo :

example.html

Installation :

In Pure Javascript :

import juste fosfo.js to your project directory

<html>
<head>
    <script src="./fosfo.js"></script> 
</head>
<body></body>
</html>

With npm package manager :

$ npm install fosfo

const Fosfo = require("fosfo");
 
let canvas = document.getElementById("cv");
new Fosfo(canvas)

With nodejs :

$ npm install canvas
$ npm install fosfo

const { createCanvas, loadImage } = require('canvas');
const Fosfo = require("fosfo");
 
const canvas = createCanvas(200, 200); // nodejs create canvas
 
let fosfo = new Fosfo(canvas);
 
fosfo.loadimage(["./niam.png"], loadImage).done(() => {
    // chargement terminé
    fosfo.draw('test', 'niam.png', 50, 50);
    fosfo.update();
    console.log(fosfo.toDataURL()); // getting blob url of canvas generated image
});

Documentation :

Preload images :

fosfo.loadimage permet de charger vos images avant de démarrer votre programme.

Example :

let canvas = document.getElementById("cv");
let fosfo = new Fosfo(canvas);
 
fosfo.loadimage(["./assets/niam.png", "./assets/niam2.png"]).done(() => {
    // chargement terminé
});

My First display :

fosfo.draw permet d'ajouter une image sur le canvas

Example :

let canvas = document.getElementById("cv");
let fosfo = new Fosfo(canvas);
 
fosfo.loadimage(["./assets/niam.png", "./assets/niam2.png"]).done(() => {
    // chargement terminé
    fosfo.draw("name", "miam.png", 50, 50); // fosfo.draw( nom, filename, x, y);
    fosfo.update(); // paint canvas with drawed object
});

Get blob :

fosfo.toDataURL() get blob url from canvas

Example :

let canvas = document.getElementById("cv");
let fosfo = new Fosfo(canvas);
 
fosfo.loadimage(["./assets/niam.png", "./assets/niam2.png"]).done(() => {
    // chargement terminé
    fosfo.draw("name", "miam.png", 50, 50); // fosfo.draw( nom, filename, x, y);
    fosfo.update(); // paint canvas with drawed object
    console.log(fosfo.toDataURL());
});

Clear one img :

fosfo.undraw(name of draw image) clear one or multiple drawed images

Example :

let canvas = document.getElementById("cv");
let fosfo = new Fosfo(canvas);
 
fosfo.loadimage(["./assets/niam.png", "./assets/niam2.png"]).done(() => {
    // chargement terminé
    fosfo.undraw("name");
    // or
    fosfo.undraw(["name", "name2"]);
    fosfo.draw("name", "miam.png", 50, 50); // fosfo.draw( nom, filename, x, y);
    fosfo.update(); // paint canvas with drawed object
});

Clear canvas :

fosfo.clear() clear all canvas drawed images

Example :

let canvas = document.getElementById("cv");
let fosfo = new Fosfo(canvas);
 
fosfo.loadimage(["./assets/niam.png", "./assets/niam2.png"]).done(() => {
    // chargement terminé
    fosfo.draw("name", "miam.png", 50, 50); // fosfo.draw( nom, filename, x, y);
    fosfo.update(); // paint canvas with drawed object
    fosfo.clear(); // fosfo canvas are totally cleaned
});

Sprite animation :

fosfo.setFramesToImg applique sur une image une grille de sprite qui permet l'usage de la fonction fosfo.drawframe pour afficher un sprite en particulier.

Example :

Assets :

let canvas = document.getElementById("cv");
let fosfo = new Fosfo(canvas);
 
fosfo.loadimage(["./assets/niam.png", "./assets/niam2.png"]).done(() => {
    // chargement terminé
    fosfo.setFramesToImg('niam.png', 6, 4);
    fosfo.drawframe("miam1", "niam.png", 6, 4);
    fosfo.update(); // paint canvas with drawed object
});

Display loop :

Loop display with Fosfo

Example :

let canvas = document.getElementById("cv");
let fosfo = new Fosfo(canvas);
 
let loopFunction = () => {
    //TODO future code
    fosfo.draw("name", "miam.png", 50, 50);
    fosfo.update(); // paint canvas with drawed object
};
 
fosfo.loadimage(["./assets/niam.png", "./assets/niam2.png"]).done(() => {
    // chargement terminé
    setInterval(loopFunction, fosfo.fps / 1000); // appelle la fonction loopFunction 60 fois par seconde par defaut.
});

Display loop with moving & sprite animation :

Example :

let canvas = document.getElementById("cv");
let fosfo = new Fosfo(canvas);
let count = 0;
 
let loopFunction = () => {
    //TODO future code
    let anims = [6, 7, 8, 9, 10, 11];
    
    fosfo.undraw("chatonfou");
    fosfo.drawframe("chatonfou", 'niam.png', anims[count], 250, 60);
    
    count += 1;
    if (count >= anims.length) count = 0;
 
    fosfo.update(); // paint canvas with drawed object
};
 
fosfo.loadimage(["./assets/niam.png", "./assets/niam2.png"]).done(() => {
    // chargement terminé
    setInterval(loopFunction, fosfo.fps / 1000); // appelle la fonction loopFunction 60 fois par seconde par defaut.
});

fosfo

Demo :

Installation :

Documentation :

Preload images :

Example :

My First display :

Example :

Get blob :

Example :

Clear one img :

Example :

Clear canvas :

Example :

Sprite animation :

Example :

Assets :

Display loop :

Example :

Display loop with moving & sprite animation :

Example :

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

fosfo

Demo :

Installation :

Documentation :

Preload images :

Example :

My First display :

Example :

Get blob :

Example :

Clear one img :

Example :

Clear canvas :

Example :

Sprite animation :

Example :

Assets :

Display loop :

Example :

Display loop with moving & sprite animation :

Example :

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads