Follow the progress of Flappy Sphere at https://github.com/sphere-group/sphere-projects !

So yea, Flappy Bird has come and gone and now there are no shortage of clones, including a couple of HTML5 ones. I am going to port the one from flappybird.io (basically identical to the one from freeflappybird.org; don't know which was first and which was the copy) to Sphere as a personal exercise to see how dull my Sphere-specific development skills have actually become. I don't currently know if I'll attempt to use the map engine or not, but it'll certainly be playable.

My goal is by the end of the weekend, but if needed I'll take a full week or so on it. My main development goal is to rein in my tendency to currently over-engineer things, so we'll see how it goes.

MISSION START!

Awesome! It would be great to see a new game for Sphere, even a simple one!

I sympathize with the over-engineering.

I would personally say don't use the map engine. That's overkill.

Update: first commit of (incomplete) Flappy Sphere! First post has the GitHub link. Currently implemented:

• Multi-layered background with variable scrolling rates
  
• A super-basic (super-basic for me, anyways    ) title menu
  
• Testing of left-click and left-drag mouse handling functionalities
  

Easily the most annoying part of coding in Sphere JS versus Web JS is the lack of usable ready-made event handling. I spent at least an hour adding workable mouse handling, but hopefully it's reusable in other projects of similar structure. I didn't have immediate access to my old NCmdHandler script, but I didn't want to make my input events mutually exclusive this time; if someone presses Space AND left-clicks simultaneously, I want it to queue 2 flaps instead of 1.

I'm committing the project to the official sphere-projects repo as part of my intention to have the game as one of the official freely distributed default Sphere games. Ideally, I'd like any games intended to be "bundled" with Sphere committed to this repo and it will be governed under the same license as the Sphere engine itself (currently GPL).

Anyone here who wants a completed project added to the official bundle please let us know so someone with push access to the repo can commit it. I'm only committing incomplete versions of Flappy Sphere to the repo because it's the first official project in that repo, I want people to be able to follow its progress, and I won't have to perform git-nastics once it's done. After Flappy Sphere, only complete projects should be committed, but feel free to commit to your personal public repositories if you want us to follow progress!

I'm just going to state in advance that I have no interest in Flappy Bird whatsoever and don't really get why you'd want to make a remake, other than some practice. But good work and good luck with the rest of it.

Well, I applaud the difficulty and simplicity of Flappy Bird. And the lack of in-app purchases. I have no idea why it went viral the way it did, but whatever.

Definitely a nice project to recreate for fun and practice.

Update: first attempt at (incomplete) Sphere sprite, goal is for the thing that flaps to be a scarf or cape or similar; first attempt at click-to-flap logic! Ignore the sprite spinning for now, I just wanted to make sure rotateBlit was doing its job, though if the original project is any indication I may need to make a custom rotate-about-a-point transformBlit.

The original flappybird.io script from which this project is ported uses CreateJS to handle most of the tedious stuff like tweening; for this project I choose instead to recreate said functionality independent of CreateJS, so things like chaining tweens (which is the bread-and-butter of the original's flap function) isn't going to happen yet (and probably won't for such a "simple" project). Also, the collision-handling is in another script, ndgmr.Collision.js, which I'm also recreating to reduce another dependency.

I lost all of Sunday because Saturday night my laptop was threatening to blue screen AGAIN (overheating of the graphics card) so I left it sit.

My next goal is the pipe spawning, then collision detection, then I guess cleanup. I might even submit it to the Flappy Jam when I'm done.

Update: first attempt at collision detection! Also, smaller sprite to actually fit in this game's scale.

Pipes spawn (both regular and upside-down ones) and Sphere can now collide with them. Ignoring the lack of "juice" (e.g. rotating Sphere during rise or fall, which I'm currently working on) I think my flap physics are screwy; the flap motion feels too slow and the transition to falling isn't smooth. If a second set of eyes would like to take a look at it, the functions rq and tick in G.prototype.execute are where the magic happens.

Once flapping is fixed, collision-handling is tighter (I want to take the current rotation into account and the math is tedious :/ ), and the last of the "juice" is added (effects, sound, scoring, graphical cleanup on Sphere sprite) I'm going to call it done! It's technically playable now, but really who would want to play it in this state? It'll probably be too late for the Flappy Jam though since I have to spend the rest of my weekend doing homework.

collision-handling is tighter (I want to take the current rotation into account and the math is tedious :/ )

You could do pixel-perfect collision detection, rotating an image and checking the pixels. The code to do this is leagues easier than rotated bounding boxes, since it's mostly a 2D pixel lookup.

Here is the code to check the pixels:

Code: (javascript) [Select]

	// pixel-perfect collision checker:
	var max = Math.max, min = Math.min;
	function Check(a, b) {
		if (a == b) return false;
		
		// images:
		var s1 = a.surface, s2 = b.surface;
		
		// positions:
		var top    = max(a.pos.y, b.pos.y),
		var left   = max(a.pos.x, b.pos.x),
		var right  = min(a.pos.x + s1.width, b.pos.x + s2.width),
		var bottom = min(a.pos.y + s1.height, b.pos.y + s2.height);

		// collisions:
		for (var y = top; y < bottom; ++y) {
			for (var x = left; x < right; ++x) {
				var c1 = s1.getPixel(x - a.pos.x, y - a.pos.y);
				var c2 = s2.getPixel(x - b.pos.x, y - b.pos.y);
				if (c1.alpha > 0 && c2.alpha > 0) return true;
			}
		}

		return false;
	}

Where a and b are objects that have an (x, y) position element and a Sphere surface object. Then when you rotate the image, you rotate the surface underneath. Then when you check the pixels it's perfect each time.