Comments (6)
It would be nice if we abstracted 24a2's engine logic from the presentational layer
The more I think about splitting this out the more I like it. It lets you do cool things like inject a fake renderer for use in tests - You can start a game, run it for a couple of iterations then assert that certain dots have been set to certain colours. Testing at the moment is pretty difficult because internal logic is closely intertwined with displaying stuff
from 24a2.
Created PR #13 to share my implementation of replacing p5.js. It replaces all calls to p5, and doesn't try to split the engine logic and rendering.
In summary, the changes are:
- Drawing now uses Canvas API
- Mouse and keyboard input use addEventListener
- "Game loop" is implemented using requestAnimationFrame
Problem with these are that these are only for browsers AFAIK, so when a custom Renderer is implemented, these should be put into a CanvasRenderer or similar.
from 24a2.
I played around with removing P5.js, and got it working using the Canvas API. Screenshot P5 vs Canvas API.
If we want to separate the engine logic from rendering, this could be done by optionally providing some kinda renderer instance via GameConfig, that implements a simple interface for drawing the dots, defaulting to canvas renderer.
If you want, I can make a branch and tidy up my code a bit, so we can discuss further details if you're interested in the implementation.
from 24a2.
I'd definitely suggest sharing the code that removes P5. I actually came here now to do just that myself.
Re. splitting up engine and rendering: personally I'd want the game to be oblivious of the renderer, so sticking it in GameConfig wouldn't quite be ideal.
For example, it would be relatively easy to make a CLI renderer for 24a2 that draws dots in the terminal. Ideally we'd be able to take a game.js file that runs in 24a2 in the browser, and run it with the CLI version without having to edit any part of the game.js.
I'm also toying with the idea of making a hardware console for 24a2 using an Espruino (microcontroller that can run JavaScript), and again it would be cool if we could just drop in a game.js file and have it work with no changes required.
from 24a2.
This should also help with the continuous key press problem refered in this card: https://github.com/jamesroutley/24a2/projects/1#card-36909442
from 24a2.
Implemented in #28
from 24a2.
Related Issues (14)
- Custom grid size HOT 2
- Sharing games made with 24a2 HOT 7
- Update library file path in https://24a2.routley.io/tutorial/ HOT 1
- Feature request: custom grid size HOT 1
- Investigate mobile support HOT 2
- Feature request: set text color HOT 1
- Helter Shelter - a game based on the 24a2 engine HOT 1
- Add basic sound support HOT 1
- onDotClicked() doesn't work when the canvas has padding
- ES6 modules support HOT 4
- Configurable clear color HOT 2
- A list of featured games? HOT 2
- How does onDotClicked work? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from 24a2.