Du bist nicht angemeldet.

Stilllegung des Forums
Das Forum wurde am 05.06.2023 nach über 20 Jahren stillgelegt (weitere Informationen und ein kleiner Rückblick).
Registrierungen, Anmeldungen und Postings sind nicht mehr möglich. Öffentliche Inhalte sind weiterhin zugänglich.
Das Team von spieleprogrammierer.de bedankt sich bei der Community für die vielen schönen Jahre.
Wenn du eine deutschsprachige Spieleentwickler-Community suchst, schau doch mal im Discord und auf ZFX vorbei!

Statische Canvas-Objekte relativ machen

  • 1
  • 2

Werbeanzeige

webconqueror

Treue Seele

  • »webconqueror« ist der Autor dieses Themas

Beiträge: 124

Wohnort: Bergisch Gladbach

Beruf: Student

  • Private Nachricht senden

1

18.04.2016, 12:03

Statische Canvas-Objekte relativ machen

Hey :D

Ich habe für mein Browsergame das Spielfeld-Layout gemacht.
Hier

Nun sind die Positionen und Größen der Kartenfelder aber statisch, also in px angegeben.
Ich möchte das jedoch lieber relativ haben, damit auch andere Spieler mit anderer Auflösung
als meine 1920x1080 das Spiel spielen können.
Ich weiß jedoch nicht genau wie ich das hinbekommen soll.
Kann mir da wer helfen?
Hier noch der Code für das Canvas:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

<script>

document.addEventListener('DOMContentLoaded', function() {
  var bg = new Image();
  bg.src = '../images/Spielfeld example.png';

  function anim() {
    var canvas = document.querySelector('#canvas1');
    var ctx = canvas.getContext('2d');

    canvas.width = window.innerWidth * 0.9;
    canvas.height = canvas.width * (9 / 16);

    var width = canvas.width;
    var height = bg.height * (canvas.width / bg.width);

    if(height < canvas.height) {
      width = bg.width * (canvas.height / bg.height);
      height = canvas.height;
    }

    ctx.drawImage(bg, 0, 0, width, height);
    
    ctx.lineWidth = 3;
    // Oben
    ctx.strokeStyle = 'red';
    // ctx.strokeRect(200,30,100,150);
    ctx.strokeRect(350,30,100,150);
    ctx.strokeRect(500,30,100,150);
    ctx.strokeRect(650,30,100,150);
    ctx.strokeRect(800,30,100,150);
    ctx.strokeRect(950,30,100,150);
    ctx.strokeRect(1100,30,100,150);
    ctx.strokeRect(1250,30,100,150);
    //ctx.strokeRect(1400,30,100,150);
    
    //ctx.strokeRect(150,215,100,150);
    ctx.strokeRect(300,215,100,150);
    ctx.strokeRect(450,215,100,150);
    ctx.strokeRect(600,215,100,150);
    ctx.strokeRect(750,215,100,150);
    ctx.strokeRect(900,215,100,150);
    ctx.strokeRect(1050,215,100,150);
    ctx.strokeRect(1200,215,100,150);
    ctx.strokeRect(1350,215,100,150);
    //ctx.strokeRect(1500,215,100,150);
    
    // Oben Deck
    ctx.strokeRect(30,30,100,150);
    
    // Oben History Log
    ctx.strokeRect(30,215,100,150);
    
    // Unten
    ctx.strokeStyle = 'green';
    //ctx.strokeRect(150,435,100,150);
    ctx.strokeRect(300,435,100,150);
    ctx.strokeRect(450,435,100,150);
    ctx.strokeRect(600,435,100,150);
    ctx.strokeRect(750,435,100,150);
    ctx.strokeRect(900,435,100,150);
    ctx.strokeRect(1050,435,100,150);
    ctx.strokeRect(1200,435,100,150);
    ctx.strokeRect(1350,435,100,150);
    //ctx.strokeRect(1500,435,100,150);
    
    // ctx.strokeRect(200,635,100,150);
    ctx.strokeRect(350,635,100,150);
    ctx.strokeRect(500,635,100,150);
    ctx.strokeRect(650,635,100,150);
    ctx.strokeRect(800,635,100,150);
    ctx.strokeRect(950,635,100,150);
    ctx.strokeRect(1100,635,100,150);
    ctx.strokeRect(1250,635,100,150);
    //ctx.strokeRect(1400,635,100,150);
    
    // Unten Deck
    ctx.strokeRect(1600,635,100,150);
    
    // Unten History Log
    ctx.strokeRect(1600,435,100,150);
    
    // Spieler Hand
    ctx.strokeRect(300,825,80,120);
    ctx.strokeRect(450,825,80,120);
    ctx.strokeRect(600,825,80,120);
    ctx.strokeRect(750,825,80,120);
    ctx.strokeRect(900,825,80,120);
    ctx.strokeRect(1050,825,80,120);
    ctx.strokeRect(1200,825,80,120);
    ctx.strokeRect(1350,825,80,120);

    requestAnimationFrame(anim);
  }

  anim();
});

             </script>


LG Tobi :thumbsup:

