{"action":"created","issue":{"url":"https://api.github.com/repos/fable-compiler/fable-graphics/issues/4","repository_url":"https://api.github.com/repos/fable-compiler/fable-graphics","labels_url":"https://api.github.com/repos/fable-compiler/fable-graphics/issues/4/labels{/name}","comments_url":"https://api.github.com/repos/fable-compiler/fable-graphics/issues/4/comments","events_url":"https://api.github.com/repos/fable-compiler/fable-graphics/issues/4/events","html_url":"https://github.com/fable-compiler/fable-graphics/issues/4","id":176410196,"number":4,"title":"Functional game engine","user":{"login":"alfonsogarciacaro","id":8275461,"avatar_url":"https://avatars.githubusercontent.com/u/8275461?v=3","gravatar_id":"","url":"https://api.github.com/users/alfonsogarciacaro","html_url":"https://github.com/alfonsogarciacaro","followers_url":"https://api.github.com/users/alfonsogarciacaro/followers","following_url":"https://api.github.com/users/alfonsogarciacaro/following{/other_user}","gists_url":"https://api.github.com/users/alfonsogarciacaro/gists{/gist_id}","starred_url":"https://api.github.com/users/alfonsogarciacaro/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/alfonsogarciacaro/subscriptions","organizations_url":"https://api.github.com/users/alfonsogarciacaro/orgs","repos_url":"https://api.github.com/users/alfonsogarciacaro/repos","events_url":"https://api.github.com/users/alfonsogarciacaro/events{/privacy}","received_events_url":"https://api.github.com/users/alfonsogarciacaro/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":10,"created_at":"2016-09-12T15:44:00Z","updated_at":"2016-09-20T20:17:25Z","closed_at":null,"body":"Hi @whitetigle and @MangelMaxime! Let's start a new issue as the previous one went off-topic long ago ;)\r\n\r\nI've a bit of experience with game engines in the past (before I learnt functional programming) so here are my thoughts:\r\n\r\n- We must do as @whitetigle says and start by creating a comparison with a pure JS sample like http://www.goodboydigital.com/pixijs/bunnymark_v3/ so we can always compare how well our engine performs against raw JS.\r\n- @MangelMaxime's [adaptation of Fable architecture](https://github.com/fable-compiler/fable-graphics/tree/feature/fable-architecture/samples/pixi/fable-architecture) is a good start but there's room for improvement. I guess we can still remove some steps while keeping an API similar to the one for fable-virtualdom.\r\n- The idea of `render` with something like Canvas is different from a GUI framework like DOM (or Windows Forms or whatever). In the latter, `render` means updating the GUI component hierarchy to make some changes. This is expensive and it doesn't need to be done for every frame (actually the concept of frame is foreign to GUI frameworks), but virtualdom allows us to update the state without worrying too much about the actual DOM. On the other hand, with Canvas you draw raw pixel and everything must be rendered every frame (the only optimisation is to skip rendering of elements that are completely hidden).\r\n- Optimisation in games usually have to do with the `update` method, as it often involves expensive physic calculations. We need to receive the time elapsed (the argument in the callback to animation frame), first to do calculations by time and not by time frame (e.g. so bunnies rotate at the same speed even if the frame rate drops) and second to skip calculations that are not needed at that point.\r\n\r\nSo we need to take the classic game loop and try to make it more functional:\r\n\r\n```fsharp\r\nlet gameLoop(dt) =\r\n    update(dt)\r\n    render()\r\n    window.requestAnimationFrame(gameLoop)\r\n```\r\n\r\nI have a couple of concerns at the moment:\r\n\r\n- **Events**: we could take the events happening in every frame and put them in a buffer that is passed to the `update` function. Any ideas?\r\n- **State**: when dealing with thousand of sprites on screen I guess it's going to be difficult to keep the state functional and immutable. We'll probably have to use a mutable state, but we could try to do it in an elegant way."},"comment":{"url":"https://api.github.com/repos/fable-compiler/fable-graphics/issues/comments/248421094","html_url":"https://github.com/fable-compiler/fable-graphics/issues/4#issuecomment-248421094","issue_url":"https://api.github.com/repos/fable-compiler/fable-graphics/issues/4","id":248421094,"user":{"login":"MangelMaxime","id":4760796,"avatar_url":"https://avatars.githubusercontent.com/u/4760796?v=3","gravatar_id":"","url":"https://api.github.com/users/MangelMaxime","html_url":"https://github.com/MangelMaxime","followers_url":"https://api.github.com/users/MangelMaxime/followers","following_url":"https://api.github.com/users/MangelMaxime/following{/other_user}","gists_url":"https://api.github.com/users/MangelMaxime/gists{/gist_id}","starred_url":"https://api.github.com/users/MangelMaxime/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MangelMaxime/subscriptions","organizations_url":"https://api.github.com/users/MangelMaxime/orgs","repos_url":"https://api.github.com/users/MangelMaxime/repos","events_url":"https://api.github.com/users/MangelMaxime/events{/privacy}","received_events_url":"https://api.github.com/users/MangelMaxime/received_events","type":"User","site_admin":false},"created_at":"2016-09-20T20:17:25Z","updated_at":"2016-09-20T20:17:25Z","body":"Hello :)\r\n\r\nGood job on all your research :).\r\n\r\n# 1 - Behaviours.\r\n\r\nFor the point 1, this is something needed to simplify game development but behavior are really something coming from POO world. We should try to find something more functional I think. Because I played for some time with Class and F# and it's work great that can feel a little strange by moment.\r\n\r\nHere  is a code I was playing with to test some GUI library over Pixi.\r\n\r\n[Rectangle sample](https://github.com/Herebris/Hui/blob/develop/src/Hui/Components/Rectangle.fs)\r\n[Button inherited rectangle](https://github.com/Herebris/Hui/blob/develop/src/Hui/Components/Button.fs#L13)\r\n\r\n# 2 - UI layout management\r\n\r\nI already tried to write some GUI library. I first tried Immediate Mode and Second Time Component mode which is the code I show on point 1.\r\n\r\nI would definitely go for IMGUI because this could be more functionnal and also it's don't enforce the user to make the GUI retain the informations. He can use the storage he wants :)\r\n\r\nThe reference in term of IMGUI is I think this project: https://github.com/ocornut/imgui\r\nIt's in C++ ok... But if you look at the samples it's kind of powerfull and the code is simple.\r\n\r\nI am working a port of IMGUI for Fable. Still under development and I am trying to look at how we can use Pixi as Backend. Because Pixi support the Text rendering and it's the hard part :) (Everyone can draw a rectangle).\r\n\r\n# 3 - Screens\r\n\r\nScreens are good enough but old has you say. We can try to modernize it like [Godot](http://docs.godotengine.org/en/latest/tutorials/step_by_step/scenes_and_nodes.html) do.\r\n\r\nIn fact in Godot there some Scenes (aka screens here) and this Scenes contains some Nodes. And in fact, everything is a Node (sprites, collisions box, etc.) and even Scenes can be a Node.\r\n\r\nFor example, you can make a scene \"player\" which contain the sprite, spriteanim, collision box, the scripts, etc. And you can import it in others scenes. And so if you change the Player scripts it reflected everywhere. It's some how different from the traditional game engine but I don't really explain it well. I would advise you to do some research if you can.\r\n\r\n# 4 - No DOM. 100% Pixi. Ramblings :wink:\r\n\r\nI hate CSS and that why I am working on a GUI library. Really this language is a pain to play with and I think we could have better result by saying ok we only have a canvas. So our GUI part (draw, event, etc.) can only be used in this context (\"pixel based\").\r\n\r\nI am not really giving you solutions except perhaps on point number 2 where my GUI will only say I am based on pixed otherwise I am agnostic to your implementation. So a good idea could be to share our time between the different aspects of the project ?\r\n\r\nFinally, I think if we can abstract the pixi part which is somehow POO based. We could try to make something 100% functional. Because Pixi is already doing a great with performance for Rendering. There is one other place where performance are needed which is the Physics part and probably here POO or Prototype are better.\r\nBut otherwise we could stay functional and have the benefit of using F# and not JavaScript :)\r\n\r\nPs: Hope to make some sense :)"}}
{"actor":{"display_login":"MangelMaxime"}}