pixiJS

by realhunts

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.2.3/pixi.js"></script>
<div>
  oswald
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Oswald');
div {
  font: 24px 'Oswald';
}

JavaScript

//Aliases: this is shorthand
var Container = PIXI.Container,
  autoDetectRenderer = PIXI.autoDetectRenderer,
  loader = PIXI.loader,
  resources = PIXI.loader.resources,
  Sprite = PIXI.Sprite;

//Create a Pixi stage and renderer and add the 
//renderer.view to the DOM
var interactive = true;
var stage = new Container(interactive),
  renderer = autoDetectRenderer(500, 500, {
    antialias: false,
    transparent: false,
    resolution: 1
  });
document.body.appendChild(renderer.view);

//load an image and run the `setup` function when it's done
loader
//add the font you want to use below:
//  .add("Oswald", "https://fonts.googleapis.com/css?family=Oswald")
//also add images by:
//.add("images/beerCup_logo.png")
  .add("https://cdn.glitch.com/72c38476-bb33-4035-97f0-b7fc09249ce9%2F5a06e449dc8ea3f788ef0387be408eb2.jpg?v=1577684298116")
  //creates a progress statement that will check to see if assets are loadin
  .load(loadProgressHandler);
//.load();

//this function will check to see if all assets are loading to the stage. loader 
function loadProgressHandler(loader, resource) {
 



  var button = new PIXI.Sprite(loader.resources.background.texture);

    // Center the sprite's anchor point
    button.anchor.set(0.5);

    // Move the sprite to the center of the screen
    button.x = app.renderer.width / 2;
    button.y = app.renderer.height / 2;

 stage.addChild(button);




function gameLoop() {
  requestAnimationFrame(gameLoop);

  

  renderer.render(stage);
}
gameLoop()

}
//cup:
// function setup() {

//   //Create the `cup` sprite:
//   cup = new Sprite(resources["images/beerCup_logo.png"].texture);
//   stage.addChild(cup);

//   //Initialize the cup's velocity variables - not needed just good example of what velocity does
//   cup.vx = 0;
//   cup.vy = 0;

//   //Start the game loop
//   gameLoop();
// }

//animating an image example: NOT NEEDED - just good example
// function gameLoop(){

//   //Loop this function 60 times per second
//  ...