Question

我正在roguelike中写Elm，其中有一个离散的50x50网格（请参阅share-elm.com snippet）。 roguelike是一种视频游戏，其中物体（如敌人，物品，墙壁等）由ASCII字符表示。因此，我应该能够有数百个不同的ASCII字符，以矩形网格对齐。每个字符都应严格在其网格单元格内。

要创建此网格，我将每个字符放在一个正方形container（实际游戏容器的1/50大小）中。这意味着我可以在游戏中拥有2500个容器。 Elm为容器创建<div>元素，即使我将这些容器转换为Form并将它们放在collage内。这使我的Firefox 39.0性能非常低。

如何在网格单元格中创建一个矩形网格，其中包含精确对齐的ASCII字符（可能还有一些其他图形元素），这样无论我同时拥有多少元素，拼贴画仍然保持快速响应？每当我在拼贴中编写包含大量容器和其他元素的程序时，通用的惯用方法是什么？或者也许有一种完全不同的方法来在Elm中创建活泼的矩形网格？

Answer 1

一种可能性（如果您不介意编写某些HTML而不是使用collage / container）将使用Html.Lazy模块。例如，你可以包装每个＆＃34; row＆＃34;的渲染。 lazy中显示的内容，它只会重新渲染已更改的行（每个时间步/运动应该只有1-2个。）

Answer 2

您在这里寻找的是Graphics.Collage.text。当您将Element变成Form榆树时，我会采用可以放置任何Element 的常规方法，例如 Form，但它不会实际上它画在画布上。（是的，实施细节）。如果您直接从Text转到Form，则静态地知道它是文本，因此可以使用在画布上绘制文本的更快方法。这是一个简单的改变：

view : (Int, Int) -> Element
view (w,h) =
  let
    s = min w h -- collageSize
    forms = List.map (\(x,y) -> move (s,s) (x,y) playerForm)
               <| cartesian 0 (screenSize-1) 0 (screenSize-1)
    playerForm = "@"
               |> Text.fromString
               |> Text.height ((toFloat s) / screenSize)
               |> C.text
             --  |> E.centered
             --  |> E.container (s//screenSize) (s//screenSize) E.middle
             --  |> C.toForm
  in
    E.color Color.lightGray
       <| E.container w h E.middle
            <| E.color Color.white
                 <| C.collage s s forms

而不是评论中的三行，而只是C.text。您可以在updated share-elm snippet中看到响应能力请注意，您无法再选择文字！但除此之外应该好多了。

如何在Elm中使拼贴（有很多容器）更具响应性？

2 个答案: