JavaScript JavaScript Revolution

[Trumpet63]

I have made a rhythm game engine using javascript and the library processing.js, and it’s open source, and actively in development. Here’s a demo, recorded on my very lame computer:

Track my progress

Features

- Converts any .sm text file into note information with time values in seconds
- Handles any changes in bpm without changing scroll speed
- Supports multiple difficulties in one file
- Displays notes with a vector-bases noteskin, which has potential for more visual effects
- Supports different scroll speeds
- Code infrastructure has support for more than four keys
- “Controller Visualization” displays theoretical play using a new controller concept (i.e. it's a controller with two buttons for each arrow direction, played with one button above and below each finger)
- Accepts input and allows you to hit notes (make them disappear) and it send the accuracy information to console.log

Why is This a Thing?

The point of open source projects are to push an industry or product forward, and change the status quo, this project is intended to:

- Put some skilled coders to work
- Make me better at coding, and fill my spare time
- Get people to consider the possibilities and give people on FFR something to be excited about
- Make the best dang rhythm game we can, and fill it with new, awesome features

How to Use This Program

1. Get a .sm file
2. Get an audio file
3. In code.js, edit the line: String lines [] = loadStrings("FILEPATH.sm"); to include your file.
4. In code.js, edit the line: var audio = new Audio("FILEPATH.abc"); to include your file.
5. Open main.html in your browser. Due to Chrome and IE security protocols, if you're running it locally, you need to open it in Firefox.
6. There are several options:
. Change your scroll direction by changing line 22 in code.js, either "Up" or "Down"
. Change your offset by changing the value of manualOffset on 72 in code.js
. Turn the controller visualization on or off by changing showController on line 23 to either true or false
. To set your own keys, you need to change line 343 to the key codes of your preferred setup

How to Contribute to This Project

- Download it and use it
- Post in the thread about having used it
- Post in the thread about things you do/don’t want it to do
- Try to understand the code
- Ask things when you don’t understand the code
- Write your own code, and submit it to the GitHub page
- Teach me how to use GitHub
- Help me write a better formatted OP
- Start your own project, and make an even better engine

Bugs, Issues, or Oversights


Todo

X Handle input
- Interface for selecting songs within a folder
- Interface for options menu
- Results screen
- Return to home screen after results screen
- Crazy ideas that are only relevant once the other todo’s are done, like:
. scoring
. results graphs
. support for held notes, mines, and pull-off held notes (i.e. like osu!mania)
. visual effects on note hit
. difficulty calculation algorithm

Technical Overview

View Documentation

Parses .sm file:

1. Converts text into an array of strings, one string per line of the text file
2. Finds title, artist, offset, and bpms
3. Finds the line number where the notes for each difficulty starts, and associates the names of the difficulties
4. Using the bpm and information about the measure, associates each note with a time position

Displays notes:

1. Based on the size of the display region, scroll speed, and receptor position, determines the range of times that can be displayed for a frame
2. Populates an array with the positions of the notes to be displayed on screen
3. Draws receptors and notes

Displays controller visualization:

1. Finds next note
2. Based on a set of rules, determine the point to which the hit-circle must move next
3. Determines distance of the nearest note from receptors
4. Determines the percent of the distance to the receptors that the note has traveled since it was first found
5. Display the hit circle based on that percent and its destination and origination points

[Xayphon]

vid is not available in germany

on a serious note, if I were to try to contribute to this if I find myself being bored during the semester, would picking up javascript be very hard if all I know is java and python?

would it also be possible to set up an API doc for this?

[Trumpet63]

Originally Posted by Xayphon

vid is not available in germany

Ah, that would be because the music is copywritten, I added a gif for you

Originally Posted by Xayphon

on a serious note, if I were to try to contribute to this if I find myself being bored during the semester, would picking up javascript be very hard if all I know is java and python?

I don't think javascript is inherently hard, and the library has very good documentation as well. There aren't really any specialized functions that I used, other than those from processing.js that draw the stuff.

Originally Posted by Xayphon

would it also be possible to set up an API doc for this?

I'd love to, but... what is an API doc?

[Rapta]

That's a nice song

[Xayphon]

Originally Posted by Trumpet63

Ah, that would be because the music is copywritten, I added a gif for you

thanks

Originally Posted by Trumpet63

I don't think javascript is inherently hard, and the library has very good documentation as well. There aren't really any specialized functions that I used, other than those from processing.js that draw the stuff.

I can imagine the most trouble coming from drawing on a canvas and the like. It was quite the load during my programming internship, so that's the main thing I'm anxious to learn. I definitely had more fun programming logic than draw lines xd

Originally Posted by Trumpet63

I'd love to, but... what is an API doc?

Java and Javascript both have dedicated code documentation syntax which can be converted into a fully functional API/HTML documentation within an integrated developing environment (such as Eclipse or IntelliJ in Java). It uses specific syntax used in comments in your code, for instance:



By (automatically) generating an API doc of your whole project where each function and variable has been commented/documentated, you can get a library overview of your own project similar to the official documentation of a programming language including a class tree, function overviews, and variable listings. For example:

(excerpt of some functions with the content of your comment)
(class tree)

It generally helps understanding code much better

[Trumpet63]

That's gonna be a lot of work, but I'll look into it. I'm currently using notepad++ as my IDE, and my comments probably aren't very thorough right now, nor are they in the right format. I'm sure there's a plugin that'll do something like what you're talking about.

[DossarLX ODI]

Originally Posted by Xayphon

on a serious note, if I were to try to contribute to this if I find myself being bored during the semester, would picking up javascript be very hard if all I know is java and python?

I came into my co-op June this year with only Python; Javascript wasn't that bad. It helps if you have someone to ask questions about the language.

Also, what Xayphon posted is JSDoc format. There are parameters and return values for the functions, and it helps someone get an idea of what the functions are used for. PHPStorm and Brackets are two very solid IDEs for web development.

The biggest issue I see in the current code (I know it's just starting out, but this should be resolved ASAP) is that basically everything is in one javascript file. Splitting up functionality into multiple files separates which file contains certain functionality, and it prevents code files from getting too large.

On another note, airbnb is a good javascript coding standard. Running a JS linter through that current code is encouraged.

[Trumpet63]

This is good! I will look into all these things.

[Trumpet63]

Made some changes to the OP:

- Bugs section has been moved to the GitHub page because it accomplishes the same thing much more elegantly.
- Added a link to a doc I've been using to record the development I do for the project. Visit it if the thread seems inactive.

I'm going to be working on improving documentation this weekend. After a huge amount of blood sweat and tears I found a documentation generator that supports the standard syntax, and also works. Don't suggest any others, I've tried them all at this point >_<

Here's a sample of what the documentation program generates:



It shows the documentation alongside the code, which I didn't view as an essential feature, but there it is anyways.

[Wayward Vagabond]

Oooo

[Trumpet63]

Added documentation webpage to the OP. Site is hosted through gh-pages. (how cool is that!?)

I have documentation for the big 3 modules on there. Feel free to tell me how bad it is, but now I want to focus on adding the ability to handle user input.

[Trumpet63]

BIG UPDATE!

This is actually playable now... in a sense. You can press buttons and hit notes, and they disappear when you hit them!

To set your own keys, you need to change line 343 of code.js:

var buttonsKeys = [69, 70, 75, 79];

(currently this is my setup, EFKO)

The first number is the key corresponding to the farthest left receptor, and then the next one it the second receptor, etc. To find out what key numbers your setup uses, this page will help.

Your accuracy information is sent to console.log. I use firebug to see it, there may be another way.

Please try this out, let me know if you can get it working and how it feels ^_^

[PhantomPuppy]

glad to see how much progress ur making on this trumpet good luck with the rest!

[Trumpet63]

Thank you

[lurker]

dude
h y p e

[Xayphon]

I like the progress you're making, documentation is understandable as well.

What bugs me still is the fact that everything is still procedural, meaning you have everything written in one .js file. This is fine at the beginning, but if we are aiming to move towards the functionality of the current FFR engine, a more object-oriented approach is needed for a better overview.

Also question for keyCodes: Does JavaScript also have a getKeyCode() function?
I'm asking because I just became interested in looking into making an options menu of some sort, with a way to make picking .sm files easier (which is a little bit too much for me right now, I want to get the functionality of having an options button on the interface and have something going on there done first, e.g. change your keybindings before I move to something like that). Let's hope this spontaneous interest persists for some time, provided I don't get lazy while trying to get used to JavaScript in the mean time.

I also have to check the code again and see if you already have a loop that checks for interface interaction with mouse/keys, and, if not, see where I can actually implement that without fucking up any other procedure within the code.js class.

Well, actually, would you mind if I try to use your code as a template and see what I can do? I could also try to split code.js into several classes...

And another question because I'm not really a developer but someone who's interested in coding a little bit and practicing to get better: What program do you use for coding? Do I need some specific compilation program that I need to run in cmd in order to test things out?


Edit: Yeah, I'm dumb, there are no "classes" in JavaScript like I know them from Java. I'll read up on OOP in JavaScript later, might be a good thing to just leave your code as is right now and check back later, as I'm clearly not obliged to point out errors yet without doing some read-ups beforehand, sorry for that

[Trumpet63]

Originally Posted by Xayphon

would you mind if I try to use your code as a template and see what I can do?

If you can look through my 900+ lines of insanity and find something concrete to do something with, please, do whatever you can.

Originally Posted by Xayphon

Also question for keyCodes: Does JavaScript also have a getKeyCode() function?

Essentially yes, but currently I'm using an "event listener" to call a function whenever a key is pressed or released (key down and key up). You can see this starting on line 338. I'm using this setup because it was posted on a forum as a solution to the issue that when you hold down a key, typically the OS causes multiple key presses automatically. The alternative would have been keyPressed(), which is a function in processing.js that you would normally use to handle input.

Processing.js also has mouseClicked(), which is what I would use to do anything mouse-driven. The library has a lot of features that make certain things easier. I would search 'processing.js + whatever' if you're wondering what other stuff it can do.

Originally Posted by Xayphon

you have everything written in one .js file.

I know it's awful to look at, and I haven't updated the documentation with stuff from the input update either. I have a plan though. Maybe one or two more features and I plan on breaking the code into a few modules/files/classes... whatever you wanna call them. With JS, I believe the only way to accomplish this (without getting another library) is to load your module files in the main.html, making sure that your central controller module is loaded last. Then, if you defined your modules as functions, you can call those functions in your central module. This is essentially how javascript is able to use a library, because you're calling functions in your central module that exist only in your library.js file.

Some obvious choices for modules are the .sm file conversion, and the draw notes loop that generates notePos[]... and the controller visualization, which I've now disabled by default because of the massive frame drops ;w;

[Trumpet63]

Originally Posted by Xayphon

What program do you use for coding? Do I need some specific compilation program that I need to run in cmd in order to test things out?

I use Notepad++, which is basically a text editor that has some friendly features like text coloring, auto-indenting, and stuff like that. Brackets has also been suggested to me, but I haven't gotten used to the layout. Brackets has... many more features than Notepad++ though.

Do you need cmd or anything complicated? Nope... but step 1 is downloading the game yourself and getting it to run. I don't think anyone has confirmed that they ran this program yet.

[Xayphon]

I'll try my best to find myself at home with your code, especially when I can test stuff on the fly.

The processing.js is actually really convenient. I know Java has different event listener libraries for e.g. key and mouse input, but they are seperated in different classes (e.g. KeyListener and MouseListener). We'll see how having these in one class makes things go, it'll be a new experience

As for the code, no need to rush just yet, it's not even in the stage where multiple people are working at it. It's just you atm. As long as you understand your code, you should be fine. I'll somehow get into it xd

However, if you are going to separate code.js in several modules/libraries, I'll have you know that it's probably not that easy to separate the code already at this point, as you may have to think ahead quite a bit while making sure everything still works as intended (which is the reason why I suggest that you do it asap). You could also consider making a UML diagram for better organization.

If I may recommend some brainstormed really basic modules, you could try the following:

- DrawController.js, a module that handles all the visual drawing snoop and goop like arrows and interface (this module should also be able to react to key, mouse, and more events that you might implement in the future); (gameloop goes here maybe?)
- FileReader.js, a module for reading and converting .sm files (also has influence on DrawController.js)
- Game.js, a module for game mechanics (uses converted .sm files from FileReader.js, uses Event.js, and should probably also include audio playing in here)
- Event.js module for handling key and mouse events
- Perhaps a class for initiating the game and instantiating all global varriables? (at least the constants, if they are statically accessible if that works in JS)

edit: I used Notepadd++ for HTML and CSS stuff, atm I use Sublime though. I'll try to get the game to run while I'm at it

[Xayphon]

Could you give an example how you wrote a filepath in loadString() and new Audio()? All I get is a grey square so far

edit: nvm looked into the documentation

edit2: still getting a grey square (both .sm and .mp3 are in the same directory as code.js)