Checkmateing

Community-Fossil

Beiträge: 2 218

  • Private Nachricht senden

2

18.04.2016, 12:17

Arbeite mit Prozentwerten.

MfG
Check
Das gibt Übersicht! Stay gold.

DeKugelschieber

Community-Fossil

Beiträge: 2 641

Wohnort: Rheda-Wiedenbrück

Beruf: Software-Entwickler

  • Private Nachricht senden

3

18.04.2016, 12:49

Mit Prozentwerten geht nicht, da der Viewport nicht mitskaliert.
Guck mal hier. Dort wird die innerHeight des Canvas auf die Fenstergröße gesetzt, wenn das Fenster skaliert wird (und einmal am Anfang).
Grüße, Kugel

GitHub Meine Firma Pirsch Analytics

webconqueror

Treue Seele

  • »webconqueror« ist der Autor dieses Themas

Beiträge: 124

Wohnort: Bergisch Gladbach

Beruf: Student

  • Private Nachricht senden

4

18.04.2016, 12:58

@ DeKugelschreiber:
Das habe ich doch schon ;)
Es geht um die ganzen Felder im Canvas :whistling:

LG :D

DeKugelschieber

Community-Fossil

Beiträge: 2 641

Wohnort: Rheda-Wiedenbrück

Beruf: Software-Entwickler

  • Private Nachricht senden

5

18.04.2016, 13:52

Woops sorry. Dann kannst du das doch prozentual machen. Gib den Feldern einfach keine fixe Größe, sondern einen Anteil an z.B. der Gesamthöhe/-breite. Die Pixel berechnest du dann dynamisch.
Für die Seitenverhältnisse kannst du dann wieder canvas.width und canvas.height heranziehen :)

Alternativ kannst du auch eine fixe Größe vorgeben. Spieler mit geringer Auflösung sehen dann weniger, welche mit höherer eben mehr. Ob das ein Problem (unfairer Vorteil) für dein Spiel wäre, musst du wissen.
Grüße, Kugel

GitHub Meine Firma Pirsch Analytics

webconqueror

Treue Seele

  • »webconqueror« ist der Autor dieses Themas

Beiträge: 124

Wohnort: Bergisch Gladbach

Beruf: Student

  • Private Nachricht senden

6

18.04.2016, 17:16

ctx.strokeRect(350,30,100,150);
Also in den Klammern ist das ja wie folgt:
(x-Koordinate, y-Koordinate, Breite x, Höhe y)
Nun müsste ich die px ja durch inner.width * 0.09) oder so ersetzen können?
War es das schon oder vergesse ich da was? Läuft nämlich irgendwie nicht...
LG Tobi ^^

Checkmateing

Community-Fossil

Beiträge: 2 218

  • Private Nachricht senden

7

18.04.2016, 17:30

Hol dir die Dimensionen deines Canvas und positioniere alles anhand dessen.
Also der Button ist bei §\mathbf{X}\%§ der width und §\mathbf{Y}\%§ der height des Canvas.
Läuft nicht ist nicht ohne minimal code example. :P

MfG
Check
Das gibt Übersicht! Stay gold.

marcgfx

Treue Seele

Beiträge: 236

  • Private Nachricht senden

8

19.04.2016, 13:45

ich würde weiterhin mit absoluten werten rechnen und dann einfach einen skalierungsfaktor verwenden. % werte sind mühsam.
Devader DevLog - Devader spielen

Skratti

Frischling

Beiträge: 55

  • Private Nachricht senden

9

19.04.2016, 14:41

Lege die ganzen Rectangles als Objekte in einem Array an. Benutze absolute Koordinaten die unabhängig von irgendwelchen Pixelwerten sind.

In der der anim() Methode (oder bei Start der Anwendung/ einem Resize des Browser-Fenster) prüfst du die Größe des Canvas Elementes ab. Dann solltest du dir überlegen ob in einem kleinen Canvas gescrollt wird, oder alles nur sehr klein skaliert wird.
Vielleicht ja auch beides - das Mausrad zoomt rein und raus, Per drag&drop bewegt man das Sichtfeld des Spielplanes.

Diese Informationen brauchst du dann aber in der Anim() methode. Du iterierst durch deine Rect-objekte, und wendest auf jedes eine zu schreibende Abbildungsfunktion (Absolute Koordinaten -> Viewport Coordinaten) an.
Wenn du möchtest kopiere ich heute Abend ein paar relevante Stellen aus meinem Sourcecode hier in den Thread...
Empires in Space
MMO 4X, Rundenbasiert
HTML5/TypeScript/Javascript/CSS/C#/SQL

webconqueror

Treue Seele

  • »webconqueror« ist der Autor dieses Themas

Beiträge: 124

Wohnort: Bergisch Gladbach

Beruf: Student

  • Private Nachricht senden

10

19.04.2016, 22:29

Das wäre super, ich beschäftige mich morgen im Unterricht weiter mit der Page, vielleicht
kann ich dann das ganze zum laufen bringen :D

Werbeanzeige

  • 1
  • 2

Ähnliche Themen