DEV Community: Roman Guivan

How I've deleted my git remote branch and kind of managed to restore it

Roman Guivan — Thu, 25 May 2023 14:43:20 +0000

Restoring things (branches) from git that were deleted in git, git git git git.

I'm a spaz. Last night I've felt like tidying up, so I've started dropping my branches in remote and locally. Few hours later I've realised some pull requests are gone.

So my local branch is gone, my remote branch is also gone. What do i do now?

Good solution would be to search for SHA that's printed every time you delete branch. With that you can git checkout -b new-branch-name SHA and you'll be fine. But not me, i've deleted 30-40 branches through a shell script (told you, i'ma spaz).

Next suggestion would be git reflog but that didn't do it for me either. Next is "local history" plugins in your IDE yet i had none so I'll cut straight to the chase, here's what I did:

you run git fsck --lost-found - this would print all the lost boys. Out of these i suggest you filter out ones that start with "dangling commit" (that's what i did)
Now you have hundreds, maybe thousands of commit hashes without a message that you can theoretically look into. Still bad? - Don't lose hope. What i did next was: i put all commits into a biiiig space-separated line. Very long line. And ran a shell script

#!/bin/bash

for i in [those 200 items ]do

   git show $i

done

I've re-directed output of this script into a file with > pipe, cmd+f in that huge text file and found diffs of my missing commits by names of classes and functions.
I've cherry-picked them by SHA into a new branch

Perhaps there's a better easier way, grep masters surely know, but here's what i did. Maybe it helps you too, you silly Milly.

Enjoy yo day boys and girls

Piano Rocker Alpha Testers needed

Roman Guivan — Sat, 29 Jan 2022 18:12:47 +0000

Here's another update in my never-ending story about releasing my e-piano game to steam early access.

I have 10 steam keys to give away, for people who'd like to fiddle a bit with my early release of Piano Rocker: the ultimate piano game

leave a comment in the event discussion first 5 comments get keys

If you're interested, have a steam account and an e-piano (or a midi keyboard) - join the club! Leave a comment either here or better in steam event page, i'll send you a product code + will invite you into secret piano rocker discord server.

HOW COOL IS THAT?
Pretty damn cool

a flying and rotating quadcopter in three.js

Roman Guivan — Wed, 19 Jan 2022 14:49:51 +0000

IT IS ALIVE and rolls and spins

In the previous write-up

I've started an ambitious project with drones flying anywhere i want, as long as "anywhere i want" is written in THREE.js.

I got SOMEWHERE using oimo.js rigid body physics simulation, applying lift force in update() loop, using angular velocity on rigid body to perform yaw spins.

The thing i couldn't get right was rotation around X and Z axes.

See, rigid body physics engines all provide multiple body types, two that you need to know of for getting this article are:

DYNAMIC (moved with impulses and FORCE VECTORS, collide other bodies as if in "REAL LIFE")
KINEMATIC (things just go through each other, you set their position and rotation yourself, but collision events are still fired somewhere, just saying HEY you're flying through CUBE-A, hehe)

What kind of body was my drone in part1? - If you said dynamic, you were right. And then before each render i ran:

export function updateMeshPositions(bodies) {
    let i = bodies.length;
    while (i--) {
        const body = bodies[i];
        const mesh = meshes[i];

        if (!body.sleeping && mesh) {
            mesh.position.copy(body.getPosition());
            mesh.quaternion.copy(body.getQuaternion());
        }
    }
}

keeping physics and 3d meshes in sync.

Angular force for rotation + lift as linear velocity were not all that precious of "REAL SIMULATIONS" anyways, so i have given up and switched to kinematic body type.

Forces to codes

Two things that WORKED were gravity, lift, that i got calling

const {x,y,z} = {x: 0, y: MAX_LIFT * controller.throttle, z: 0};
const upforce = new Vector3(x,y,z);
// to make Y force a RELATIVE y based on body position, not WORLD Y
upforce.applyQuaternion(body.getQuaternion());
body.applyImpulse(body.getPosition(), upforce);

and rotation via

body.angularVelocity += MAX_ANGLE_PER_FRAME * controller.yaw

I've left our LERPs for the simplicity here. So what would that be for a kinematic object?

Knowing that F = ma, and gravity is mg is enough.

 // called every frame
    update(timeSinceStart = 0) {
        const timeMs = timeSinceStart - this.timeSinceStart;
        const timeSeconds = timeMs / 1000;
        const position = this.mesh.position.clone();
        const sumOfForces = new Vector3(0, 0, 0);
        const throttleAcceleration = (controller.throttle + 1) / 2 * MAX_THROTTLE;
        const gravityVector = new Vector3(0, KINEMATIC_GRAVITY * timeSeconds, 0);
        const upforceVector = new Vector3(0, throttleAcceleration * timeSeconds, 0);
        upforceVector.applyQuaternion(this.mesh.quaternion);

        sumOfForces.add(gravityVector);

        if (!flags.isPlayerOnTheGround) {
            this.rotate(timeSeconds)
            this.moveForward(timeSeconds);
            this.moveSideways(timeSeconds);
        }

        if (controller.armed) {
            sumOfForces.add(upforceVector);
        }

        position.add(sumOfForces);

Thats your "moving up and down", covered.

then pitch, yaw and roll become just transforms on mesh

 rotate() {
        this.nextFrameRotation = { ...this.nextFrameRotation, y: MAX_YAW_ANGLE * controller.yaw };
    }

    moveForward() {
        // rotate obj
        this.nextFrameRotation = ({ ... this.nextFrameRotation, x: - MAX_ROTATION_ANGLE * controller.roll });
    }

    moveSideways() {
        this.nextFrameRotation = { ...this.nextFrameRotation, z: MAX_ROTATION_ANGLE * -controller.pitch }
    }

and once the next angles are there - i'm spinning the body

        const { x, y, z } = this.nextFrameRotation;
        let forward = new Vector3(0, 0, 1);
        let right = new Vector3(1, 0, 0);
        forward.normalize();
        right.normalize();

        this.mesh.rotateOnAxis(forward, z); //sideways 
        this.mesh.rotateOnAxis(right, x); //forward 
        this.mesh.rotateOnAxis(this.mesh.up, y); //yaw

aaand that's it mostly. For collisions i'd use a raycast in each direction. Now with no "physics" my chances of wrapping it all into a "camera controls" plugin for THREE are way higher. Sweet stuff.

Guess all that i have for you today, babies. Wait for part three, perhaps it's gonna be an exciting one.

a flying quadcopter in three.js

Roman Guivan — Thu, 13 Jan 2022 15:43:33 +0000

What's up HACKERS?

I've gotten into flying fpv drones recently

my very first cute DVRs montage here

So i got curious if i could quickly put something that resembles flying a quad, in browser, myself.

First i kinda hoped THREE.js just has QUADCOPTER CAMERA CONTROLS in /examples/ but no chance :(

Don't get me wrong, there's a whole ton of good quadcopter simulators Liftoff being my favourite the journey is the reward tho, so if you have a similar itch or just curious - you're welcome to this insane journey of mine

WORK IN PROGRESS DEMO VIDEO HERE

Things i think i'll need

renderer: Gotta be THREE.js This (and unity) are all i know
3d physics engine: Cannon.js and Ammo.js seem pretty inactive in recent years. Perhaps the boys just GOT IT DONE, and it's perfect like that. I don't know. In my search for a "more recent" development i have picked Oimo.js

The very high-level architecture of this whole thing

If you have read my best-seller "match three game tutorial" series, you know there's an update() loop for rendering the graphics. With physics engine we would essentially have two separate update loops: loop one would update rigid body physics calculations, loop two would just display them as meshes on screen (duh)

Upforce of fans, tilting - all gonna become applied forces in physics engine, yaw is just angular velocity on OY for example.

Oh, and we need to implement controls. Luckily for me gamepad api also applies to any RC radio you could connect to a PC for playing a sim, so my
LiteRadio 2 SE Radio works (as it should)

What i've put together in a weekend

Is available here Keyboard controls are difficult to wrestle with, and your gamepad axis most probably gonna be inverted (my xbox ones are) so ehh.. GOOD LUCK i guess? Also: REMEMBER THE VIDEO, remember HOW GOOD I WAS? Exactly. It's possible, just git good or something.

Things i'd like to do next:

Pitch and roll act like some super-stable mode right now, i'd like them to be more like AIR/ACRO, i.e. rotate the quad. Thing is - with angular velocities on Z and X axis it just gets real weird, so i'm still kinda working on it
sounds would be good, duh
forking https://noclip.website/ so i can fly around GTA III map, and GTA: SA map, and .. DARK SOULS map (if i want to)
getting source somewhere public
writing one more of these once at least one of the steps is done
controls settings so you can invert any axis you want for your radio/gamepad

The thing i'm most proud of

The propellers are spinning, man, Looks awesome. More throttle - MORE SPIN, gee soo cool

Hit me up if you have any questions, ANY questions, i mean it! I'll try to answer them all.

for example:

Q: HEY ROMAN, WHATS UP WITH PIANO ROCKER?
A: SOON

Sneak'n'sort tabletop game! (Sneak´n´Sort)

Roman Guivan — Mon, 03 Jan 2022 17:07:24 +0000

My good friend Rike funded her tabletop game

The game is called Sneak´n´Sort and the first 50 batches are already produced and being sent to the backers this exact moment!

I've also got this sweet one-pager on netlify up, so peeps can track how the things are going.

If you're into tabletop games, or the name did intrigue the sneaky part of you - please check it out, and leave your email for future updates, via the page. Rike will also reply for all the feedback you've sent to sneaknsort@gmx.de, no lie!

There's also a technical aspect to this whole write-up: netlify if pretty damn cool for a 100% free kinda thing!

match 3 game in pixi.js 103: JUICE and POLISH

Roman Guivan — Sun, 12 Dec 2021 17:11:37 +0000

After PART 1 and PART 2 we're left with an app that has the humble beginnings of a match-three game, but still won't be sufficient to get you a PASS if it was any kind of assignment

Let's add some sprinkles here and there, once you're done - the result might end up being somthing like this (or way better, it's all in your hands, really!)

Animations

The easiest cheapest way to animate sprites without additional animation frames (which i don't have) is to change sprite's properties over time. Position, scale and tint are my TOP-3. If i would like my animals to EXPAND a bit, after they're added onto the screen, something like this would totally do:

  function animate(sprite) {
      setTimeout(()=> sprite.scale.set(0.9, 0.9), 100);
      setTimeout(()=> sprite.scale.set(1.1, 1.1), 200);
      setTimeout(()=> sprite.scale.set(1.0, 1.0), 300);
  }

The results would be a bit crude and jerky, but you get the idea. Here's a 60fps version of this same function

  function animate(sprite, scaleTo, timeSeconds) {
      const frames = timeSeconds * 60, timePerFrameSeconds = 1 / 60;
      for (let i=0; i< frames; i++) {
         const frameTimeSeconds = timePerFrameSeconds * i;
         const scale = i / frames * scaleTo;
         setTimeout(()=> sprite.scale.set(scale, scale), frameTimeSeconds * 1000);
      }
  }

Again, crude, requestAnimationFrame would perform better than setTimeout, I'm using this code for explaining purposes only.

What we achieved here is called linear interpolation. We gradually changed value of sprite scale, over time, till sprite.scale became scaleTo. While linear interpolation is perfectly fine, human eye finds these most tasteless and dull. Tween.js to the rescue!

Tween.js will calculate interpolated values for different kinds of easing functions, so instead of linear - your animated scaling can be exponential or use one of many other functions available.

You can check the animations (or just tweens) i have used in the game here For example, this same scale animation looks like this:

    export function popIn(sprite, time = 300) {
const props = { x: 0.8, y: 0.8 };
new TWEEN.Tween(props)
    .to({ x: 1, y: 1 }, time)
    .easing(TWEEN.Easing.Bounce.Out) // Use an easing function to make the animation smooth.
    .onUpdate(() => {
        sprite.scale.x = props.x;
        sprite.scale.y = props.y
    })
    .start()
  }

Now add popIn(sprite); somewhere after you have added it onto screen with this.addChild(sprite) and you're golden! Things "pop-in" nicely. I suggest you try animating sprite.tint too, to add some color to it.

IMPORTANT NOTE
Tween.js has an .update() function that has to be called too, with a timestamp. PIXI's dt, or one from requestAnimationFrame won't do. What does work for me, is passing performance.now() value. Here's the place where i do it in my implementation

Sounds

You can write your own wrapper around HTML5 audio, insert an element, listen to load event and so on, but for practical purposes i suggest you give howler.js a try.

Get some free sounds from https://freesound.org/, organize them into your static assets folder, then you can create a separate audio.js module and trigger sound effects as exported members

Some looping background theme music might be a good idea too.

Once again the source of the example can be found here or just play the deployed version

If you have followed this series, and actually made something of yours - post links or your questions in the comments bellow.

I think at it's current state the repo already shows the basics of making a match-three game in PIXI.js. A losing condition and some additional scenes like a menu and a game over screen still can be added. If you're interested in these being explained - leave it in the comments below too.

For now - i'm leaving this series here, hope you liked it. Roman G - signing off

Piano Rocker dev diary 1: What is up

Roman Guivan — Wed, 24 Nov 2021 12:35:51 +0000

I've been working on this little idea of mine, a game where you play piano for at least half a year now.

It all started in may 2021 when i've figured WEB Midi - exists. And that could allow me to listen to midi keyboard inputs, so if i could render a rock band 3 chart (which is a midi file + ogg stems) for PRO KEYS MODE - that would be freaking great.

3 abandoned prototypes in
1 insanely viral reddit post with 25 upvotes
1 steam storefront page published

and many months of dread since, a lot of things are done, but nothing is really DONE done.

To put my mind elsewhere, but not too far away I start this "PIANO ROCKER DEV DIARY" series, where i blabber about technology, development, music games and yknow.. whatever comes to my mind.

Case study of the day:

Rendering musicXML

Sheet music - exists, like it or not, playing keyboard is very tightly coupled with reading sheet music. All the exceptions, jazz legends who all "learnt it by ear", just make the overall rule stronger. I must render sheet music in some shape or form :(

Trust me, i did try to dodge this bullet, but I don't think i can, not anymore.

There are other "alternative" notations worth mentioning. Most curious ones are ABC Notation, the top-down charts a-la keyboardmania that were made popular by Synthesia and the new-emerging craze of VIRTUAL PIANO (playing piano on ascii keyboard, it is a thing, people actually do it. Even crazier, they do it in ROBLOX

I have seen yousician, simply piano, pianoo and such, all rendering sheet music, and after a bit of digging in local cache of yousician windows app i can assure you - they all parse music XML.

Biggest public source of sheet music i'm aware of, provides scores downloadable as PDF (nope), MIDI (seems really good, HEY, i already have it implemented, but trust me, it's not, i might cover this as separate post someday), their proprietary format AAAND Music XML.

It's widely adopted, it's open as much as TEXT FILES can be, it's free - i just have to learn how to interpret it and draw notes. Just like all these guys already did, perhaps a bit more lively (hopefully).

I'm still stuck with this shit, real stuck, but here's what i have learnt so far:

*.mxl files arent XML files, they are ZIP files with XMLs in them. jszip to the resque, this wasn't too hard
most probably you'll want to transform xml to json, if you do javascript like i do, that's trivial too, buncha libs out there, i use fast-xml-parser for now
i render things in PIXI.js, so for that i would need to draw all the cute 🎼🎼🎼♫♫♫s. Good news - every unicode font has a range for music symbols. Bad news - that set isn't a complete set and you can't do much with it. All music software uses special MUSIC FONTS (rendering all as text symbols)
There are buncha music fonts, some of them - can work in browser, but good luck figuring out what's there and what's not, how symbols are mapped and such. I have spent half a day trying different free fonts, till i found out about SMUFL a standard for music fonts. Also check their brief history of music fonts its a great read!
For a free to use in commercial project font IMPLEMENTING SMUFL - i chose Bravura it works, using reference from smufl website it's possible to map anything you can imagine to a unicode symbol. Lets say you need a g-clef, go to this page, g clef is U+E050 (and U+1D11E), great, create your PIXI.Text('\uE050') - here's your g-clef (if you managed to preload the font)
preloading fonts is a bit of a pain

so far i havent even touched actual music XML contents yet, right? Oh shit! Here we go again!

Notes have DURATIONS. Durations are not measured in TIME, it's sheet music, right? We have quarter notes, half notes, sixteenth notes, 1024th notes and so on and so forth. If you want to have anything interactive - you would need to convert these to TIME. Now here's a question, HOW WOULD YOU DO IT?

how would you convert MUSIC NOTES to time and duration (in seconds)

so your typical music xml measure.note would have pitch, consisting of step (of chromatic scale, C, C#, D, whatever it is) and octave (int).

Then there's type and duration. Type is within: [whole, half, quarter, .... 32nd, 64th ..... 1024th and so on ]. duration is an int number.

Being an idiot i am, i didn't read the spec, i just debugged my twinkle-twinkle-little-star chart and decided empirically that 1 is quarter note, 2 is half, 4 is whole. Twinkle-twinkle never went smaller than quarters, worked great. I even wrote a string to int switch-case, basing time strictly on TYPE instead.. DUMB.

Hard truth incomming

In 60BPM (beats-per-minute) you'll hear/play 60 BEATS in one minute. One beat is one quarter note in 4/4 (or 3/4, or anything/4). Which means 1 beat in 4/4 in 60bpm is exactly one second. One bar in 4/4 60bpm is 4 seconds, then, one bar in 3/4 60bpm is 3 seconds and so on.
Every MEASURE (parent node of notes) has attributes, one of which is DIVISIONS. DIVISIONS is number of divisions PER QUARTER NOTE. ( the PQ in PPQ for my cool midi gang ).

This number is the smallest integer that can be divided without .decimals for the smallest note division present in sheet. So if all your notes don't go smaller than quarter notes = DIVISIONS=1 is good. Quarter is 1, half is 2, whole is 4. If you have 8th notes - DIVISIONS would be 2, if you want to have 16th notes - 4, 16th and TRIPLETS - something that can be divided by 2 AND 3 would be needed (24 is good)

Now lets take this example from https://www.w3.org/2021/06/musicxml40/tutorial/midi-compatible-part/

<attributes>
    <divisions>24</divisions>
    <key>
      <fifths>-3</fifths>
      <mode>minor</mode>
    </key>
    <time>
      <beats>3</beats>
      <beat-type>4</beat-type>
    </time>
  </attributes>

....

<note>
    <pitch>
      <step>G</step>
      <octave>4</octave>
    </pitch>
    <duration>12</duration>
    <lyric>
      <syllabic>single</syllabic>
      <text>Dans</text>
    </lyric>
  </note>
  <note>
    <pitch>
      <step>C</step>
      <octave>5</octave>
    </pitch>
    <duration>8</duration>
    <lyric>
      <syllabic>single</syllabic>
      <text>un</text>
    </lyric>
  </note>

What we know about time so far, is: 3/4, divisions = 24 divisions per quarter note. Let's say, for this example BPM = 120.

Now how long exactly does first note play?

Divisions(perQuarterNote) = 24, BPM = 120, Duration = 12

timePerOneDivison = (60 / bpm) / Divisions

and then duration of this note, in seconds, is

duration * ((60 / bpm) / Divisions)

12 * ( (60 / 120) / 24 ) = 0.25 sec.

Based on which stave the note is (left or right hand) you add this duration to your gTime or fTime variable, and that would become the start time of next note. Cool right?

Kinda.. Since I'm also "playing" the notes using the glorious Tone.js something with my math is still not quite right, but visuals look correct, so i blame my audio code / use of transport for now.

I hope this helped somebody. As a final note - here's how it all looks like in current prototype (sheet music supports is a project separate from mainline game for now, i'll merge it in once it's done, or merge main game into this small clean boy.. )

Google Lighthouse failing with NO_LCP error

Roman Guivan — Mon, 08 Nov 2021 13:40:42 +0000

Ok babies, so you've all googled REAL HARD, and all they told you was "clean your cache/go incognito mode". Thanks a lot, dude from medium.com - that was quite an insight, didn't help me, unfortunately.

You just keep staring into:



Largest Contentful Paint
Error!
Something went wrong with recording the trace over your page load. Please run Lighthouse again. (NO_LCP)

scratching your head and thinking what else could have gone wrong. I'll give you a new fresh lead to check!

Run lighthouse cli against your page (its available as a docker container too, so there's no excuse no to try it). If today is your lucky day, you'll see some text, looking suspiciously RED there:

Whoopsy-poopsy, my friend! As of today, there's a still an open bug in chromium that i have stumbled upon in lighthouse github issues

Animating opacity from 0 to 1, as well as animating things off-screen - might cause chrome thinking that the "Largest contentful paint" will never happen, and quit the lighthouse check.

Unlike FIRST contentful paint - there's no config to offset it. maxWaitForFcp - exists, maxWaitForLcp - doesnt. You can play with non-zero values for pauseAfterFcpMs, networkQuietThresholdMs, pauseAfterLoadMs, cpuQuietThresholdMs - all of which did not help me.

What i did next, was searching for opacity: 0 and transition in our sass files - dropping those did not help either.

The culprit was in the in-house design library we used, that had a nifty class for react-like skeleton-animations.



background-size: 400%, 100%;
animation: xxxx 6s linear infinite;

@keyframes xxxx {
  0% {
    background-position: 200% 0%;
  }
  100% {
    background-position: -200% 0%;
  }
}

One find-replace of all mentions of this class with "", and one rebuild later - i had my metric displayed as it should.

Send virtual beers if that was it, i'll accept them all.

match 3 game in pixi.js 102: Gameplay

Roman Guivan — Thu, 21 Oct 2021 11:54:45 +0000

Once you've finished this long-read, your game will become playable! The hype is real!

This is a second article in a three-part tutorial. If you skipped the first part - catch up here

Selecting a sprite

Most basic interaction for a match-3 game would be selecting an animal and making it trade places with neighbour. Thats what we are gonna implement right now!

To make a sprite "interactive" in pixi, you set it's interactive attribute to true. This allows you to add a click event.

  sprite.interactive = true;
  sprite.on('pointerdown', (e) => {});

Easy as that! If you want the cursor to change to pointer, add

  sprite.buttonMode = true;

as well. The requirements for the next task are simple:

if there is no selection, clicking on an animal makes it "selected", which means it changes it's scale, or tint (like in previous animation example)
if there's already a selection - two animals trade places

Now please stop reading and go solve it yourself, i'll wait!

In case you got stuck somewhere: here is my solution, as diff on github

Sprites are now stored in a two-dimensional array, and every second click - just makes two selected elements trade their x and y coordinates, both on-screen and in the array itself.

To make sure I have not forgot to swap the sprites in array too, i debugged a bit with a trace function executed each time i click:

  function printSpriteNames() {
      for (let y = 0; y < TILES_OY; y++) {
          let row = '';
          for (let x = 0; x < TILES_OX; x++) {
              row+=`${sprites[x][y].name} `;
          }
          console.log(row);
      }
      console.log('------');
  }

We can chose any two sprites so far, not just the neighbours - we'll fix this later on.

Detecting groups

The player wants to group animals in lines of 3 and more, horizontally or vertically. Once a line like that is formed - the group is destroyed, and new elements are added onto the screen.

Seems like the theme of this article is iterating arrays, everyone's first programming assignment ever. To make it more interesting, I suggest we write our pattern-recognition util using TDD.

Unit-tests can be cool when used wisely. In this example i'll use Jest. If you haven't worked with Jest or unit-tests before (or had bad confusing experiences in the past) - no worries, i'll cover all the basics right now.

To add jest, run npm install jest --save-dev
Once jest is installed - add a test script to your package.json

    "scripts": {
      "test": "jest",

In our /scripts folder i'll create two new files, next to index.js. patterns.js and patterns.spec.js. First one being our "pattern-matcher" implementation (utility function that would find patterns on sprites array) and second - the unit-test for it!

Here's how the files look like As you can see, pattern-matcher implementation just has three empty methods for now, that are supposed to find groups of repeating elements horizontally and vertically (third method would aggregate results of first two). Whats more interesting is the .spec.js file now.

Inside the describe('') block we have our first test-case

  it('reads 3 and more in a horizontal line', () => {
     expect(matcher.matchGroupsHorizontal(TEST_GROUP_0).length)
     .toBe(0);
     expect(matcher.matchGroupsHorizontal(TEST_GROUP_1).length)
     .toBe(0);
  })

In our sprites array, each column is represented as nested array, so for a field 3x3, a horizontal group of 3 'cow' sprites in first row would look like

  const TEST_GROUP = 
  [
     ['cow', 'cat, 'doge'],
     ['cow', 'rhino', 'frog'],
     ['cow', 'snake', 'frog']
  ]

It's a bit confusing, but array values are flipped 90 degrees compared to screen representation. I did it in favour of storing coordinates as [x][y] and not other way around.

Running npm test would result in

TEST_GROUP_1 has the row of matching values, but there is no implementation to find it yet! Go to pattern.js and implement it yourself. The format i chose for "groups" looks like this:

  [
     { name: "cow", points: [{0,0}, {1,0}, {2,0}]}
  ]

It's completely up to you HOW you chose to solve this problem. You can use regular expressions or implement some fancy algorithm. I recommend you to take this unit test and implement such a patterns.js that would make it pass.

In case you're lost: my dumbest solution is available here

Once you're done - it's time to use our "well-tested" :p logic in the game.

Matching groups

Our index.js was in a sad sad shape for a 100-lines file. I've extracted some of the blocks into separate functions so the file is a bit easier to navigate. Now to the final task of this chapter:

On first render AND after each swap run pattern-matcher. If there are groups found:

delete each sprite from the group
replace these spots with new animals

Use app.stage.removeChild to remove sprites and our pattern matcher for pattern matching. Another pro-tip - limit the number of possible random animals to 10 or less, not to animals.length, otherwise finding 3 of a kind will become hard.

You can find my solution here. Congratulations! You've made it! It's a match-three game! Well, not quite, not yet. There are still things that have to be done, to make it a real game:

there has to be a condition on which the player LOSES the game
"destruction" and "creation" of our sprites have to be animated, at the moment it all looks too instantaneous
sound and visual effects have to be added to make it all feel really interactive.
- ah and another round of pattern-matching has to be ran after new elements are inserted

Guess what? - thats exactly what we're gonna do in part three! See you there, real soon! And for now: enjoy

If you haven't whishlisted PIANO ROCKER on steam yet - do it right now! (or i'll call the police)

match 3 game in pixi.js 101: Sprite basics

Roman Guivan — Wed, 06 Oct 2021 10:46:44 +0000

YouTube:

Match 3 games are on average at least 80% more exciting to develop compared to what you're actually paid for (unless you're developing a match 3 game for living, of course). So i say lets just make one, for the science.

This ain't a "definitive guide", more like a "your first match 3 game in pixi" or "your first game ever".

In this part#1 we'll build an animated screen with buncha animal faces tiled

Step 1 - Get ready

Just clone my repository and rewind to {1} commit.

git clone https://github.com/guivanrv/pixijs-match-three-example.git 
git checkout @{1}

You'll have a webpack-starter with 'pixi.js' module installed and some graphic assets from kenney.nl unpacked into /public/images folder.

Script in script/index.js is just a starter example from PIXI.js npm page

Stage, Sprite and Update-loop

Of course you totally can develop a match 3 browser game, where your bejeweled GEMs are just

elements, but for the sake of our 2d animations fluidity and performance, I'll use pixi.js here. Pixi will render graphics into canvas, using webgl-based renderer that would ensure all your visual transforms are calculated and rendered lightning fast.

Since this might be your first game i'll quickly explain the basic terms here.

What is a "stage"

A stage is a top-level root container. Think "scene" from Flash or Unity, or your document.body if we make analogies with DOM.

What is a "sprite"

A sprite is a 2d raster image. Like a div with fixed size and position-absolute-like placement. Except it's better than div because it can transform and resize really fast. Like 60 times per second and faster (if you disable vsync in your browser).

What is an update-loop

Now this is a big one. I'm sure you've played a videogame at least once, before. You press a button - shit happens on screen - you're the one who caused all of this to happen and it makes you feel truly special and very engaged, right?

There's an update loop in the heart of each and every game. A function that executes 60 times per second or more, usually clears and completely re-paints the screen 60 times per second or more, reads your inputs and so on and so on.

One re-paint is one FRAME of both rendering, and input reading. Why 60? - Because 60 is considered to be "smooth" and to feel "interactive". It has been 40 years ago, it still is. Going more frequent than 60 in browser is possible, if you disable vsync, but not a common thing yet.

in earlier days people literally used

const fps = 60;
setTimeout(function update(){...}, 1000/fps)

But of course if your update function was too computations-heavy - everything de-synced and just played horrible. Without any libraries today you can use requestAnimationFrame. Think of it as a 60 fps setTimeout, that can "slow down gracefully" in case anything computation-heavy happens. Ah, and also it won't run when the tab aint active, unlike setTimeout.

Many libs provide a Timer abstraction, in Pixi it's called Ticker

Theory class is over, it's only code from now on. Open scripts/index.js, let me walk you through this real quick:

const app = new PIXI.Application();
document.body.appendChild(app.view);
const loader = PIXI.Loader.shared;

creates a pixi app, and adds it's stage's to document.body.

loader.add('bear', 'public/images/bear.png').load((loader, resources) => {

is async image pre-loader.

const bear = new PIXI.Sprite(resources.bear.texture);

is you creating your sprite, and

app.ticker.add(() => {
     // each frame we spin the bear around a bit
    bear.rotation += 0.01;
});

is your update loop.

Task 1: create a 6x4 grid of randomized animal sprites.

There's plenty of other cute animals aside of bear.png under public/images/. I want you to modify the code, so it draws a 10x10 grid of random animals. I suggest you do it yourself, and in case you're stuck - come back to check my solution.

Few hints:

loader.add has an array overload
- every Sprite, like our bear, has
bear.x
bear.y

Both are number values, hope you got the idea.

Now stop reading and just do it!

Done? If you're not - no worries, here's how i would solve this.

Lets define some constants:

const animals = ['bear','buffalo','chick','chicken','cow','crocodile','dog','duck','elephant','frog','giraffe', 'goat','gorilla','hippo','horse','monkey','moose','narwhal','owl','panda','parrot','penguin','pig','rabbit','rhino','sloth','snake','walrus','whale','zebra'],

TILES_OX = 6, TILES_OY = 4, SPRITE_WIDTH = 138, SPRITE_HEIGHT = 138, sprites = [];

Here's a tip how to not type all 40 animals manually:

ls -l &> out.txt

and then just paste the contents between two square braces, multiline edit first quotation mark, and find-replace '.png' with '",' for second one.

On windows you can use dir instead of ls, and > instead of &>. Back to displaying animals in a grid:

loader.add(animals.map(str => ({name: str,url: `public/images/${str}.png`}))).load(
(loader, resources) => {
for (let x = 0; x < TILES_OX; x++) {
    for (let y = 0; y < TILES_OY; y++) {
        const randomAnimal = animals[Math.trunc(Math.random() * animals.length)];
        const sprite = new PIXI.Sprite(resources[randomAnimal].texture);
        sprite.anchor.x = 0.5;
        sprite.anchor.y = 0.5;
        sprite.x = x * SPRITE_WIDTH + SPRITE_WIDTH/2;
        sprite.y = y * SPRITE_HEIGHT + SPRITE_HEIGHT/2;
        app.stage.addChild(sprite);
        sprites.push(sprite);
    }    
}
});

One thing to explain here: sprite.anchor is the "center" of the sprite. If you want {x:0, y:0} to be TOP LEFT POINT of sprite: anchor is 0,0. If you want bottom right to be the "start" for positions it's 1,1. The benefit of using 0.5 0.5 will show mostly in animating: it's way more common to rotate a sprite around it's center, or scale it around the center. Also the images we have arent all equal in size, due to some animals having ears and horns.

By fixing the width to 138px and using center as anchor - we can place them in a grid with equal spaces (ears will overlap with neighbours, so what :p )

But of course, since now 0,0 of a sprite is it's center - all positions have to be offset by half of a sprite width or height.

Now remember the ticker we had, the one that rotated sprites?

Of course you can

sprites.forEach((sprite) => /*rotate them*/)

again, but i have a cooler effect to suggest!

Each sprite has scale.x and scale.y, where 1 is 100% scale. So to make our sprites zoom in and out randomly we can

// Listen for frame updates
app.ticker.add(() => {
    sprites.forEach((sprite, index) => {
        const scale = 1 + 0.1 * Math.sin(Date.now() / (400 + index * 10));
        sprite.scale.x = scale;
        sprite.scale.y = scale;
    })
});

If you havent seen the trick with sin / cos before - i'm willing to defend it right here in this article too! Sin and Cos are cool! You give them any value - they'll return you a value from -1 to 1, so it's a perfect function for animating some cycling process. Swings of a pendulum, a spring jumping back and fourth - all easily doable with sin.

Sin of Date.now() would result in scale going from 0 to 2, which is too EXTREME. I'd like it to stay whithin 0.9 ~ 1.1, thats why its 1 + sin of time * 0.1;

And sin of time changes just too fast, so you can divide Date.now() to "slow things down a bit"

YouTube:

In the second part we'll implement "selecting" a tile, and making it swap places with another one. Till then - make it a 200x200 grid and set the canvas in the background of your website. HYPNOTIZING af.

As all of my writing, i devote this to the one and only Barbara

And another shameless plug, if you have read this and you liked it - whishlist my game Piano Rocker on steam. It comes out to early access beginning of next year and lemme just say it - there's a lot of PIXI in it too!