# Game development framework with p5js renderer

**URL:** <https://discourse.processing.org/t/game-development-framework-with-p5js-renderer/4294>\
**Category:** Gallery\
**Created:** [October 9, 2018, 7:57pm UTC](https://discourse.processing.org/t/game-development-framework-with-p5js-renderer/4294 "2018-10-09T19:57:43Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![r4nd0m](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/r4nd0m/32/9477_2.png) [@r4nd0m](https://discourse.processing.org/u/r4nd0m)\
**Post date:** [October 9, 2018, 7:57pm UTC](https://discourse.processing.org/t/game-development-framework-with-p5js-renderer/4294/1 "2018-10-09T19:57:43Z")

</div>

Hi,

I’m working on a new project. This is a JavaScript 2d game development framework based on my previous framework I used to developed [Owom.io](http://Owom.io).  
Basically and improved version with a lot more cool stuff in it. It uses p5js as a rendering layer.  
I hope I will finish alpha till the end of the month, and hopefully have people make games and share it with us.

The main goal was to enable people to write modular code, as well as to provide a set of predefined helpers to boost the development and make it really enjoyable experience.

I published two videos already where I show what framework can do in this stage and I will continue to upload tutorial videos as I add more cool feature to the framework.

Part 1

[![](https://img.youtube.com/vi/p-gwhy8z3W0/maxresdefault.jpg "Owom.io - Javascript game development framework intro") ](https://www.youtube.com/watch?v=p-gwhy8z3W0)

Part 2

[![](https://img.youtube.com/vi/hGbBjuU9s_E/hqdefault.jpg "JavaScript 2D game framework - asset loading") ](https://www.youtube.com/watch?v=hGbBjuU9s_E)

---

<div class="post-metadata">

**Author:** ![r4nd0m](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/r4nd0m/32/9477_2.png) [@r4nd0m](https://discourse.processing.org/u/r4nd0m)\
**Post date:** [October 11, 2018, 10:04pm UTC](https://discourse.processing.org/t/game-development-framework-with-p5js-renderer/4294/2 "2018-10-11T22:04:14Z")

</div>

Quick dev update - Networking basics

[![](https://img.youtube.com/vi/jh8nbWCxOSY/maxresdefault.jpg "JavaScript p5js game framework - quick dev update on networking") ](https://www.youtube.com/watch?v=jh8nbWCxOSY)

---

<div class="post-metadata">

**Author:** ![r4nd0m](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/r4nd0m/32/9477_2.png) [@r4nd0m](https://discourse.processing.org/u/r4nd0m)\
**Post date:** [October 26, 2018, 9:11pm UTC](https://discourse.processing.org/t/game-development-framework-with-p5js-renderer/4294/3 "2018-10-26T21:11:50Z")

</div>

New video released

# Froobit p5js game framework - Infinite parallax background

[![](https://img.youtube.com/vi/SEqZlxb0ugI/maxresdefault.jpg "Froobit game framework - Infinite parallax background") ](https://www.youtube.com/watch?v=SEqZlxb0ugI)

---

<div class="post-metadata">

**Author:** ![r4nd0m](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/r4nd0m/32/9477_2.png) [@r4nd0m](https://discourse.processing.org/u/r4nd0m)\
**Post date:** [October 28, 2018, 6:02pm UTC](https://discourse.processing.org/t/game-development-framework-with-p5js-renderer/4294/4 "2018-10-28T18:02:27Z")

</div>

Live example here: [http://owom.io/froobit/starfield2/](http://owom.io/froobit/starfield2/)

> made with Froobit & p5js

---

<div class="post-metadata">

**Author:** ![r4nd0m](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/r4nd0m/32/9477_2.png) [@r4nd0m](https://discourse.processing.org/u/r4nd0m)\
**Post date:** [November 1, 2018, 9:52pm UTC](https://discourse.processing.org/t/game-development-framework-with-p5js-renderer/4294/5 "2018-11-01T21:52:00Z")

</div>

New video - Sprite Animations

[![](https://img.youtube.com/vi/lJVuzRqZbPE/maxresdefault.jpg "Froobit game framework - Sprite animations") ](https://www.youtube.com/watch?v=lJVuzRqZbPE)

Live demo: [http://owom.io/froobit/walking/](http://owom.io/froobit/walking/)

---

<div class="post-metadata">

**Author:** ![r4nd0m](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/r4nd0m/32/9477_2.png) [@r4nd0m](https://discourse.processing.org/u/r4nd0m)\
**Post date:** [November 2, 2018, 5:25pm UTC](https://discourse.processing.org/t/game-development-framework-with-p5js-renderer/4294/6 "2018-11-02T17:25:48Z")

</div>

New Video

[![](https://img.youtube.com/vi/cF9w0OcvVms/maxresdefault.jpg "Froobit game framework - Parallax scrolling") ](https://www.youtube.com/watch?v=cF9w0OcvVms)

And new example [http://owom.io/froobit/walking2/](http://owom.io/froobit/walking2/)

---

<div class="post-metadata">

**Author:** ![r4nd0m](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/r4nd0m/32/9477_2.png) [@r4nd0m](https://discourse.processing.org/u/r4nd0m)\
**Post date:** [November 3, 2018, 7:40pm UTC](https://discourse.processing.org/t/game-development-framework-with-p5js-renderer/4294/7 "2018-11-03T19:40:59Z")

</div>

New Video!  
**Adding Physics to the Game** (planckJS - box2d port)

[![](https://img.youtube.com/vi/zS3g-Z5zk6Y/maxresdefault.jpg "Froobit game framework - Adding Physics") ](https://www.youtube.com/watch?v=zS3g-Z5zk6Y)

Example from the video: [http://owom.io/froobit/walking3/](http://owom.io/froobit/walking3/)

---

<div class="post-metadata">

**Author:** ![r4nd0m](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/r4nd0m/32/9477_2.png) [@r4nd0m](https://discourse.processing.org/u/r4nd0m)\
**Post date:** [November 11, 2018, 1:00pm UTC](https://discourse.processing.org/t/game-development-framework-with-p5js-renderer/4294/8 "2018-11-11T13:00:04Z")

</div>

**Added Camera support. Made with p5js & Froobit framework**

 ![asdsadsad](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c9ca7669d81886280d1860418b9a69cc359d9623.jpeg)

Checkout live example here: [http://owom.io/froobit/camera/](http://owom.io/froobit/camera/)

---

<div class="post-metadata">

**Author:** ![r4nd0m](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/r4nd0m/32/9477_2.png) [@r4nd0m](https://discourse.processing.org/u/r4nd0m)\
**Post date:** [November 12, 2018, 8:36pm UTC](https://discourse.processing.org/t/game-development-framework-with-p5js-renderer/4294/9 "2018-11-12T20:36:37Z")

</div>

# Game Framework Devlog #1 - 2D Platformer Physics

[![](https://img.youtube.com/vi/HBRpaZYEgGg/maxresdefault.jpg "Game Framework Devlog #1 - 2D Platformer Physics") ](https://www.youtube.com/watch?v=HBRpaZYEgGg)

---

<div class="post-metadata">

**Author:** ![r4nd0m](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/r4nd0m/32/9477_2.png) [@r4nd0m](https://discourse.processing.org/u/r4nd0m)\
**Post date:** [November 14, 2018, 8:08pm UTC](https://discourse.processing.org/t/game-development-framework-with-p5js-renderer/4294/10 "2018-11-14T20:08:06Z")

</div>

**Game Framework Devlog #2 - Collision detection**

[![](https://img.youtube.com/vi/OOYFDV2BrO0/maxresdefault.jpg "Game Framework Devlog #2 - Collision detection") ](https://www.youtube.com/watch?v=OOYFDV2BrO0)

**Live example** : [http://owom.io/froobit/collisions/](http://owom.io/froobit/collisions/)