The golden orchestra playing a rhythm game together.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
music
raw_sprite
release
sound
src
third_party
web
index.html
make_release.sh
readme.md

readme.md

Celebrate

screenshot Let's celebrate! together with the golden orchestra. Play now!

tags: 喜氣洋洋, 高登, 遊戲, 太鼓

how to play

  • When not started, press keys on the keyboard according to the labels.
  • When started, use v,b and space to hit the incoming bits.
  • you can append ?HTML5 (upper case) to the end of url to switch to HTML5 audio backend. default backend is flash via SoundManager2.
  • p can pause the game
  • disable annoying Firefox quick find by unchecking "Search for text when I start typing" in Options > Advanced > General

beat composer

This project comes with a modest but powerful beat composer. beat composer

features

  • seeking on time line

  • live recording and playback of beat sequences

  • fine tune beat position by mouse

  • add, move or delete lyrics

    while dragging a lyrics or beat element, press d on keyboard to delete.

  • layers: beat sequences are recorded to a new layer each time, and that layer can be deleted if it is unsatisfying.

    tick the checkbox of the layer and a button delete layer will appear.

  • autosave current editing work

changing the drum set

modification of the drum set is done by editing the HTML section of editor.html. find the section

<div id='drumset'>
	<div id='dr' key='r' sound='AMB_HTM' radius='35' img='drum.png'><br>&nbsp;&nbsp;&nbsp;r</div>
	<div id='dt' key='t' sound='AMB_MTM' radius='40' img='drum.png'><br>&nbsp;&nbsp;&nbsp;t</div>
	<div id='dy' key='y' sound='AMB_FTM2' radius='40' img='drum.png'><br>&nbsp;&nbsp;&nbsp;y</div>
	<div id='du' key='u' sound='AMB_LTM2' radius='55' img='drum.png'>&nbsp;u</div>
...

which follows the format of drumset.js, see drumset.html for example.

add you own music into composer

  • First you need to run your music in an analyzer to extract the waveform of the music.
  • A simple analyzer is provided but only runs in Firefox.
  • Then click open music in composer and specify the waveform file (in JSONP) and music file (in mp3,ogg or wav).
    • subject to cross origin resource limitation, it may or may not work if you load a file from other domains. which means you can either work on a local file system or host the entire application on your server for other users. this repository is not a suitable place to host copyrighted material for you.

development

This code base is a generic framework for any rhythm game. This is not a full-featured game engine though, but will be a good starting point for you to create your own rhythm game. It is already the best I can offer for free with my limited time.

Toolchains

F/
	F.core/
	celebrate/

If you download the repository to local space, the default SoundManager2 will not work because of security. read details here in the Live Debug Output session, or a quote:

  • If loading from the local filesystem (offline eg. file://, not over HTTP), Flash security is likely preventing SM2 from talking to Javascript. You will need to add this project's directory to the trusted locations in the Flash global security settings panel, or simply view this page over HTTP.

HTML5 backend doesnt have this problem. append ?HTML5 to url, like editor.html?HTML5.

Components

drumset.js

example

drumset binds data to HTML. the reason is the individual divs can be styled freely via CSS.

<div id='drumset'>
	<div id='dr' key='r' sound='china1' radius='35' img='drum.png'>r</div>
</div>

attributes

  • key the keyboard key to 'beat' the drum. can also beat the drum by mouseclick
  • sound can provide file extension but it is recommended not to. drumset will try the extensions .mp3 and .ogg. the reason is some HTML5 audio implementations (notably Firefox) do not support mp3 (intentionally).
  • radius, width and height
  • color background color
  • img image

drum.js

individual drum elements, created by drumset.

chart.js

chart is a class that accepts JSON beat data and run and render the beats on an HTML element. it is used by game. some config options:

var chart_config=
{
	div: $('chart'),	//chart element
	width: 900,		//width in px
	timescale: 300,		//length in pixels representing one second
	block: { w:50, h:50}, //size of a block
	lineheight: 70,		//line height
	lines: 3,			//number of lines
	basebeat: 2,		//interval of basebeat in seconds, visualized by bars
	data: gamedata,		//data object exported by `editor`
	ondata: ondata,		//return the y position and sprite frame of a beat
	//,,,more

musician.js

musician fullfill the visual functionality of a drum element. a musician contains a sprite that will play an animation when being hit. Mgroup is a group of musicians. they are the groups you see in example2.

samples

editor.html drumset.html game.html iconset.html iconset2.html shapes.html analyzer.html SM2_player.html buzz_player.html sugar.html waveform.html filesave.html waveform-player.html

Acknowledgements

music

currently the only music in this game is <喜氣洋洋> (literally translates to jubilant) which is a popular cantongese song in 1980s and is still performed today during lunar new year in Hong Kong area. for this special reason, celebrate is officially published on the first day of lunar new year on 2013.

喜氣洋洋

主唱: 徐小鳳
作詞: 鄭國江
作曲: 五輪真弓
編曲: 吳智強

齊鼓掌(高歌) 歌聲放今晚開心唱請鼓掌
齊鼓掌(高歌) 歌聲唱今晚開心唱請欣賞

熱鬧情調盡情又放量人人陶醉
熱情狀雙雙對對共欣賞
熱烈地彈琴熱烈地唱
歌聲多奔放個個喜氣洋洋
飲多杯祝你個個都開心歡暢
(飲多杯勝嘅各位乾杯飲勝)
喜氣洋洋 洋溢四方

熱熱鬧鬧燈正亮酒正香
滿室鬢影衣香 愉快暢聚
我願你地快樂同分享
為你快樂歌唱 歡笑莫嫌良夜長
願你我和唱 愉快渡快樂時光
渡快樂時光

idea and sprites

I did not invent the game. the game mode refers to a famous rhythm game Taiko. the icons are from HKGolden which in turn derive its icons from an old forum distribution. the idea of all these icons playing together in a celebration is a classic.

drum sounds

the drum sounds are from Acoustic drumkit example sounds

libraries

celebrate is built upon the following javascript libraries:

  • file saver
    • BlobBuilder.js
    • FileSaver.js
  • persistent storage
    • persist-min.js
  • module loaders
    • head.load.min.js
    • require.js, r.js
  • audio
    • buzz.js
    • soundmanager2-nodebug-jsmin.js
  • array extensions
    • sugar-1.3.8-custom.min.js
  • sprite animation

Project F

celebrate is a member of [Project F games](http://project--f.blogspot.com/2013/02/games.html).

License

License of Project F. In short, everything except commercial use is allowed.