Hi all,

I am Keith, I am a real newbie. Its good to be here.

I am new to coding. I am currently working my way through Game Design with HTML5 and Javascript by Rex Van Der Spuy.

I have a real newbie question.

Can I mix the vanilla java script techniques I am learning with something like pixijs.

What I mean is can I write my code in vanilla and then mix in pixijs for animating a sprite walk cycle or must I write the whole game in pixijs?

I hope that makes sense.

Keith

https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript​

Read this:

Starting with pure JavaScript is the best way to get a solid knowledge of web game development. After that, you can pick any framework you like and use it for your projects. Frameworks are just tools built with the JavaScript language; so even if you plan on working with them, it's good to learn about the language itself first to know what exactly is going on under the hood. Frameworks speed up development time and help take care of boring parts of the game, but if something is not working as expected, you can always try to debug that or just write your own solutions in pure JavaScript.

Later this: https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser​​​

Or learn Pixi.js instead of Phaser. I think it is better to learn pure JS and basics of Canvas API first. It is good to study how to write shaders in pure WebGL too (GLSL). One of the best book for beginners: https://sites.google.com/site/webglbook/​​ You can write shaders for Pixi.js and Phaser later. It can help to solve a lot of problems. But now just practice with very simple games like: Pong, Snake, Breakout and so on.

Learn everything what do you like and have fun.

TheCrock said:

can I write my code in vanilla and then mix in pixijs for animating a sprite walk cycle or must I write the whole game in pixijs?

Yes! You can mix and match js however you want! Some frameworks make it more difficult, but it depends on what you're using them for and in what combination. You're always free to add something extra though. (and often you have a lot of control in the upper parts of your code anyways)

Pixi.js was rewritten in TypeScript in this year: https://github.com/pixijs

It is great that Pixi.js has native supporting for TS. My opinion that TS is better for games and especially for large projects. But Pixi.js has a very small community: https://www.html5gamedevs.com/forum/15-pixijs/​ Only one person is active in Pixi.js community. It is ivan.popelyshev. He is one of the main developer of Pixi.js. There is only one old book about Pixi.js and Rex Van Der Spuy is author of this book: https://www.amazon.com/Learn-Pixi-js-Create-Interactive-Graphics/dp/1484210956​ This book contains only 234 pages. It is a very short book.

If you need a framework for 2D games with big community I recommend Phaser. Because it has a very large community. It supports TypeScript and JavaScript. There are more books about Phaser (and video courses). But I like to write my simple games for practice in pure WebGL/TypeScript and OpenGLES/QtC++ (for native Desktop, Android/iOS). It allows me to use same things for 2D/3D and for Desktop/Mobile/Web.

Start using Canvas API here: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial​​​​

Canvas API like old OpenGL v1.5. You can translate code from old OpenGL to Canvas JS. For example, Python Snake Game

If a topic for programmers do not have any code it is mean that it is a bad topic. What should we have to make a simple game? We need:

1. text
2. geometry primitives

How can I build native applications for Desktop and Mobile? I can use Qt C++. Code will be the same for Canvas API (JavaScript) and QPainter (Qt C++). Qt allows to build for Desktop and Mobile very quickly. Qt is very fast because it is 100% C++. But JS allows to run apps by one click. We can build three versions of games: Web, Desktop and Mobile. Just compare how similar JS (Canvas API) and Qt C++ (QPainter):

Run in browser: https://plnkr.co/edit/9hkYxAySNjtyr1PZ?preview

JavaScript ES5, Canvas API:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="renderCanvas" width="300" height="300"></canvas>

    <script>
        var canvas = document.getElementById("renderCanvas");
        var ctx = canvas.getContext("2d");
        // Background
        ctx.fillStyle = "#c8c8c8";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        // Ellipse
        ctx.fillStyle = "#67aa55";
        ctx.beginPath();
        ctx.ellipse(150, 95, 130, 75, 0, 0, 2 * Math.PI);
        ctx.fill();
        // Rectangle
        ctx.fillStyle = "#4e52da";
        ctx.beginPath();
        ctx.fillRect(70, 70, 160, 50);
        ctx.fill();
        // Text
        ctx.fillStyle = "white";
        ctx.font = "24px serif";
        var text = "Hello, World!";
        var halfW = ctx.measureText(text).width / 2;
        var halfH = ctx.measureText("H").width / 2;
        console.log(halfW + ", " + halfH);
        ctx.fillText(text, 150 - halfW, 95 + halfH);
    </script>
</body>

</html>

Qt C++, QPainter:

#include <QApplication>
#include <QWidget>
#include <QPainter>
#include <QDebug>

class Widget : public QWidget {
public:
    Widget(QWidget *parent = nullptr) : QWidget(parent) {
        setWindowTitle("QPainter Qt C++");
        resize(300, 300);
    }
private:
    void paintEvent(QPaintEvent *event) {
        Q_UNUSED(event);
        QPainter qp(this);
        qp.setBrush(QBrush(QColor("#67aa55")));
        qp.drawEllipse(20, 20, 260, 150);
        qp.setBrush(QBrush(QColor("#4e52da")));
        qp.drawRect(70, 70, 160, 50);
        qp.setBrush(QColor("#fff"));
        QFont font = qp.font();
        font.setPixelSize(24);
        font.setFamily("serif");
        qp.setFont(font);
        qp.setPen(Qt::white);
        QString text = "Hello, World!";
        QRect br = qp.boundingRect(0, 0, 150, 30, 0, text);
        int halfW = br.width() / 2;
        int halfH = br.height() / 2;
        qDebug() << halfW << ", " << halfH;
        qp.drawText(150 - halfW, 95 - halfH, 150, 30, 0, text);
    }
};

int main(int argc, char *argv[]) {
    QApplication a(argc, argv);
    Widget w;
    w.show();
    return a.exec();
}