loadingMultiplesSounds

DDv2FF

Hi!! I would like to have a nice "loading" animation at the start of my game, andd I dont know how to make a single variable to represent the complete loading of the files. I could write this for a single sound or image for example:

 let sound1, able;
function setup(){
  createCanvas(1000, 650);
  able = false;
  sound1 = loadSound("sound1.mp3", soundLoaded);
}
function soundLoaded(){
  able = true;
}
function draw(){
  if(!able){
    loadinganimation();
  } else {  starGame(); }
}

But what if I need to load a Lot of images and sounds ? How can a I make that "able" variable true jsut at the end ? Helpp !! Thanks

GoToLoop

How about some loading counter for it as well? *-:)

// Forum.Processing.org/two/discussion/27869/loadingmultiplessounds#Item_1
// GoToLoop (2018-Apr-28)

"use strict";

const SOUNDS = 5, IMAGES = 12, FILES = SOUNDS + IMAGES,
      SND_NAME = 'sound', SND_EXT = '.mp3',
      IMG_NAME = 'image', IMG_EXT = '.png',
      sounds = Array(SOUNDS), images = Array(IMAGES);

let loads = 0, done = false;

function setup() {
  for (let i = 0; i < SOUNDS; )
    sounds[i++] = loadSound(SND_NAME + i + SND_EXT, countLoads);

  for (let i = 0; i < IMAGES; )
    images[i++] = loadImage(IMG_NAME + i + IMG_EXT, countLoads);
}

function draw() {
  done? game() : loadingScreen();
}

function countLoads() {
  done = ++loads === FILES;
}

function loadingScreen() {
}

function game() {
}

GoToLoop

A more advanced loading screen approach via preload() + id=p5_loading: :ar!

1. https://p5js.org/reference/#/p5/preload
2. https://GitHub.com/processing/p5.js/wiki/p5.js-overview#loading-screen
3. https://GitHub.com/processing/p5.js/issues/2729

DDv2FF

  sounds = Array(SOUNDS), images = Array(IMAGES);

Why you did that ? What for ¿ It specify the length ?

  done = ++loads === FILES;  

I didnt know that it was posible.. I read the method with "id=p5_loading", and its cool, but I prefer to make my own animation . Thank you so much !!

GoToLoop

done = ++loads === FILES; is similar to if (++loads === FILES) done = true;

Why you did that ? What for ¿ It specify the length ?

B/c the length of those 2 arrays is already pre-determined by their corresponding constants SOUNDS & IMAGES. :\">

And b/c instantiating a JS Array via a constructor is the closest on how we do in Java: ~O)

static final int IMAGES = 12;
final PImage[] images = new PImage[IMAGES];

You can check the many ways to create JS arrays on these 2 links below: O:-)

1. https://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
2. https://Developer.Mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray