fosfo
v1.0.0
Published
Petite Librairie javascript pour créer des jeux vidéo en canvas | Small canvas painting library
Downloads
14
Maintainers
jguyetReadme
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 fosfoconst Fosfo = require("fosfo");
let canvas = document.getElementById("cv");
new Fosfo(canvas)With nodejs :
$ npm install canvas
$ npm install fosfoconst { 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.
});